Use unified navbar for all pages

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

assets/scripts/application.js

@@ -1,8 +1,11 @@
 import 'popper.js'
 import 'bootstrap'
 import '@fortawesome/fontawesome-free/js/all'
+import feather from 'feather-icons'
 
 import './core'
 import './features'
 import './sections'
 import './pages'
+
+feather.replace();

assets/scripts/sections/navbar.js

@@ -4,8 +4,8 @@ const updateNavBar = () => {
   const themeIcon = document.getElementById('navbar-theme-icon-svg')
 
   if (window.scrollY > 40) {
-    topNavbar?.classList.remove('initial-navbar')
+    topNavbar?.classList.remove('transparent-navbar')
-    topNavbar?.classList.add('final-navbar', 'shadow')
+    topNavbar?.classList.add('shadow')
 
     navbarToggler?.classList.remove('navbar-dark')
     navbarToggler?.classList.add('navbar-light')
@@ -20,8 +20,8 @@ const updateNavBar = () => {
       document.getElementById('logo')?.setAttribute('src', logoURL)
     }
   } else {
-    topNavbar?.classList.remove('final-navbar', 'shadow')
+    topNavbar?.classList.remove('shadow')
-    topNavbar?.classList.add('initial-navbar')
+    topNavbar?.classList.add('transparent-navbar')
 
     navbarToggler?.classList.remove('navbar-light')
     navbarToggler?.classList.add('navbar-dark')
@@ -43,18 +43,20 @@ document.addEventListener('DOMContentLoaded', function () {
   // ==================================================
   // When the user scrolls down 80px from the top of the document,
   // resize the navbar's padding and the logo's font size
-  document.addEventListener('scroll', updateNavBar)
+  const topNavbar = document.getElementById('top-navbar')
+  if (topNavbar?.classList.contains('homepage')) {
+    document.addEventListener('scroll', updateNavBar)
+    updateNavBar()
+  }
 
   // Creates a click handler to collapse the navigation when
   // anchors in the mobile nav pop up are clicked
-  const navMain =document.getElementsByClassName('navbar-collapse')
+  const navMain = document.getElementsByClassName('navbar-collapse')
-  Array.from(navMain).forEach(function(el) {
+  Array.from(navMain).forEach(function (el) {
     el.addEventListener('click', function (e) {
       if (e.target.tagName === 'A') {
         el.classList.add('collapse')
       }
     })
   })
-
-  updateNavBar()
 })

assets/styles/layouts/404.scss

@@ -1,5 +1,5 @@
 body.kind-404 {
-  .navbar-toggler {
+  #sidebar-toggler {
     display: none;
   }
   

assets/styles/layouts/list.scss

@@ -110,10 +110,6 @@ body.kind-page {
       display: block;
     }
 
-    #toc-toggler {
-      visibility: hidden;
-    }
-
     .navbar-collapse.lang-selector {
       display: block !important;
       position: absolute;
@@ -164,7 +160,6 @@ body.kind-page {
       margin-top: 0.5rem;
       transition: all ease-out 0.3s;
     }
-
   }
   @include media('<medium') {
     .post-card {
@@ -173,17 +168,17 @@ body.kind-page {
       width: 98%;
     }
   }
-  @include media('>=medium','<large') {
+  @include media('>=medium', '<large') {
     .post-card {
       width: calc(100% / 2);
     }
   }
-  @include media('>=large','<very-large') {
+  @include media('>=large', '<very-large') {
     .post-card {
       width: calc(100% / 3);
     }
   }
-  @include media('>=very-large','<extra-large') {
+  @include media('>=very-large', '<extra-large') {
     .post-card {
       width: calc(100% / 4);
     }

assets/styles/layouts/notes.scss

@@ -16,63 +16,63 @@ body.type-notes {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
   }
-  
+
   .content {
     padding: 0;
     position: relative;
     padding-top: 2rem;
     min-height: 130vh;
   }
-  
+
-  .note-card-holder{
+  .note-card-holder {
     padding-top: 2rem;
     display: grid;
     grid-gap: 0.5rem;
-    grid-template-columns: repeat(auto-fill, minmax(30rem,1fr));
+    grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
     grid-auto-rows: 20px;
   }
-  
+
   /* .note-collection {
     display: flex;
     flex-wrap: wrap;
   } */
-  
+
   .note-card {
     align-self: flex-start;
   }
-  
+
-  .note-card .card{
+  .note-card .card {
     margin: 0.5rem;
   }
-  
+
-  .note-title{
+  .note-title {
     padding-left: 1rem;
     color: #248aaa;
   }
-  
+
-  .note-title span{
+  .note-title span {
     background: #e5e9f2;
     padding-right: 5px;
   }
-  
+
-  .note-title:before{
+  .note-title:before {
-    content:'';
+    content: '';
-    display:inline-block;
+    display: inline-block;
-    width:98%;
+    width: 98%;
-    height:100%;
+    height: 100%;
-    margin-bottom:-26px;
+    margin-bottom: -26px;
     border-bottom: 1px solid #248aaa;
   }
-  
+
-  .note-card .card-body{
+  .note-card .card-body {
     padding: 1rem;
   }
-  
+
   .note-card pre {
     margin: 0;
     border-radius: 3px;
   }
-  
+
   /* .small-note{
     max-width: 15rem;
   }
@@ -86,14 +86,13 @@ body.type-notes {
   }
   
   .huge-note{} */
-  
+
-  .note-badge{
+  .note-badge {
     font-size: 10pt;
   }
-  
+
-  
   /* ============= Device specific fixes ======= */
-  
+
   /* Large screens such as TV */
   @media only screen and (min-width: 1824px) {
     .content-section {
@@ -103,20 +102,18 @@ body.type-notes {
       max-width: 85%;
     }
   }
-  
+
-  
   /* Extra large devices (large desktops, 1200px and up) */
-  
+
   @media (max-width: 1400px) {
     .note-card-holder {
       margin-left: 0px;
     }
   }
-  
+
   @media (max-width: 1200px) {
-  
   }
-  
+
   /* IPad Pro */
   @media (max-width: 1024px) {
     .wrapper {
@@ -130,12 +127,12 @@ body.type-notes {
       padding-bottom: 0.5rem;
       transition: all ease-out 0.3s;
     }
-  
+
     .content-section.hide {
       max-width: 60%;
       transition: all ease-out 0.3s;
     }
-  
+
     .content {
       overflow: hidden;
     }
@@ -145,18 +142,14 @@ body.type-notes {
     .navbar-toggler {
       display: block;
     }
-  
+
-    #toc-toggler {
-      visibility: hidden;
-    }
-  
     .navbar-collapse.lang-selector {
       display: block !important;
       position: absolute;
       right: 0;
       top: 0.5rem;
     }
-  
+
     .note-card-holder {
       margin: 0;
       margin-top: 1.5rem;
@@ -165,37 +158,36 @@ body.type-notes {
       position: relative;
       transition: all ease-out 0.3s;
     }
-  
+
-    .content-section.hide .note-card-holder{
+    .content-section.hide .note-card-holder {
-      grid-template-columns: repeat(auto-fill, minmax(30rem,1fr));
+      grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
       transition: all ease-out 0.3s;
     }
   }
-  
+
   /*  Large devices (desktops, 992px and up) */
-  
+
   @media (max-width: 992px) {
     .note-card-holder .note-card {
       max-width: 100%;
       min-width: 50%;
       transition: all ease-out 0.3s;
     }
-  
+
     .content-section.hide .note-card-holder .note-card {
       max-width: 100%;
       min-width: 100%;
       transition: all ease-out 0.3s;
     }
   }
-  
+
   /* Medium devices (tablets, 768px and up) */
-  
+
   @media only screen and (max-width: 768px) {
-  
   }
-  
+
   /* Small devices (landscape phones, 576px and up) */
-  
+
   @media only screen and (max-width: 576px) {
     .wrapper {
       padding-left: 0px;
@@ -203,33 +195,35 @@ body.type-notes {
       flex-flow: column;
       overflow: hidden;
     }
-    .content-section, .content-section.hide {
+    .content-section,
+    .content-section.hide {
       flex: 100%;
       max-width: 100%;
       padding-left: 0;
       width: 100%;
       transition: all ease-out 0.3s;
     }
-  
+
     .content {
       width: 100%;
       padding-left: 0;
       padding-right: 0;
       transition: all ease-out 0.3s;
     }
-  
+
     .content-section.hide .content {
       margin-top: 0;
       padding-top: 0;
       transition: all ease-out 0.3s;
     }
-  
+
     .content-section.hide .note-card-holder {
       margin-top: 0.5rem;
       transition: all ease-out 0.3s;
     }
-  
+
-    .note-card-holder .note-card, .content-section.hide .note-card-holder .note-card {
+    .note-card-holder .note-card,
+    .content-section.hide .note-card-holder .note-card {
       margin-left: 1%;
       margin-right: 1%;
       max-width: 98%;
@@ -237,16 +231,16 @@ body.type-notes {
       transition: all ease-out 0.3s;
     }
   }
-  
+
   /* iPhoneX, iPhone 6,7,8 */
   @media only screen and (max-width: 375px) {
   }
-  
+
   /* Galaxy S5, Moto G4 */
   @media only screen and (max-width: 360px) {
   }
-  
+
   /* iPhone 5 or before */
   @media only screen and (max-width: 320px) {
-  }  
+  }
 }

assets/styles/navigators/navbar.scss

@@ -1,10 +1,4 @@
-@mixin initial-nav-item-hover-effect() {
+@mixin nav-item-hover-effect() {
-  color: #f9fafc;
-  transition: all 0.3s ease-out;
-  transform: translateY(-2px);
-}
-
-@mixin final-nav-item-hover-effect() {
   color: #2098d1 !important;
   transition: all 0.3s ease-out;
   border-bottom: 2px solid #2098d1 !important;
@@ -12,7 +6,53 @@
   background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(34, 136, 168, 0.1) 0%);
 }
 
-@mixin navbar-dropdown() {
+.top-navbar {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 50px;
+  z-index: 99999;
+  transition: all 0.4s ease-out;
+  margin: 0px;
+  padding-top: 0.4rem;
+  text-align: center;
+
+  background-color: #f9fafc;
+  color: #1c2d41;
+  transition: all 0.3s ease-out;
+
+  .navbar-brand {
+    color: #1c2d41;
+    font-weight: 600;
+  }
+
+  .sidebar-icon {
+    width: 32px;
+    height: 32px;
+    filter: invert(0.5);
+  }
+
+  li {
+    a {
+      color: #1c2d41;
+      font-weight: 500;
+      transition: all 0.3s ease-out;
+      border-bottom: 2px solid transparent;
+      &:hover {
+        @include nav-item-hover-effect();
+      }
+    }
+  }
+
+  .navbar-nav .active {
+    @include nav-item-hover-effect();
+  }
+
+  #top-navbar-divider {
+    background: rgba(0, 0, 0, 0.6);
+  }
+
   .dropdown-menu {
     box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
     border: 1px solid #fff;
@@ -31,74 +71,11 @@
         color: #1c2d41 !important;
 
         &:hover {
-          @include final-nav-item-hover-effect();
+          @include nav-item-hover-effect();
         }
       }
     }
   }
-}
-
-.top-navbar {
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 50px;
-  z-index: 99999;
-  transition: all 0.4s ease-out;
-  margin: 0px;
-  padding-top: 0.4rem;
-  text-align: center;
-
-  &.initial-navbar {
-    background-color: transparent;
-    .navbar-brand {
-      color: #c0ccda;
-      font-weight: 600;
-    }
-    li {
-      a {
-        color: #c0ccda;
-        &:hover {
-          @include initial-nav-item-hover-effect();
-        }
-      }
-    }
-    .navbar-nav .active {
-      @include initial-nav-item-hover-effect();
-    }
-    @include navbar-dropdown();
-  }
-
-  &.final-navbar {
-    background-color: #f9fafc;
-    color: #1c2d41;
-    transition: all 0.3s ease-out;
-
-    .navbar-brand {
-      color: #1c2d41;
-      font-weight: 600;
-    }
-    li {
-      a {
-        color: #1c2d41;
-        font-weight: 500;
-        transition: all 0.3s ease-out;
-        border-bottom: 2px solid#F9FAFC;
-        &:hover {
-          @include final-nav-item-hover-effect();
-        }
-      }
-    }
-    .navbar-nav .active {
-      @include final-nav-item-hover-effect();
-    }
-
-    #top-navbar-divider {
-      background: rgba(0, 0, 0, 0.6);
-    }
-    @include navbar-dropdown();
-  }
 
   .navbar-collapse {
     margin-top: -5px;
@@ -125,6 +102,22 @@
     }
   }
 
+  &.transparent-navbar {
+    background-color: transparent;
+    .navbar-brand {
+      color: #c0ccda;
+      font-weight: 600;
+    }
+    li {
+      a {
+        color: #c0ccda;
+      }
+    }
+    .feather-menu {
+      stroke: #8392a5;
+    }
+  }
+
   #top-navbar-divider {
     margin-top: 10px;
     background: rgba(192, 204, 218, 0.8);
@@ -148,7 +141,7 @@
       max-width: 100%;
     }
 
-    &.initial-navbar {
+    &.transparent-navbar {
       .navbar-nav .active,
       li a:hover {
         color: #2098d1;
@@ -194,3 +187,10 @@
     }
   }
 }
+
+.feather-sidebar,
+.feather-menu {
+  width: 1.5rem;
+  height: 1.5rem;
+  stroke: #3c4858;
+}

assets/styles/navigators/sidebar.scss

@@ -87,13 +87,13 @@
               &:before {
                 content: '';
                 display: block;
-                width: 20px;
+                width: 18px;
                 height: 0;
                 border-top: 1px solid;
                 margin-top: -1px;
                 position: absolute;
                 top: 18px;
-                left: -3px;
+                left: -2px;
               }
               &:last-child:before {
                 background: #f9fafc;
@@ -116,9 +116,9 @@
                   display: block;
                   width: 0;
                   position: absolute;
-                  top: -10px;
+                  top: -8px;
-                  left: 0.3rem;
+                  left: 6px;
-                  bottom: 0.9rem;
+                  bottom: 0.8rem;
                   border-left: 1px solid;
                 }
               }
@@ -247,3 +247,9 @@
     }
   }
 }
+
+.feather-plus-circle,
+.feather-minus-circle {
+  width: 1rem;
+  height: 1rem;
+}

layouts/404.html

@@ -1,5 +1,5 @@
 {{ define "navbar" }}
-    {{ partial "navigators/navbar-2.html" (dict "baseURL" site.BaseURL "title" site.Title "hasToggleButton" false) }}
+    {{ partial "navigators/navbar.html" . }}
 {{ end }}
 
 {{ define "content" }}

layouts/_default/list.html

@@ -1,5 +1,5 @@
 {{ define "navbar" }}
-    {{ partial "navigators/navbar-2.html" . }}
+    {{ partial "navigators/navbar.html" . }}
 {{ end }}
 
 {{ define "sidebar" }}

layouts/_default/search.html

@@ -1,5 +1,5 @@
 {{ define "navbar" }}
-    {{ partial "navigators/navbar-2.html" . }}
+    {{ partial "navigators/navbar.html" . }}
 {{ end }}
 
 {{ define "sidebar" }}

layouts/_default/single.html

@@ -3,7 +3,7 @@
 {{ end }}
 
 {{ define "navbar" }}
-    {{ partial "navigators/navbar-2.html" . }}
+    {{ partial "navigators/navbar.html" . }}
 {{ end }}
 
 {{ define "sidebar" }}
@@ -155,9 +155,6 @@
   </div>
   <!--scroll back to top-->
   <a id="scroll-to-top" class="btn"><i class="fas fa-chevron-circle-up"></i></a>
-  {{ if .IsTranslated }}
-    {{ partial "navigators/floating-lang-selector.html" . }}
-  {{ end }}
 </section>
 {{ end }}
 

layouts/categories/list.html

@@ -1,5 +1,5 @@
 {{ define "navbar" }}
-    {{ partial "navigators/navbar-2.html" . }}
+    {{ partial "navigators/navbar.html" . }}
 {{ end }}
 
 {{ define "sidebar" }}

layouts/notes/list.html

@@ -1,5 +1,5 @@
 {{ define "navbar" }}
-    {{ partial "navigators/navbar-2.html" . }}
+    {{ partial "navigators/navbar.html" . }}
 {{ end }}
 
 {{ define "sidebar" }}

layouts/notes/single.html

@@ -1,5 +1,5 @@
 {{ define "navbar" }}
-    {{ partial "navigators/navbar-2.html" . }}
+    {{ partial "navigators/navbar.html" . }}
 {{ end }}
 
 {{ define "sidebar" }}

layouts/partials/navigators/floating-lang-selector.html

@@ -1,25 +0,0 @@
-{{ $pageURL:= .RelPermalink }}
-{{ if site.IsMultiLingual }}
-    {{ $pageURL = strings.TrimPrefix (path.Join "/" .Language.Lang) $pageURL }}
-{{ end }}
-
-<div class="dropdown languageSelector">
-    <a class="btn dropdown-toggle" href="#" id="languageSelector" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-        {{ if ne site.Params.features.flags.enable false }}
-            {{ $countryCode := partial "helpers/country-code.html" . }}
-            <span class="flag-icon flag-icon-{{$countryCode}}"></span>
-        {{ end }}
-        {{ site.Language.LanguageName }}
-    </a>
-    <div class="dropdown-menu" aria-labelledby="languageSelector">
-        {{ range .Translations }}
-        <a class="dropdown-item nav-link languages-item" href="{{ path.Join "/" (cond (eq .Language.Lang "en") "" .Language.Lang) $pageURL }}">
-            {{ if ne site.Params.features.flags.enable false }}
-                {{ $countryCode := partial "helpers/country-code.html" . }}
-                <span class="flag-icon flag-icon-{{$countryCode}}"></span>
-            {{ end }}
-            {{ .Language.LanguageName }}
-        </a>
-        {{ end }}
-    </div>
-</div>

layouts/partials/navigators/lang-selector-2.html

@@ -1,25 +0,0 @@
-{{ $pageURL:= .RelPermalink }}
-{{ if site.IsMultiLingual }}
-  {{ $pageURL = strings.TrimPrefix (path.Join "/" .Language.Lang) $pageURL }}
-{{ end }}
-
-<li class="nav-item dropdown">
-    <a class="nav-link dropdown-toggle" href="#" id="languageSelector" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-      {{ if ne site.Params.features.flags.enable false }}
-        {{ $countryCode := partial "helpers/country-code.html" . }}
-        <span class="flag-icon flag-icon-{{$countryCode}}"></span>
-      {{ end }}
-      {{ site.Language.LanguageName }}
-    </a>
-    <div class="dropdown-menu" aria-labelledby="languageSelector">
-      {{ range .Translations }}
-        <a class="dropdown-item nav-link languages-item" href="{{ path.Join "/" (cond (eq .Language.Lang "en") "" .Language.Lang) $pageURL }}">
-          {{ if ne site.Params.features.flags.enable false }}
-            {{ $countryCode := partial "helpers/country-code.html" . }}
-            <span class="flag-icon flag-icon-{{$countryCode}}"></span>
-          {{ end }}
-          {{ .Language.LanguageName }}
-        </a>
-      {{ end }}
-    </div>
-</li>

layouts/partials/navigators/navbar-2.html

@@ -1,63 +0,0 @@
-{{/* by default, don't use any logo */}}
-{{ $mainLogo := "" }}
-{{ $invertedLogo := "" }}
-
-{{/*  if custom logo has been provided, use them  */}}
-{{ if site.Params.logo.main }}
-  {{ $mainLogo = site.Params.logo.main }}
-{{ end }}
-{{ if site.Params.logo.inverted }}
-  {{ $invertedLogo = site.Params.logo.inverted }}
-{{ end }}
-
-{{/* resize the logos. don't resize svg because it is not supported */}}
-{{ if $mainLogo }}
-  {{ $mainLogo = resources.Get $mainLogo}}
-  {{ if and $mainLogo (ne $mainLogo.MediaType.SubType "svg") }}
-    {{ $mainLogo = $mainLogo.Resize "42x" }}
-  {{ end }}
-  {{ $mainLogo = $mainLogo.RelPermalink}}
-{{ end }}
-
-{{ if $invertedLogo }}
-  {{ $invertedLogo = resources.Get $invertedLogo}}
-  {{ if and $invertedLogo (ne $invertedLogo.MediaType.SubType "svg")}}
-    {{ $invertedLogo = $invertedLogo.Resize "42x" }}
-  {{ end }}
-  {{ $invertedLogo = $invertedLogo.RelPermalink}}
-{{ end }}
-
-<nav class="navbar navbar-expand-xl top-navbar final-navbar shadow">
-  <div class="container">
-      <button class="navbar-toggler navbar-light" id="sidebar-toggler" type="button">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-    <a class="navbar-brand" href="{{ site.BaseURL | relLangURL }}">
-      {{ if $mainLogo }}
-        <img src="{{ $mainLogo  }}" alt="Logo">
-      {{ end }}
-      {{- site.Title -}}
-    </a>
-    <button class="navbar-toggler navbar-light" id="toc-toggler" type="button">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-
-    <div class="collapse navbar-collapse lang-selector" id="top-nav-items">
-      <ul class="navbar-nav ml-auto">
-      {{ if .IsTranslated }}
-        {{ partial "navigators/lang-selector-2.html" . }}
-      {{ end }}
-      {{ if site.Params.features.darkMode.enable }}
-        {{ partial "navigators/theme-selector.html" . }}
-      {{ end }}
-      </ul>
-    </div>
-  </div>
-  <!-- Store the logo information in a hidden img for the JS -->
-  {{ if $mainLogo }}
-    <img src="{{ $mainLogo }}" class="d-none" id="main-logo" alt="Logo">
-  {{ end }}
-  {{ if $invertedLogo }}
-    <img src="{{ $invertedLogo }}" class="d-none" id="inverted-logo" alt="Inverted Logo">
-  {{ end }}
-</nav>

layouts/partials/navigators/navbar.html

@@ -37,6 +37,11 @@
   {{ $invertedLogo = $invertedLogo.RelPermalink}}
 {{ end }}
 
+{{ $logo := $mainLogo }}
+{{ if .IsHome }}
+  {{ $logo = $invertedLogo }}
+{{ end }}
+
 {{ $customMenus := site.Params.customMenus }}
 {{ if (index site.Data site.Language.Lang).site.customMenus }}
   {{ $customMenus = (index site.Data site.Language.Lang).site.customMenus }}
@@ -47,29 +52,34 @@
   {{ $sections = (index site.Data site.Language.Lang).sections }}
 {{ end }}
 
-<nav class="navbar navbar-expand-xl top-navbar initial-navbar" id="top-navbar">
+<nav class="navbar navbar-expand-xl top-navbar shadow {{ if .IsHome}}transparent-navbar homepage{{end}}" id="top-navbar">
   <div class="container">
+    {{ if not .IsHome }}
+    <button class="navbar-toggler navbar-light" id="sidebar-toggler" type="button">
+      <i data-feather="sidebar"></i>
+    </button>
+    {{ end }}
     <a class="navbar-brand" href="{{ site.BaseURL | relLangURL }}">
-      {{ if $invertedLogo }}
+      {{ if $logo }}
-        <img src="{{ $invertedLogo }}" id="logo" alt="Logo">
+        <img src="{{ $logo }}" id="logo" alt="Logo">
       {{ end }}
       {{- site.Title -}}
     </a>
     <button
-      class="navbar-toggler navbar-dark"
+      class="navbar-toggler {{if .IsHome}}navbar-dark{{else}}navbar-light{{end}}"
       id="navbar-toggler"
       type="button"
       data-toggle="collapse"
       data-target="#top-nav-items"
       aria-label="menu"
     >
-      <span class="navbar-toggler-icon"></span>
+      <i data-feather="menu"></i>
     </button>
 
     <div class="collapse navbar-collapse dynamic-navbar" id="top-nav-items">
       <ul class="navbar-nav ml-auto">
         <li class="nav-item">
-          <a class="nav-link" href="#home">{{ i18n "home" }}</a>
+          <a class="nav-link" href="{{ site.BaseURL | relLangURL }}#home">{{ i18n "home" }}</a>
         </li>
         {{ if $sections }}
           {{ $sectionCount := 1 }}
@@ -78,7 +88,7 @@
               {{ $sectionCount  = add $sectionCount 1}}
               {{ if le $sectionCount $maxVisibleSections }}
                 <li class="nav-item">
-                  <a class="nav-link" href="#{{ partial "helpers/get-section-id.html" . }}">{{ .section.name }}</a>
+                  <a class="nav-link" href="{{ site.BaseURL | relLangURL }}#{{ partial "helpers/get-section-id.html" . }}">{{ .section.name }}</a>
                 </li>
               {{ end }}
             {{ end }}
@@ -92,7 +102,7 @@
                   {{ if and (.section.enable) (.section.showOnNavbar) }}
                     {{ $sectionCount  = add $sectionCount 1}}
                     {{ if gt $sectionCount $maxVisibleSections }}
-                      <a class="dropdown-item" href="#{{ partial "helpers/get-section-id.html" . }}">{{ .section.name }}</a>
+                      <a class="dropdown-item" href="{{ site.BaseURL | relLangURL }}#{{ partial "helpers/get-section-id.html" . }}">{{ .section.name }}</a>
                     {{ end }}
                   {{ end }}
                 {{- end }}
@@ -106,12 +116,12 @@
         {{ end }}
         {{ if $blogEnabled }}
           <li class="nav-item">
-            <a class="nav-link" id="blog-link" href="{{ "/posts/" | relLangURL }}">{{ i18n "posts" }}</a>
+            <a class="nav-link" id="blog-link" href="{{ path.Join (site.BaseURL | relLangURL) "posts" }}">{{ i18n "posts" }}</a>
           </li>
         {{ end }}
         {{ if $notesEnabled }}
           <li class="nav-item">
-            <a class="nav-link" id="note-link" href="{{ "/notes/" | relLangURL }}">{{ i18n "notes" }}</a>
+            <a class="nav-link" id="note-link" href="{{ path.Join (site.BaseURL | relLangURL) "notes" }}">{{ i18n "notes" }}</a>
           </li>
         {{ end }}
         {{ range $customMenus }}

layouts/partials/navigators/sidebar.html

@@ -1,15 +1,15 @@
 {{ range .menuItems }}
   {{ $class:= "" }}
-  {{ $icon:= "fa-plus-circle" }}
+  {{ $icon:= "plus-circle" }}
   <!-- If the current menu is the selected menu or it contain the selected menu, set expand icon and set "active" class -->
   {{ if or ($.ctx.HasMenuCurrent $.menuName .)  ($.ctx.IsMenuCurrent $.menuName .)}}
-    {{ $icon = "fa-minus-circle"}}
+    {{ $icon = "minus-circle"}}
     {{ $class = "active" }}
   {{end}}
   {{ if .HasChildren }}
     <!-- Add current entry -->
     <li>
-      <i class="fas {{ $icon }}"></i><a class="{{$class}} list-link" href="{{ .URL }}"> {{.Name}}</a>
+      <i data-feather="{{ $icon }}"></i><a class="{{$class}} list-link" href="{{ .URL }}"> {{.Name}}</a>
       <!-- Add sub-tree -->
       <ul class="{{ $class }}">
         {{ partial "navigators/sidebar.html" (dict "menuName" $.menuName "menuItems" .Children "ctx" $.ctx) }}

layouts/partials/scripts.html

@@ -1 +1 @@
-{{ partial "helpers/script-bundle.html" }}
+{{ partial "helpers/script-bundle.html" }}

layouts/tags/list.html

@@ -1,5 +1,5 @@
 {{ define "navbar" }}
-    {{ partial "navigators/navbar-2.html" . }}
+    {{ partial "navigators/navbar.html" . }}
 {{ end }}
 
 {{ define "sidebar" }}

package-lock.json

@@ -21,11 +21,13 @@
         "eslint-plugin-n": "^15.6.0",
         "eslint-plugin-no-jquery": "^2.7.0",
         "eslint-plugin-promise": "^6.1.1",
+        "feather-icons": "^4.29.1",
         "filterizr": "^2.2.4",
         "flag-icon-css": "^4.1.7",
         "fuse.js": "^6.6.2",
         "highlight.js": "^11.6.0",
         "imagesloaded": "^5.0.0",
+        "include-media": "^1.4.10",
         "ityped": "^1.0.3",
         "katex": "^0.16.3",
         "mark.js": "^8.11.1",
@@ -504,6 +506,12 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==",
+      "dev": true
+    },
     "node_modules/cliui": {
       "version": "7.0.4",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
@@ -1677,6 +1685,16 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/feather-icons": {
+      "version": "4.29.1",
+      "resolved": "https://registry.npmjs.org/feather-icons/-/feather-icons-4.29.1.tgz",
+      "integrity": "sha512-P1we61haGTds6lKWe6CCVPsNULb8tHr1y6S9gXEpU+lNR1Ja7GdV0A1l2hTNmzXv+0Stix/3YMWMAn7n1Qtd6A==",
+      "dev": true,
+      "dependencies": {
+        "classnames": "^2.2.5",
+        "core-js": "^3.1.3"
+      }
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -2202,6 +2220,12 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/include-media": {
+      "version": "1.4.10",
+      "resolved": "https://registry.npmjs.org/include-media/-/include-media-1.4.10.tgz",
+      "integrity": "sha512-TymQzKF7oWHbItEcEHOCponZ90lRr1I9QbYeD+qCxXy4Z0/pSpS4Ocz2bq3FMOERlXXrY9Sawsh9GjiObVQA6A==",
+      "dev": true
+    },
     "node_modules/inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -4134,6 +4158,12 @@
         "readdirp": "~3.6.0"
       }
     },
+    "classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==",
+      "dev": true
+    },
     "cliui": {
       "version": "7.0.4",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
@@ -5020,6 +5050,16 @@
         "reusify": "^1.0.4"
       }
     },
+    "feather-icons": {
+      "version": "4.29.1",
+      "resolved": "https://registry.npmjs.org/feather-icons/-/feather-icons-4.29.1.tgz",
+      "integrity": "sha512-P1we61haGTds6lKWe6CCVPsNULb8tHr1y6S9gXEpU+lNR1Ja7GdV0A1l2hTNmzXv+0Stix/3YMWMAn7n1Qtd6A==",
+      "dev": true,
+      "requires": {
+        "classnames": "^2.2.5",
+        "core-js": "^3.1.3"
+      }
+    },
     "file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -5399,6 +5439,12 @@
       "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
       "dev": true
     },
+    "include-media": {
+      "version": "1.4.10",
+      "resolved": "https://registry.npmjs.org/include-media/-/include-media-1.4.10.tgz",
+      "integrity": "sha512-TymQzKF7oWHbItEcEHOCponZ90lRr1I9QbYeD+qCxXy4Z0/pSpS4Ocz2bq3FMOERlXXrY9Sawsh9GjiObVQA6A==",
+      "dev": true
+    },
     "inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",

package.hugo.json

@@ -44,6 +44,7 @@
     "mermaid": "^9.2.1",
     "plyr": "^3.7.2",
     "popper.js": "^1.16.1",
-    "include-media": "^1.4.10"
+    "include-media": "^1.4.10",
+    "feather-icons": "^4.29.1"
   }
 }

package.json

@@ -18,11 +18,13 @@
       "eslint-plugin-n": "project",
       "eslint-plugin-no-jquery": "project",
       "eslint-plugin-promise": "project",
+      "feather-icons": "project",
       "filterizr": "project",
       "flag-icon-css": "project",
       "fuse.js": "project",
       "highlight.js": "project",
       "imagesloaded": "project",
+      "include-media": "project",
       "ityped": "project",
       "katex": "project",
       "mark.js": "project",
@@ -48,11 +50,13 @@
     "eslint-plugin-n": "^15.6.0",
     "eslint-plugin-no-jquery": "^2.7.0",
     "eslint-plugin-promise": "^6.1.1",
+    "feather-icons": "^4.29.1",
     "filterizr": "^2.2.4",
     "flag-icon-css": "^4.1.7",
     "fuse.js": "^6.6.2",
     "highlight.js": "^11.6.0",
     "imagesloaded": "^5.0.0",
+    "include-media": "^1.4.10",
     "ityped": "^1.0.3",
     "katex": "^0.16.3",
     "mark.js": "^8.11.1",