navbar part1

assets/js/menu.js

@@ -0,0 +1,76 @@
+;(() => {
+  const arrowWrappers = document.getElementsByClassName("a-wrapper")
+  const titles = document.getElementsByClassName("title")
+
+  let index = 0
+  for (const el of arrowWrappers) {
+    const folders = document.getElementsByClassName("folder")
+    const folder = folders[index]
+
+    el.addEventListener("click", () => {
+      const arrow = el.getElementsByClassName("arrow")[0]
+      arrow.classList.toggle("down")
+      folder.classList.toggle("active")
+    })
+    index++
+  }
+
+  const singlePage = document.getElementsByClassName("singlePage")[0]
+  const body = document.getElementsByTagName("body")[0]
+  const blurElement = document.getElementsByClassName("blur-element")[0]
+  const aside = document.getElementsByClassName("main-aside")[0]
+  const nav_button = document.getElementsByClassName("nav-btn")[0]
+
+  index = 0
+  for (const el of titles) {
+    const folders = document.getElementsByClassName("folder")
+    const folder = folders[index]
+
+    const arrow = document.getElementsByClassName("arrow")[index]
+    el.addEventListener("click", () => {
+      arrow.classList.add("down")
+      folder.classList.add("active")
+      body.classList.remove("fixed-position")
+      blurElement.classList.remove("enabled")
+      aside.classList.add("disabled")
+      // nav_button.classList.add("disabled")
+      singlePage.classList.remove("blur")
+    })
+    index++
+  }
+
+  blurElement.addEventListener("click", () => {
+    blurElement.classList.remove("enabled")
+    aside.classList.add("disabled")
+    // nav_button.classList.add("disabled")
+    body.classList.remove("fixed-position")
+    singlePage.classList.remove("blur")
+  })
+
+  const pagesLink = document.getElementsByClassName("page-link")
+  for (const el of pagesLink) {
+    el.addEventListener("click", () => {
+      aside.classList.add("disabled")
+      // nav_button.classList.add("disabled")
+      body.classList.remove("fixed-position")
+      blurElement.classList.remove("enabled")
+      singlePage.classList.remove("blur")
+    })
+  }
+
+  nav_button.addEventListener("click", () => {
+    singlePage.classList.toggle("blur")
+    body.classList.toggle("fixed-position")
+    aside.classList.toggle("disabled")
+    blurElement.classList.toggle("enabled")
+    // nav_button.classList.toggle("disabled")
+  })
+
+  document.getElementsByClassName("close-nav-mobile")[0].addEventListener("click", () => {
+    aside.classList.add("disabled")
+    // nav_button.classList.add("disabled")
+    body.classList.remove("fixed-position")
+    blurElement.classList.remove("enabled")
+    singlePage.classList.remove("blur")
+  })
+})()

assets/styles/base.scss

@@ -6,6 +6,8 @@
   --font-mono: "Fira Code"
 }
 
+
+
 // typography
 html {
   scroll-behavior: smooth;
@@ -20,8 +22,9 @@ html {
   }
 }
 
+
 .singlePage {
-  padding: 4em 30vw;
+  padding: 1em 20vw;
   @media all and (max-width: 1200px) {
     padding: 25px 5vw;
   }
@@ -180,7 +183,7 @@ blockquote {
 
 article {
   & > h1 {
-    margin-top: 2em;
+    margin-top: 1.5em;
     font-size: 2em;
   }
   
@@ -619,3 +622,5 @@ header {
   }
 }
 
+
+

assets/styles/custom.scss

@@ -1,5 +1,3 @@
-// Add your own CSS here!
-
 :root {
   --light: #faf8f8;
   --dark: #141021;
@@ -11,6 +9,13 @@
   --lightgray: #f0f0f0;
   --outlinegray: #dadada;
   --million-progress-bar-color: var(--secondary);
+  // my
+  --lightAlt: #f5f6f8 !important;
+  --secondaryAlt: #e3e5e8 !important;
+  --cgray: #4e4e4e;
+  --lightRgba: 250,248,248;
+  --darkRgba: 20,16,33;
+  --shadowColor: 4px 4px 4px rgba(var(--darkRgba), 0.35);
 }
 
 [saved-theme="dark"] {
@@ -23,7 +28,214 @@
   --gray: #d4d4d4 !important;
   --lightgray: #292633 !important;
   --outlinegray: #343434 !important;
+  // my
+  --lightAlt: #1a1a1a !important;
+  --secondaryAlt: #000000 !important;
+  --cgray: #6e6e6e !important;
+  --lightRgba: 30,30,33 !important;
+  --darkRgba: 251,255,245 !important;
+  --shadowColor: 1px 2px 2px rgba(var(--darkRgba), 0.35);
+}
+
+::-webkit-scrollbar{
+  width: 8px;
+  background: #fff5f3;
+}
+::-webkit-scrollbar-track{
+  box-shadow: inset 0 0 2px rgba(5, 41, 70, .3);
+}
+::-webkit-scrollbar-thumb{
+  background-color: #888;
+  border-radius: 2px;
+}
+
+aside::-webkit-scrollbar{
+  width: 2px;
+  background: #fff5f3;
+}
+
+.main-container{
+  width: 100%;
+  margin: 0 auto;
 }
 
 
+@media all and (max-width: 1200px) {
+  .fixed-position{
+    position: fixed;
+  }
+  
+  .blur-element{
+    z-index: 4;
+    &.enabled{
+      position: absolute;
+      height: 100%;
+      width: 100%;
+    }
+  }
+  .blur{
+    transition: all 0.2s linear;
+    filter: blur(1.5px);
+  }
+}
+
+.main-aside{
+  width: 16%;
+  padding-right: 1%;
+  padding-bottom: 1em;
+  height: 100vh;
+  position: fixed;
+  overflow-y:auto;
+  overflow-x: hidden;
+  color: var(--dark);
+  background-color: var(--lightAlt);
+  transition: all 0.2s linear;
+  border-right: 1px solid var(--secondaryAlt);
+  left: 0;
+  
+  ul{
+    list-style: none;
+    padding-left: 5%;
+  }
+  .close-nav-mobile{
+    display: none;
+  }
+  
+  @media all and (max-width: 1200px) {
+    min-width: 250px;
+    z-index: 7;
+    width: max-content;
+    max-width: 35%;
+    padding-top: 0;
+    height: 100vh;
+    border-right:0px;
+    &.disabled{
+      left:-60%
+    }
+    -webkit-box-shadow: var(--shadowColor);
+    box-shadow: var(--shadowColor);
+  }
+
+  @media all and (max-width: 450px) {
+    width: 100%;
+    max-width: 100%;
+    box-shadow: 0px 0px 0px;
+    &.disabled{
+      left:-102%
+    }
+    .close-nav-mobile{
+      display: block;
+      &:after {
+        color: var(--dark);
+        position: absolute;
+        top: 2%;
+        right: 5%;
+        font-size: 1.75em; 
+        content: '\d7';
+        line-height: normal;
+        text-align: center;
+      }
+    &:hover{
+      cursor: pointer;
+    }
+  } 
+  }
+}
+
+.search-wrapper{ 
+   display: flex;
+}
+
+@media all and (max-width: 1200px) {
+  .main-header{
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+    .spacer{
+      flex: none;
+    }
+    .nav-wrapper{
+      flex-grow: 1;
+      flex-basis: 0%;
+      filter: blur(0);
+      z-index: 6;
+      .nav-btn{
+        z-index: 6;
+        position: relative;
+        margin: auto 0;
+        width: 1.3rem;
+        & > div{
+          width: 100%;
+          height: 2px;
+          margin: 5px 0;
+          background-color: var(--dark );
+          transition: all 0.1s linear;
+        }
+        &:hover{
+          cursor: pointer;
+        }
+      }
+    }
+    #page-title{
+      flex-basis: 0%;
+      flex-grow: 1;
+    }
+
+    .search-wrapper{
+      padding: 3px;
+      .search-icon{
+        padding: 2px;
+      }
+      p{
+        display: none !important;
+      }
+    }
+  }
+}
+
+
+.folder{
+    .page-link{
+      margin: 1px 0;
+    }
+    .wrapper{
+      display: flex;
+    }
+    .title{
+      display: block;
+    }
+    .a-wrapper{
+      padding-right: 10px;
+      &:hover{
+        cursor: pointer;
+      }
+      .arrow{
+        content: "";
+        display: inline-block;
+        // arrow
+        margin-bottom: 3.5px;
+        border: solid var(--dark);
+        border-width: 0 0.13rem 0.13rem 0;
+        padding: 0.12rem;
+        // others
+        z-index: 10;
+        //default
+        -webkit-transform: rotate(-45deg);
+        transform: rotate(-45deg);
+      }
+      .down {
+        -webkit-transform: rotate(45deg) !important;
+        transform: rotate(45deg) !important;
+      }
+  }
+  &>ul{
+    padding-left: 5%;
+    display: none;
+  }
+} 
+
+.folder.active>ul{
+  display:block;
+}
+
 

content/subfolder/_index.md

@@ -0,0 +1,5 @@
+---
+title: Subfolder
+---
+
+Subfolder :D

content/subfolder/note.md

@@ -0,0 +1,5 @@
+---
+title: Note
+---
+
+My cool note :D

content/subfolder/sub-subfolder/_index.md

@@ -0,0 +1,5 @@
+---
+title: Sub-Subfolder
+---
+
+Subfolder :D

content/subfolder/sub-subfolder/note.md

@@ -0,0 +1,5 @@
+---
+title: Note
+---
+
+My cool note :D

layouts/index.html

@@ -1,20 +1,26 @@
 <!DOCTYPE html>
 <html lang="{{ .Lang }}">
 {{ partial "head.html" . }}
-
 <body>
 {{partial "search.html" .}}
-<div class="singlePage">
+<main class="main-container"><div class="blur-element"></div>
-    <!-- Begin actual content -->
+    <aside class="main-aside disabled">
+        {{ partial "menu" . }}
+    </aside>
+    <div class="singlePage">
     {{partial "header.html" .}}
-    <article>
+      <article>
         {{partial "toc.html" .}}
         {{partial "textprocessing.html" . }}
         {{if $.Site.Data.config.enableRecentNotes}}
-          {{partial "recent.html" . }}
+        {{partial "recent.html" . }}
         {{end}}
-    </article>
+      </article>
-    {{partial "footerIndex.html" .}}
+      {{partial "footerIndex.html" .}}
-</div>
+    </div>
-</body>
+  </main>
+  </body>
+{{ $js := resources.Get "js/menu.js" }}
+<script src="{{ $js.Permalink }}"></script>
+{{/*  <script type="text/javascript" src="https://unpkg.com/default-passive-events"></script>  */}}
 </html>

layouts/partials/header.html

@@ -1,11 +1,23 @@
-<header>
+<header class="main-header">
+    <div class="nav-wrapper">
+      <div class="nav-btn disabled">
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+    </div>
     {{ $config := cond (eq $.Site.Language.Lang "en") "config" (printf "config.%s" $.Site.Language.Lang) }}
     <h1 id="page-title"><a href="{{ "" | absLangURL }}">{{ ( index $.Site.Data $config ).page_title | default $.Site.Data.config.page_title }}</a></h1>
     <div class="spacer"></div>
-    <div id="search-icon">
+    <div class="search-wrapper">
-      <p>{{ i18n "search" }}</p>
+      <div id="search-icon">
-      <svg tabindex="0" aria-labelledby="title desc" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7"><title id="title">{{ i18n "search_icon" }}</title><desc id="desc">{{ i18n "icon_search" }}</desc><g class="search-path" fill="none"><path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4"/><circle cx="8" cy="8" r="7"/></g></svg>
+        <p>{{ i18n "search" }}</p>
+        <svg tabindex="0" aria-labelledby="title desc" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7"><title id="title">{{ i18n "search_icon" }}</title><desc id="desc">{{ i18n "icon_search" }}</desc><g class="search-path" fill="none"><path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4"/><circle cx="8" cy="8" r="7"/></g></svg>
+      </div>
+      {{partial "darkmode.html" .}}
     </div>
-    {{partial "darkmode.html" .}}
 </header>
 
+
+
+

layouts/partials/menu-content.html

@@ -0,0 +1,40 @@
+{{/*  inspired by https://github.com/alex-shpak/hugo-book/blob/master/layouts/partials/docs/menu-filetree.html  */}}
+{{ $section := default "/" .Site.Params.BookSection  }}
+{{ if eq $section "*" }}
+  {{ $section = "/" }} {{/* Backward compatibility */}}
+{{ end }}
+
+{{ with .Site.GetPage $section }}
+  {{ template "folder-children" (dict "Section" . "CurrentPage" $) }}
+{{ end }}
+
+{{ define "folder-children" }}{{/* (dict "Section" .Section "CurrentPage" .CurrentPage) */}}
+  <ul>
+    {{ range (where .Section.Pages "Params.hidden" "ne" true) }}
+      {{ if .IsSection }}
+        <li class="folder">
+          <div class="wrapper">
+            <div class="a-wrapper">
+              <div class="arrow"></div>
+            </div>
+            <a href="{{ .Page.RelPermalink }}" class="title">
+              {{- partial "title" .Page -}}
+            </a>
+          </div>
+          {{ template "folder-children" (dict "Section" . "CurrentPage" $.CurrentPage) }}
+        </li>
+      {{ else if and .IsPage }}
+        <li>
+          {{ template "children-link" (dict "Page" . "CurrentPage" $.CurrentPage) }}
+        </li>
+      {{ end }}
+    {{ end }}
+  </ul>
+{{ end }}
+
+{{ define "children-link" }}{{/* (dict "Page" .Page "CurrentPage" .CurrentPage) */}}
+  {{ $current := eq .CurrentPage .Page }}
+    <a href="{{ .Page.RelPermalink }}" class="page-link">
+      {{- partial "title" .Page -}}
+    </a>
+{{ end }}

layouts/partials/menu.html

@@ -0,0 +1,4 @@
+<nav>
+<div class="close-nav-mobile"></div>
+{{ partial "menu-content" . }}
+</nav>

layouts/partials/title.html

@@ -0,0 +1,11 @@
+{{ $title := "" }}
+
+{{ if .Title }}
+  {{ $title = .Title }}
+{{ else if and .IsSection .File }}
+  {{ $title = path.Base .File.Dir | humanize | title }}
+{{ else if and .IsPage .File }}
+  {{ $title = .File.BaseFileName | humanize | title }}
+{{ end }}
+
+{{ return $title }}