ui: Passable mobile menu, but desktop broken

ui/src/navbar.css

@@ -1,17 +1,94 @@
 /** NAV BAR */
 
-@media screen and (min-width: 768px) {
-  .navbar,
+:root {
+  --navbar-color: #9d9d9d;
+}
+
+.navbar {
+  background-color: #222;
+  background-image: linear-gradient(to bottom, #3c3c3c 0, #222 100%);
+  text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
+}
+
+.main-nav {
+  display: none;
+  list-style: none;
+}
+
+.main-nav.active {
+  display: block;
+}
+
+.navbar-brand {
+  font-size: 18px;
+}
+
+.navbar-toggle {
+  color: var(--navbar-color);
+  font-size: 24px;
+  position: absolute;
+  top: 10px;
+  right: 20px;
+}
+
+.navbar a,
+.navbar-dropdown span {
+  color: var(--navbar-color);
+  display: block;
+  padding: 15px;
+  text-decoration: none;
+}
+
+.navbar li {
+  color: var(--navbar-color);
+}
+
+li.navbar-active .navbar-active-bg {
+  background-color: #080808;
+}
+
+li.navbar-active a,
+li.navbar-active span,
+.navbar a:hover {
+  color: #ffffff;
+}
+
+.navbar-dropdown-content {
+}
+
+.navbar-dropdown-content a {
+  background: transparent !important;
+  color: var(--navbar-color) !important;
+  display: block;
+}
+
+.navbar-mailbox {
+  padding: 15px;
+}
+
+.navbar-mailbox input {
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  padding: 5px 10px;
+  width: 250px;
+}
+
+@media screen and (min-width: 1000px) {
+  .main-nav,
   .navbar-bg {
     height: 50px;
   }
 
   .navbar {
+    align-items: center;
     display: flex;
+  }
+
+  .main-nav {
+    display: flex;
+    flex-grow: 2;
     line-height: 20px;
-    list-style: none;
     padding: 0;
-    text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
   }
 
   .navbar-bg {
@@ -23,30 +100,7 @@
     z-index: -1;
   }
 
-  .navbar li {
-    color: #9d9d9d;
-  }
-
-  .navbar a,
-  .navbar-dropdown span {
-    color: #9d9d9d;
-    display: inline-block;
-    padding: 15px;
-    text-decoration: none;
-  }
-
-  li.navbar-active {
-    background-color: #080808;
-  }
-
-  li.navbar-active a,
-  li.navbar-active span,
-  .navbar a:hover {
-    color: #ffffff;
-  }
-
   .navbar-brand {
-    font-size: 18px;
     margin-left: -15px;
   }
 
@@ -54,16 +108,8 @@
     margin: 0 auto;
   }
 
-  .navbar-mailbox {
-    padding: 8px 0 !important;
-  }
-
   .navbar-mailbox input {
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-    padding: 5px 10px;
     margin-top: 1px;
-    width: 250px;
   }
 
   .navbar-dropdown-content {