Top nav menu with tailwindcss

3 files changed, 159 insertions, 27 deletions

diff --git a/assets/css/input.css b/assets/css/input.css
index 6243110..229247d 100644
--- a/assets/css/input.css
+++ b/assets/css/input.css
@@ -45,6 +45,62 @@ blockquote::before {
 }
 
 @layer components {
+  .menu {
+    transition: max-height 0.2s ease-out;
+    overflow: hidden;
+    display: flex;
+    /* this parts must be overridden on non small  */
+    flex-direction: column;
+    width: 100%;
+    position: fixed;
+    max-height: 0px;
+  }
+  .menu-btn:checked ~ .menu {
+    max-height: 240px;
+    z-index: 2;
+  }
+  /* What comes next is only to style the ham menu to an X when clicking */
+  .menu-icon {
+    .navicon {
+      display: block;
+      height: 2px;
+      position: relative;
+      transition: background 0.2s ease-out;
+      width: 18px;
+    }
+    .navicon:before,
+    .navicon:after {
+      background: #ebdbb2;
+      content: "";
+      display: block;
+      height: 100%;
+      position: absolute;
+      transition: all 0.2s ease-out;
+      width: 100%;
+    }
+    .navicon:before {
+      top: 6px;
+    }
+    .navicon:after {
+      top: -6px;
+    }
+  }
+  .menu-btn:checked {
+    ~ .menu-icon .navicon {
+      background: 0 0;
+    }
+    ~ .menu-icon .navicon:before {
+      transform: rotate(-45deg);
+    }
+    ~ .menu-icon .navicon:after {
+      transform: rotate(45deg);
+    }
+    ~ .menu-icon:not(.steps) .navicon:before,
+    ~ .menu-icon:not(.steps) .navicon:after {
+      top: 0;
+    }
+  }
+
   #hero {
     text-shadow: 2px 2px 3px black;
   }
diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index ea36784..3b17675 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -655,6 +655,66 @@ h6 {
   }
 }
 
+.menu {
+  transition: max-height 0.2s ease-out;
+  overflow: hidden;
+  display: flex;
+  /* this parts must be overridden on non small  */
+  flex-direction: column;
+  width: 100%;
+  position: fixed;
+  max-height: 0px;
+}
+
+.menu-btn:checked ~ .menu {
+  max-height: 240px;
+  z-index: 2;
+}
+
+/* What comes next is only to style the ham menu to an X when clicking */
+
+.menu-icon {
+  .navicon {
+    display: block;
+    height: 2px;
+    position: relative;
+    transition: background 0.2s ease-out;
+    width: 18px;
+  }
+  .navicon:before,
+    .navicon:after {
+    background: #ebdbb2;
+    content: "";
+    display: block;
+    height: 100%;
+    position: absolute;
+    transition: all 0.2s ease-out;
+    width: 100%;
+  }
+  .navicon:before {
+    top: 6px;
+  }
+  .navicon:after {
+    top: -6px;
+  }
+}
+
+.menu-btn:checked {
+  ~ .menu-icon .navicon {
+    background: 0 0;
+  }
+  ~ .menu-icon .navicon:before {
+    transform: rotate(-45deg);
+  }
+  ~ .menu-icon .navicon:after {
+    transform: rotate(45deg);
+  }
+  ~ .menu-icon:not(.steps) .navicon:before,
+    ~ .menu-icon:not(.steps) .navicon:after {
+    top: 0;
+  }
+}
+
 #hero {
   text-shadow: 2px 2px 3px black;
 }
@@ -925,6 +985,10 @@ h6 {
   top: 0px;
 }
 
+.top-12 {
+  top: 3rem;
+}
+
 .float-right {
   float: right;
 }
@@ -1546,6 +1610,10 @@ blockquote::before {
 }
 
 @media (min-width: 768px) {
+  .md\:static {
+    position: static;
+  }
+
   .md\:float-left {
     float: left;
   }
@@ -1562,6 +1630,15 @@ blockquote::before {
     display: none;
   }
 
+  .md\:max-h-none {
+    max-height: none;
+  }
+
+  .md\:w-fit {
+    width: -moz-fit-content;
+    width: fit-content;
+  }
+
   .md\:shrink-0 {
     flex-shrink: 0;
   }
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 394f274..8394764 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,6 +1,6 @@
-<nav class="header w-full bg-lime-700 cf ">
-  <div class="max-w-screen-md mx-auto pl-2 text-white">
-    <a href="{{ site.BaseURL | relLangURL }}" class="block float-left">
+<nav class="bg-lime-700">
+  <div class="max-w-screen-md mx-auto text-white flex justify-between">
+    <a href="{{ site.BaseURL | relLangURL }}" class="">
       {{ with resources.Get .Site.Params.logo }}
         <img
           height="{{ site.Params.logo_height }}"
@@ -9,42 +9,41 @@
           alt="{{ site.Title }}"
         />
       {{ end }}
-
-
       <span class="pl-2 text-4xl leading-normal berkshire-swash">
         {{ .Site.Title }}
       </span>
     </a>
     <input class="menu-btn hidden" type="checkbox" id="menu-btn" />
-    <label class="float-right md:hidden m-2 p-4 menu-icon" for="menu-btn">
+    <label class="menu-icon m-2 p-4 md:hidden" for="menu-btn">
       <span class="navicon bg-white"></span>
     </label>
-    <ul class="m-0 p-0 overflow-hidden font-sans leading-none">
+    <div
+      class="menu bg-lime-700 md:w-fit md:flex-row md:max-h-none md:static top-12"
+    >
       {{ range .Site.Menus.main }}
-        <li class="md:float-left hover:bg-lime-500">
-          <a class="block p-4" href="{{ .PageRef | relLangURL }}">
-            {{ .Pre }}
-            {{- T .Name | title -}}
-          </a>
-        </li>
+        <a class="hover:bg-lime-500 p-4" href="{{ .PageRef | relLangURL }}">
+          {{ .Pre }}
+          {{- T .Name | title -}}
+        </a>
       {{ end }}
+    </div>
 
-      {{ if .IsTranslated }}
-        <select
-          name="lang"
-          class="my-2 py-1 tc ba b--black-20 br2 w3-theme-d3 mw3 "
-          onchange="self.location=options[selectedIndex].value"
-        >
+    {{ if .IsTranslated }}
+      <select
+        name="lang"
+        class="my-2 py-1 tc ba b--black-20 br2 w3-theme-d3 mw3 "
+        onchange="self.location=options[selectedIndex].value"
+      >
+        <option value="{{ .Permalink }}">
+          {{ .Language.Lang }}
+        </option>
+        {{ range .Translations }}
           <option value="{{ .Permalink }}">
             {{ .Language.Lang }}
           </option>
-          {{ range .Translations }}
-            <option value="{{ .Permalink }}">
-              {{ .Language.Lang }}
-            </option>
-          {{ end }}
-        </select>
-      {{ end }}
-    </ul>
+        {{ end }}
+      </select>
+    {{ end }}
+
   </div>
 </nav>