From 2a44f64777b2d898baef621ff95e5efbdfd58dd7 Mon Sep 17 00:00:00 2001
From: Aadil Ayub <aadilayub@protonmail.com>
Date: Thu, 13 Jan 2022 16:04:33 +0500
Subject: [PATCH] create mobile menu

---
 .../layouts/partials/header.html              | 59 +++++++++++++++++-
 themes/lumbung-theme/static/css/main.css      | 60 +++++++++++++++++++
 2 files changed, 118 insertions(+), 1 deletion(-)

diff --git a/themes/lumbung-theme/layouts/partials/header.html b/themes/lumbung-theme/layouts/partials/header.html
index 9bca9c6..9bbdf77 100644
--- a/themes/lumbung-theme/layouts/partials/header.html
+++ b/themes/lumbung-theme/layouts/partials/header.html
@@ -1,7 +1,21 @@
     <header id="top-menu">
+        <div class="mobile-menu">
+            <button class="hamburger" onclick="this.classList.toggle('opened'); document.querySelector('.drawer').classList.toggle('opened');">
+                <svg width="30" fill="#3C3D3D" viewBox="0 0 50 40">
+                  <g>
+                    <path class="top" d="M0 8h50v3H0z"/>
+                    <path class="bottom" d="M0 28h50v3H0z"/>
+                    <path class="middle" d="M0 18h50v3H0z"/>
+                  </g>
+                </svg>
+            </button>
+            <a href="https://members.lumbung.space" id="login">login</a>
+        </div>
+
         <a href="{{ .Site.Params.baseURL }}" class="home-link">
             <img class="logo" src="{{ .Site.Params.Logo }}" alt="{{ .Site.Title }}">
         </a>
+        
         <nav class="menu">
             <ul>
                 {{/*  {{ $currentPage := . }}
@@ -37,7 +51,6 @@
                 <li><a href="/hash/">socials</a></li>
                 <li><a href="/feed/">feeds</a></li>
 
-
                 <li><a href="https://panduan.lumbung.space/share/272026ff-57fd-4894-8d68-58606c77044c/doc/frequently-asked-questions-faq-pl8OTF58Od">FAQ</a></li>
                 <li><a href="https://panduan.lumbung.space/share/ece8e392-7b21-4379-bd82-a11e06ebf1fb">Community Guidelines</a></li>
                 <li><a href="https://panduan.lumbung.space/share/507566f6-6b7e-402e-bfd4-034feebdcba6">Glossary</a></li>
@@ -45,6 +58,50 @@
 
             </ul>
         </nav>
+
+        <aside class="drawer">
+            <ul>
+                {{/*  {{ $currentPage := . }}
+                {{ range .Site.Menus.main }}
+                    {{ if .HasChildren }}
+                        <details class="menu-dropdown">
+                            <summary class="menu-nav-item {{ if $currentPage.HasMenuCurrent "main" . }}active{{ end }}">
+                                <a href="#">
+                                    {{ .Pre }}
+                                    <span>{{ .Name }}</span>
+                                </a>
+                            </summary>
+                            <ul class="sub-menu">
+                                {{ range .Children }}
+                                <li class="{{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}">
+                                    <a href="{{ .URL }}">{{ .Name }}</a>
+                                </li>
+                                {{ end }}
+                            </ul>
+                        </details>
+                    {{ else }}
+                        <li class="menu-nav-item">
+                            <a href="{{ .URL }}">
+                                {{ .Pre }}
+                                <span>{{ .Name }}</span>
+                            </a>
+                        </li>
+                    {{ end }}
+                {{ end }}  */}}
+                <li><a href="/">home</a></li>
+                <li><a href="/calendar/">calendar</a></li>
+                <li><a href="/video/">tv</a></li>
+                <li><a href="/hash/">socials</a></li>
+                <li><a href="/feed/">feeds</a></li>
+
+                <li><a href="https://panduan.lumbung.space/share/272026ff-57fd-4894-8d68-58606c77044c/doc/frequently-asked-questions-faq-pl8OTF58Od">FAQ</a></li>
+                <li><a href="https://panduan.lumbung.space/share/ece8e392-7b21-4379-bd82-a11e06ebf1fb">Community Guidelines</a></li>
+                <li><a href="https://panduan.lumbung.space/share/507566f6-6b7e-402e-bfd4-034feebdcba6">Glossary</a></li>
+                <li><a href="https://panduan.lumbung.space/share/ef6f6638-856d-4c9a-ab89-d82af567aba4">Terms of Use</a></li>
+
+            </ul>
+        </aside>
+        
         <div>
             <div class="search">
                 <img src="{{ .Site.Params.baseURL }}/img/search.svg" alt="search">
diff --git a/themes/lumbung-theme/static/css/main.css b/themes/lumbung-theme/static/css/main.css
index f182943..513957c 100644
--- a/themes/lumbung-theme/static/css/main.css
+++ b/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%;