dairy | new theme

themes/diary/layouts/partials/mobile-header.html

@@ -0,0 +1,72 @@
+<div class="single-column-drawer-container" ref="drawer"
+     v-bind:class="{ 'single-column-drawer-container-active': isDrawerOpen }">
+    <div class="drawer-content">
+        <div class="drawer-menu">
+            {{ if and (isset .Site.Params "googlesearchcode") (.IsHome) }}
+            <script async src="https://cse.google.com/cse.js?cx={{.Site.Params.googleSearchCode}}"></script>
+            <div class="gcse-searchbox-only" mobileLayout="true"></div>
+            {{ end }}
+            {{ $current := .Permalink | absLangURL }}
+            {{ range .Site.Menus.main }}
+                {{$actived := "false"}}
+                <!-- A problem caused by slash: if you use "eq" directly, you will get a result of "/tags/" and "/tags" -->
+                {{if hasPrefix  $current (.URL|absLangURL)}}
+                    {{$actived = "active"}}
+                {{end}}
+                {{ if .HasChildren }}
+                <parent name="{{ .Name }}" type="drawer-menu-item {{$actived}}">
+                    {{ range .Children }}
+                        <li><a href="{{ .URL }}"> {{ .Name }}</a></li>
+                    {{ end }}
+                </parent>
+                {{ else }}
+                <!--<a class="a-block nav-link-item {{$actived}}" href="{{ .URL }}">-->
+                <a class="a-block drawer-menu-item {{ $actived }}" href="{{ .URL }}">
+                    {{ .Name }}
+                </a>
+                {{ end }}
+            {{ end }}
+            {{ if and (not (.Site.Params.disableToC) ) (.IsPage) }}
+            <div class="toc">
+                {{- partial "toc.html" . -}}
+            </div>
+            {{ end }}
+        </div>
+    </div>
+</div>
+<transition name="fade">
+    <div v-bind:class="{ 'single-column-drawer-mask': mounted }" v-if="isDrawerOpen" v-on:click="toggleDrawer"></div>
+</transition>
+<nav ref="navBar" class="navbar sticky-top navbar-light single-column-nav-container">
+    <div ref="navBackground" class="nav-background"></div>
+    <div class="container container-narrow nav-content">
+        <button id="nav_dropdown_btn" class="nav-dropdown-toggle" type="button" v-on:click="toggleDrawer">
+            <i class="material-icons">
+                menu
+            </i>
+        </button>
+        <a ref="navTitle" class="navbar-brand" href="{{.Site.BaseURL}}">
+            {{.Site.Title}}
+        </a>
+        {{ if not .Site.Params.disableDarkMode }}
+        <button type="button" class="nav-darkmode-toggle" v-on:click="toggleDarkMode">
+            <i class="material-icons" v-if="isDarkMode">
+                brightness_4
+            </i>
+            <i class="material-icons" v-else="isDarkMode">
+                brightness_7
+            </i>
+        </button>
+        {{ end }}
+    </div>
+</nav>
+<div class="single-column-header-container" ref="pageHead"
+     v-bind:style="{ transform: 'translateZ(0px) translateY('+.3*scrollY+'px)', opacity: 1-navOpacity }">
+    <a href="{{.Site.BaseURL}}">
+        <div class="single-column-header-title">{{.Site.Title}}</div>
+        {{ with .Site.Params.subtitle }}
+        <div class="single-column-header-subtitle">{{.}}</div>
+        {{ end }}
+
+    </a>
+</div>