create mobile menu

This commit is contained in:
Aadil Ayub 2022-01-13 16:04:33 +05:00
parent 66afbb9bde
commit 2a44f64777
2 changed files with 118 additions and 1 deletions

View File

@ -1,7 +1,21 @@
<header id="top-menu"> <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"> <a href="{{ .Site.Params.baseURL }}" class="home-link">
<img class="logo" src="{{ .Site.Params.Logo }}" alt="{{ .Site.Title }}"> <img class="logo" src="{{ .Site.Params.Logo }}" alt="{{ .Site.Title }}">
</a> </a>
<nav class="menu"> <nav class="menu">
<ul> <ul>
{{/* {{ $currentPage := . }} {{/* {{ $currentPage := . }}
@ -37,7 +51,6 @@
<li><a href="/hash/">socials</a></li> <li><a href="/hash/">socials</a></li>
<li><a href="/feed/">feeds</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/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/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/507566f6-6b7e-402e-bfd4-034feebdcba6">Glossary</a></li>
@ -45,6 +58,50 @@
</ul> </ul>
</nav> </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>
<div class="search"> <div class="search">
<img src="{{ .Site.Params.baseURL }}/img/search.svg" alt="search"> <img src="{{ .Site.Params.baseURL }}/img/search.svg" alt="search">

View File

@ -167,6 +167,11 @@ body {
display: flex; display: flex;
} }
#top-menu div.mobile-menu,
.drawer {
display: none;
}
#top-menu .search { #top-menu .search {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
@ -729,6 +734,61 @@ footer a:hover {
display: none; 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 { .h-entry img {
max-width: 100%; max-width: 100%;
width: 100%; width: 100%;