Cleanup and re-arrange

src/components/Navbar/Navbar.sass

@@ -1,8 +1,8 @@
 @use '/src/assets/css/viewport.sass' as view
+@use '/src/assets/css/variables.sass' as vars
 @use 'sass:color'
 
-$background: rgba(15, 66, 114, 0.426)
-$text: #f1f1f1
+$text: vars.$textColor
 $coffeeColor: #1a726e
 
 .navbar
@@ -10,38 +10,9 @@ $coffeeColor: #1a726e
   justify-content: left
   gap: 1.25rem
   align-items: center
-  // background-color: $background
   padding: 1.25rem
-  // border-radius: 8px
 
-.searchbox-container
-  flex-grow: 1
-
-  @media screen and (max-width: view.$tablet)
-    display: none
-
-.menuButton
-  background: none
-  border: none
-  color: $text
-  cursor: pointer
-  font-size: 1rem
-
-.menu
-  display: flex
-  list-style-type: none
-  margin: 0
-  padding: 0
-
-  & li a
-    color: $text
-    text-decoration: none
-    padding: 0.5rem 1rem
-
-  &.open
-    display: flex
-
-.icon
+  &__icon
     padding: 0.55rem 0.75rem
     border-radius: 50%
     margin: -0.75rem
@@ -49,6 +20,12 @@ $coffeeColor: #1a726e
     &:hover
       background-color: #425b76
 
+.searchbox-container
+  flex-grow: 1
+
+  @media screen and (max-width: view.$tablet)
+    display: none
+
 .buymeacoffee-icon
   display: none