Getting there

src/renderer/components/top-nav/top-nav.sass

@@ -1,3 +1,10 @@
+@use "sass:selector"
+
+@mixin top-nav-is-colored
+  @at-root
+    .topNavBarColor &, .topNavBarColor#{&}
+      @content
+
 .topNav
   position: fixed
   z-index: 4
@@ -12,15 +19,12 @@
   grid-template-columns: 1fr auto 1fr
   align-items: center
 
-
-.side
-  display: flex
-  align-items: center
-
-
-.topNavBarColor
+  @include top-nav-is-colored
     background-color: var(--primary-color)
 
+.menuIcon
+  @include top-nav-is-colored
+    background-color: var(--primary-color-active)
 
 .navIcon
   font-size: 20px
@@ -29,42 +33,29 @@
   color: var(--primary-text-color)
   border-radius: 50%
   transition: background 0.2s ease-out
+  width: 1em
+  height: 1em
 
-
-.topNavBarColor .navIcon
+  @include top-nav-is-colored
     color: var(--text-with-main-color)
 
+    &:hover
+      background-color: var(--primary-color-hover)
 
-.navIcon:hover
+  &:hover
     background-color: var(--side-nav-hover-color)
     transition: background 0.2s ease-in
 
-
-.topNavBarColor .navIcon:hover
-  background-color: var(--primary-color-hover)
-
-
-.navIcon:active
+  &:active
     background-color: var(--tertiary-text-color)
     transition: background 0.2s ease-in
 
-
-.topNavBarColor .menuIcon:active
-  background-color: var(--primary-color-active)
-
-
-.navBackIcon
-  top: 10px
-  left: 50px
-
-
-.navForwardIcon
-  top: 10px
-  left: 85px
-
+.side
+  display: flex
+  align-items: center
 
   .navSearchIcon
-  top: 10px
+    @media only screen and (min-width: 681px)
       display: none
 
   .logo
@@ -96,82 +87,49 @@
       width: 100px
       height: 40px
 
+      @media only screen and (max-width: 680px)
+        display: none
 
     .logoTextBarColor
       background-image: var(--logo-text-bar-color)
 
 .middle
-
   .searchContainer
     display: flex
     align-items: center
 
+    @include top-nav-is-colored
+      background-color: var(--primary-color-hover)
+
+    @media only screen and (max-width: 680px)
+      position: fixed
+      left: 0
+      right: 0
+      top: 60px
+      display: none
+      background-color: var(--side-nav-color)
+
     .searchInput
-    width: 400px
+      width: 420px
+
+      @media only screen and (max-width: 680px)
+        flex: 1
 
   .searchFilters
     position: absolute
-    margin-left: 270px
-    margin-right: 20px
-    margin-top: 10px
-    margin-bottom: 20px
-    transition-property: margin
-    transition-duration: 150ms
-    transition-timing-function: ease-in-out
+    margin: 10px 20px 20px 270px
+    transition: margin 150ms ease-in-out
 
+    @media only screen and (max-width: 680px)
+      left: 0
+      right: 0
+      margin: 95px 10px 0px
 
+// ?
 .expand
   margin-left: 100px
 
-
+// unsure where to group this selector instead
 @media only screen and (max-width: 680px)
   .menuIcon
     display: none
-
-
-  .navBackIcon
-    left: 45px
-
-
-  .navForwardIcon
-    left: 80px
-
-
-  .navSearchIcon
-    display: block
-    left: 120px
-
-
-  .logoIcon
-    left: 10px
-
-
-  .logoText
-    display: none
-
-
-  .searchContainer
-    position: fixed
-    display: none
-    width: 100%
-    top: 60px
-    background-color: var(--side-nav-color)
-
-
-  .topNavBarColor .searchContainer
-    background-color: var(--primary-color-hover)
-
-
-  .searchInput
-    width: 80%
-    margin: 0 auto
-
-
-  .navFilterIcon
-    right: 0px
-
-
-  .searchFilters
-    margin-top: 130px
-    margin-left: 10px
-    margin-right: 10px