create mobile menu

themes/lumbung-theme/static/css/main.css

@@ -167,6 +167,11 @@ body {
   display: flex;
 }
 
+#top-menu div.mobile-menu,
+.drawer {
+  display: none;
+}
+
 #top-menu .search {
   display: flex;
   justify-content: flex-end;
@@ -729,6 +734,61 @@ footer a:hover {
     display: none;
   }
 
+  /* menu styles */
+  #top-menu div.mobile-menu {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .mobile-menu #login {
+    display: inline-flex;
+  }
+  
+  .hamburger {
+    border: none;
+    background: none;
+    position: relative;
+    z-index: 3;
+  }
+
+  .drawer {
+    display: block;
+    position: fixed;
+    background: white;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 0;
+    z-index: 2;
+    transition: 0.2s all ease-in-out;
+    padding-top: 120px; }
+    .drawer * {
+      display: none;
+      opacity: 0; }
+    #top-menu .drawer ul {
+      display: flex;
+      flex-direction: column;
+      gap: 14px;
+      width: 100%; 
+      margin: 0;
+      padding: 0;
+    }
+      .drawer ul li {
+        padding: 1em 0;
+        border-bottom: 1px solid #333; }
+        .drawer ul li a {
+          color: white;
+          text-decoration: none;
+          text-transform: lowercase;
+          margin-left: 1em; }
+    .drawer.opened {
+      width: 80%; }
+      .drawer.opened * {
+        display: block;
+        opacity: 1; }
+  
+
+  /* card styles */
   .h-entry img {
     max-width: 100%;
     width: 100%;