complete nav

assets/built/styles.css

@@ -718,6 +718,56 @@ footer {
   padding-right: 1rem;
 }
 
+.nav {
+  display: none;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+          flex-direction: column;
+  width: 100%;
+  display: block;
+  margin-top: 0.5rem;
+  display: none;
+}
+
+.nav li {
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+          flex-direction: row;
+  height: 3rem;
+  -webkit-box-align: center;
+          align-items: center;
+  -webkit-box-pack: start;
+          justify-content: flex-start;
+  border-color: #fff;
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  color: #fff;
+  font-size: 0.875rem;
+}
+
+@media (min-width: 768px) {
+  .nav {
+    display: block;
+    width: auto;
+  }
+
+  .nav-li {
+    -webkit-box-pack: center;
+            justify-content: center;
+    border-style: none;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
+
 .container{
   width: 100%;
 }

assets/css/styles.css

@@ -59,6 +59,22 @@ footer {
   @apply py-4 px-4;
 }
 
+.nav {
+  @apply hidden flex flex-col w-full block mt-2;
+  display: none;
+}
+.nav li {
+  @apply flex flex-row h-12 items-center justify-start border-white border-t border-b my-0 py-2 text-white text-sm;
+  
+}
+@screen md {
+  .nav {
+    @apply block w-auto;
+  }
+  .nav-li {
+    @apply justify-center border-none my-0;
+  }
+}
 @tailwind components;
 
 @tailwind utilities;

default.hbs

@@ -30,15 +30,7 @@
       <div id="menushow" class="block md:hidden flex flex-column items-center px-2 py-2 cursor-pointer">
         <img src="{{asset "images/menu.svg"}}" class="h-8 text-white" style="filter: invert(1);" />
       </div>
-      <div id="menu" class="hidden md:block flex flex-col w-full md:w-auto" style="">
+      {{navigation}}
-        <div class="flex flex-row h-full items-center justify-begin md:justify-center border-white border-t border-b md:border-none my-2 py-2 md:my-0">
-          <div>
-            <a href="/" class="">
-              <p class="text-white text-lg md:text-base">Home</p>
-            </a>
-          </div>
-        </div>
-      </div>
     </header>
 
     {{{body}}}
@@ -74,7 +66,7 @@
     <script src="{{asset "built/yuika.js"}}"></script>
     <script>
       $("#menushow").click(function() {
-        var menu = $("#menu");
+        var menu = $(".nav");
         var menubtn = $("#menushow");
         if(menu.is(":hidden")) {
           menu.slideDown(250);