<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="/" class="home-link">
            <img class="logo" src="{{ .Site.Params.Logo }}" alt="{{ .Site.Title }}">
        </a>
        
        <nav class="menu">
            <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="/about/">about</a></li>
                <li><a href="/calendar/">calendar</a></li>
                <li><a href="/tv/">tv</a></li>
                <li><a href="/social/">social</a></li>
                <li><a href="/pen/">pen</a></li>
                <li><a href="/shouts/">shouts</a></li>
            </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="/about/">about</a></li>
                <li><a href="/calendar/">calendar</a></li>
                <li><a href="/tv/">tv</a></li>
                <li><a href="/social/">social</a></li>
                <li><a href="/pen/">pen</a></li>
                <li><a href="/shouts/">shouts</a></li>
            </ul>
        </aside>
        
        <div>
            <div class="search">
                <img src="{{ .Site.Params.baseURL }}/img/search.svg" alt="search">
                <input type="search" name="" id="">
            </div>
            <a href="https://members.lumbung.space" id="login">login</a>
        </div>
    </header>