_sass/navigation.scss in simport-1.5.0 vs _sass/navigation.scss in simport-1.6.0

@@ -1,34 +1,58 @@
-nav {
-  height: 50px;
-  width: 100%;
-  position: fixed;
-  top: 0;
-  border-bottom: 1px solid lightgrey;
+#navbar {
+  border-top: 1px solid lightgrey;
+}
+
+#navbar-navigation {
+  grid-area: navigation;
+  display: grid;
+  height: 100%;
   background: white;
 }
 
 #logo {
+  grid-area: logo;
   height: 100%;
-  width: 25%;
+  display: none;
 }
 
-#navbar-navigation {
-  height: 100%;
-  width: 75%;
+@media only screen and (min-width: 600px) {
+  #navbar {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas: "logo navigation";
+    border-bottom: 1px solid lightgrey;
+    border-top: 0px;
+  }
+
+  #navbar-navigation {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  #logo {
+    display: flex;
+  }
+
+  .nav-button {
+    min-width: 88px;
+  }
 }
 
-nav a {
+#navbar-navigation a {
   text-decoration: none;
   color: #505050;
 }
 
+.nav-item {
+  grid-row: 1;
+}
+
 .nav-button {
   height: 100%;
+  width: 100%;
   color: rgba(0, 0, 0, 0.87);
-  padding: 8px 16px;
   font-size: 0.875rem;
-  min-width: 88px;
   transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   font-weight: 500;
   font-family: "Roboto", "Helvetica", "Arial", sans-serif;
   border: 0;
   cursor: pointer;