Top nav menu with tailwindcss

1 files changed, 56 insertions, 0 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;
   }