Refactor sidebar logic + Add Table of Contents in reading page (#33)

* Refactor sidebar logic + fix responsiveness

* Add TOC

* Add Pagination

* Update exampleSite

* Update README.md

layouts/partials/cards/post.html

@@ -1,4 +1,4 @@
-<div class="filtr-item" data-category='{{ partial "helpers/get-categories.html" . }}'>
+<div class="post-card">
   <a href="{{ .RelPermalink }}" class="post-card-link">
     <div class="card">
       <div class="card-head">

layouts/partials/cards/project.html

@@ -1,5 +1,5 @@
 <div
-  class="col-md-6 col-lg-4 p-2 filtr-item"
+  class="col-sm-12 col-md-6 col-lg-4 p-2 filtr-item"
   data-category='all, {{ delimit  .tags ","}}'
 >
   <div class="card mt-1">

layouts/partials/cards/recent-post.html

@@ -1,4 +1,4 @@
-<div class="col-lg-4 col-md-6 pt-2">
+<div class="col-lg-4 col-md-6 pt-2 post-card">
   <a href="{{ .RelPermalink }}" class="post-card-link">
     <div class="card">
       <div class="card-head">

layouts/partials/cards/skill.html

@@ -1,4 +1,4 @@
-<div class="col-sm-12 col-md-6 col-lg-4 pt-2">
+<div class="col-xs-12 col-sm-6 col-lg-4 pt-2">
   <div class="card">
     <div class="card-head d-flex">
       {{ if .icon }}

layouts/partials/experiences/experience-info.html

@@ -1,5 +0,0 @@
-{{ if gt (len .positions) 1 }}
-  {{ partial "experiences/multiple-positions" . }}
-{{ else }}
-  {{ partial "experiences/single-position.html" . }}
-{{ end }}

layouts/partials/header.html

@@ -5,7 +5,8 @@
 <!-- ============ import common css ========== -->
 <link rel="stylesheet" href="/assets/css/bootstrap.min.css" />
 <link rel="stylesheet" href="/assets/css/main.css" />
-<link rel="stylesheet" href="/assets/css/navbar.css" />
+<link rel="stylesheet" href="/assets/css/style.css" />
+<link rel="stylesheet" href="/assets/css/navigators/navbar.css" />
 
 <!--=================== cdn ==============================-->
 <link href="https://fonts.googleapis.com/css2?family=Muli:wght@300;400;500;600" rel="stylesheet">

layouts/partials/helpers/get-categories.html

@@ -1,5 +0,0 @@
-{{ $categories:= ""}}
-{{ if  .Params.categories }}
-    {{ $categories = delimit .Params.categories "," }}
-{{ end }}
-{{ return $categories }}

layouts/partials/navbar-2.html

@@ -1,16 +0,0 @@
-<nav class="navbar navbar-expand-lg top-navbar final-navbar shadow">
-    <div class="container">
-      <a class="navbar-brand" href="{{ .navBrandURL }}">
-        <img src="/assets/images/logo.png">
-        {{- .title -}}
-      </a>
-      <button class="navbar-toggler navbar-light" type="button" {{ if .hasToggleButton }}onclick="toggleSidebar()"{{ end }}>
-        <span class="navbar-toggler-icon"></span>
-      </button>
-
-      <div class="collapse navbar-collapse" id="top-nav-items">
-        <ul class="navbar-nav ml-auto">
-        </ul>
-      </div>
-    </div>
-</nav>

layouts/partials/navigators/navbar-2.html

@@ -0,0 +1,19 @@
+<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" onclick="toggleSidebar()">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <a class="navbar-brand" href="{{ site.BaseURL }}">
+        <img src="/assets/images/logo.png">
+        {{- site.Title -}}
+      </a>
+      <button class="navbar-toggler navbar-light" id="toc-toggler" type="button" onclick="toggleTOC()">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+
+      <div class="collapse navbar-collapse" id="top-nav-items">
+        <ul class="navbar-nav ml-auto">
+        </ul>
+      </div>
+    </div>
+</nav>

layouts/partials/navigators/navbar.html

@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand-lg top-navbar initial-navbar" id="top-navbar">
+<nav class="navbar navbar-expand-xl top-navbar initial-navbar" id="top-navbar">
   <div class="container">
     <a class="navbar-brand" href="{{ .Site.BaseURL }}">
       <img src="/assets/images/logo-inverted.png" id="logo">
@@ -7,7 +7,7 @@
     <button
       class="navbar-toggler navbar-dark"
       id="navbar-toggler"
-      ,type="button"
+      type="button"
       data-toggle="collapse"
       data-target="#top-nav-items"
     >
@@ -17,13 +17,13 @@
     <div class="collapse navbar-collapse" id="top-nav-items">
       <ul class="navbar-nav ml-auto">
         <li class="nav-item">
-          <a class="nav-link smooth-scroll" href="#home">Home</a>
+          <a class="nav-link" href="#home">Home</a>
         </li>
         {{- if .Site.Data.sections }}
           {{- range sort .Site.Data.sections "section.weight" }}
             {{ if and (.section.enable) (.section.showOnNavbar)}}
               <li class="nav-item">
-                <a class="nav-link smooth-scroll" href="#{{ replace (lower .section.name) " " "-" }}">{{ .section.name }}</a>
+                <a class="nav-link" href="#{{ replace (lower .section.name) " " "-" }}">{{ .section.name }}</a>
               </li>
             {{ end }}
           {{- end }}

layouts/partials/navigators/sidebar.html

@@ -0,0 +1,22 @@
+{{ range .menus }}
+  {{ $class:= "" }}
+  {{ $icon:= "fa-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 "sidebar" .)  ($.ctx.IsMenuCurrent "sidebar" .)}}
+    {{ $icon = "fa-minus-circle"}}
+    {{ $class = "active" }}
+  {{end}}
+  {{ if .HasChildren }}
+    <!-- Add current entry -->
+    <li>
+      <i class="fas {{ $icon }}"></i><a class="{{$class}}" href="{{.URL}}">{{.Name}}</a>
+      <!-- Add sub-tree -->
+      <ul class="{{ $class }}">
+        {{ partial "navigators/sidebar.html" (dict "menus" .Children "ctx" $.ctx) }}
+      </ul>
+    </li>
+  {{ else }}
+    <!-- No sub-tree. So, only add current entry -->
+    <li><a class="{{$class}}" href="{{.URL}}">{{.Name}}</a></li>
+  {{ end }}
+{{ end }}

layouts/partials/scripts.html

@@ -2,4 +2,4 @@
 <script src="/assets/js/bootstrap.min.js"></script>
 
 <script src="/assets/js/navbar.js"></script>
-<script src="/assets/js/jquery.filterizr.min.js"></script>
+<script src="/assets/js/main.js"></script>

layouts/partials/sections.html

@@ -1,11 +0,0 @@
-{{ range . }}
-{{ if .Sections }}
-    <li><a href="#{{ .Params.id }}" data-filter="{{ .Params.id }}">{{ title .Title }}</a>
-    <ul>
-        {{ partial "sections.html" .Sections }}
-    </ul>
-    </li>
-    {{ else }}
-        <li><a href="#{{ .Params.id }}" data-filter="{{ .Params.id }}">{{ title .Title }}</a></li>
-    {{ end }}
-{{ end }}

layouts/partials/sections/about.html

@@ -1,7 +1,7 @@
-<div class="container anchor p-md-5 about-section" id="{{ replace (lower .section.name) " " "-" }}">
+<div class="container anchor p-lg-5 about-section" id="{{ replace (lower .section.name) " " "-" }}">
   <div class="row pt-sm-2 pt-md-4 align-self-center">
     <!-- summary -->
-    <div class="col-md-6">
+    <div class="col-sm-6">
     <h3 class="p-1">{{ site.Params.author.name }}</h3>
       {{ if .designation }}
       <h5 class="p-1">
@@ -34,10 +34,10 @@
       {{ end }}
     </div>
     <!-- soft skills circular-progressbar -->
-    <div class="col-md-6 pt-5 pl-md-4 pl-sm-3 pt-md-0">
+    <div class="col-sm-6 pt-5 pl-md-4 pl-sm-3 pt-sm-0">
       <div class="row">
         {{ range .softSkills }}
-          {{ partial "progress/soft-skills" . }}
+          {{ partial "misc/soft-skills.html" . }}
         {{ end }}
       </div>
     </div>

layouts/partials/sections/achievements.html

@@ -9,7 +9,7 @@
   <!-- achievements-holder holds achievement-entry -->
   <div class="d-none" id="achievements-holder">
     {{ range .achievements }}
-      {{ partial "misc/achievement.html" . }}
+      {{ partial "sections/achievements/entry.html" . }}
     {{ end }}
   </div>
 </div>

layouts/partials/sections/experiences.html

@@ -8,17 +8,17 @@
    {{ range $index,$experience:= .experiences }}
      {{ if eq (mod $index 2) 0 }}
        <div class="row align-items-center  d-flex">
-         {{ partial "experiences/vertical-line.html" $index }}
-         {{ partial "experiences/experience-info.html" $experience }}
+         {{ partial "sections/experiences/vertical-line.html" $index }}
+         {{ partial "sections/experiences/experience-info.html" $experience }}
        </div>
      {{else}}
        <div class="row align-items-center justify-content-end d-flex">
-         {{ partial "experiences/experience-info.html" $experience }}
-         {{ partial "experiences/vertical-line.html" $index }}
+         {{ partial "sections/experiences/experience-info.html" $experience }}
+         {{ partial "sections/experiences/vertical-line.html" $index }}
        </div>
      {{ end }}
      {{ if lt $index (sub $totalExperiences 1) }}
-       {{ partial "experiences/horizontal-line.html" $index }}
+       {{ partial "sections/experiences/horizontal-line.html" $index }}
      {{ end }}
    {{ end }}
   </div>

layouts/partials/sections/experiences/experience-info.html

@@ -0,0 +1,5 @@
+{{ if gt (len .positions) 1 }}
+  {{ partial "sections/experiences/multiple-positions" . }}
+{{ else }}
+  {{ partial "sections/experiences/single-position.html" . }}
+{{ end }}