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
 
+  @include top-nav-is-colored
+    background-color: var(--primary-color)
 
-.side
+.menuIcon
-  display: flex
+  @include top-nav-is-colored
-  align-items: center
+    background-color: var(--primary-color-active)
-
-
-.topNavBarColor
-  background-color: var(--primary-color)
-
 
 .navIcon
   font-size: 20px
@@ -29,149 +33,103 @@
   color: var(--primary-text-color)
   border-radius: 50%
   transition: background 0.2s ease-out
+  width: 1em
+  height: 1em
 
+  @include top-nav-is-colored
+    color: var(--text-with-main-color)
 
-.topNavBarColor .navIcon
+    &:hover
-  color: var(--text-with-main-color)
+      background-color: var(--primary-color-hover)
 
+  &:hover
+    background-color: var(--side-nav-hover-color)
+    transition: background 0.2s ease-in
 
-.navIcon:hover
+  &:active
-  background-color: var(--side-nav-hover-color)
+    background-color: var(--tertiary-text-color)
-  transition: background 0.2s ease-in
+    transition: background 0.2s ease-in
 
-
+.side
-.topNavBarColor .navIcon:hover
-  background-color: var(--primary-color-hover)
-
-
-.navIcon: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
-
-
-.navSearchIcon
-  top: 10px
-  display: none
-
-.logo
   display: flex
   align-items: center
-  padding: 0px 25px 0px 10px
 
-  .logoIcon
+  .navSearchIcon
-    background-image: var(--logo-icon)
+    @media only screen and (min-width: 681px)
-    background-repeat: no-repeat
+      display: none
-    background-position: right top
+
-    background-size: 25px
+  .logo
-    width: 25px
+    display: flex
-    height: 25px
+    align-items: center
+    padding: 0px 25px 0px 10px
+
+    .logoIcon
+      background-image: var(--logo-icon)
+      background-repeat: no-repeat
+      background-position: right top
+      background-size: 25px
+      width: 25px
+      height: 25px
 
 
-  .logoIconBarColor
+    .logoIconBarColor
-    background-image: var(--logo-icon-bar-color)
+      background-image: var(--logo-icon-bar-color)
 
 
-  .logoText
+    .logoText
-    margin-left: 5px
+      margin-left: 5px
-    position: relative
+      position: relative
-    top: -3px
+      top: -3px
-    background-image: var(--logo-text)
+      background-image: var(--logo-text)
-    background-repeat: no-repeat
+      background-repeat: no-repeat
-    background-position: right top
+      background-position: right top
-    background-size: 100px
+      background-size: 100px
-    width: 100px
+      width: 100px
-    height: 40px
+      height: 40px
 
+      @media only screen and (max-width: 680px)
+        display: none
 
-  .logoTextBarColor
+    .logoTextBarColor
-    background-image: var(--logo-text-bar-color)
+      background-image: var(--logo-text-bar-color)
 
 .middle
-
   .searchContainer
     display: flex
     align-items: center
 
-  .searchInput
+    @include top-nav-is-colored
-    width: 400px
+      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: 420px
+
+      @media only screen and (max-width: 680px)
+        flex: 1
 
   .searchFilters
     position: absolute
-    margin-left: 270px
+    margin: 10px 20px 20px 270px
-    margin-right: 20px
+    transition: margin 150ms ease-in-out
-    margin-top: 10px
-    margin-bottom: 20px
-    transition-property: margin
-    transition-duration: 150ms
-    transition-timing-function: 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