Merge pull request #199 from gethinode/develop

Navigation
Clean up style
2025-10-07 18:14:28 +00:00 · 2023-04-06 09:49:34 +02:00 · 2023-04-06 09:40:11 +02:00 · 2023-04-06 09:33:10 +02:00 · 2023-04-06 09:31:09 +02:00 · 2023-04-06 09:31:02 +02:00
11 changed files with 62 additions and 32 deletions
--- a/assets/scss/common/_styles.scss
+++ b/assets/scss/common/_styles.scss
@@ -18,3 +18,14 @@ a:active {
 .tickmark li::marker {
    content: "✓ ";
 }
+
+.anchor
+{
+    color: transparent;
+}
+
+.heading:hover .anchor 
+{
+    transition: 0.25s ease-in-out;
+    color: $primary;
+}
--- a/assets/scss/components/_navbar.scss
+++ b/assets/scss/components/_navbar.scss
@@ -24,6 +24,10 @@
    border: 0 if($enable-important-utilities, !important, null);
 }

+.fw-30 {
+    width: 30px !important;
+}
+
 /* Lines of the Toggler */
 .toggler-icon {
    width: 30px;
--- a/assets/scss/components/_toc.scss
+++ b/assets/scss/components/_toc.scss
@@ -6,9 +6,9 @@
    grid-area: toc;
    right: 0;
    z-index: 2;
-    height: calc(100vh - 7rem);
+    height: calc(100vh - 5rem);
    overflow-y: auto;
-    top: $navbar-offset;
+    top: 5rem;
 }

 // scss-docs-end toc
--- a/config/_default/params.toml
+++ b/config/_default/params.toml
@@ -21,10 +21,11 @@

 # toml-docs-start navigation
 [navigation]
+    anchor = true
    logo = "/img/logo_icon.svg"
    color = "body"
    fixed = true
-    offset = "5em"
+    offset = "3.8em"
    search = true
    breadcrumb = false
    toc = true
--- a/layouts/_default/_markup/render-heading.html
+++ b/layouts/_default/_markup/render-heading.html
@@ -0,0 +1,5 @@
+{{ if site.Params.navigation.anchor }}
+<h{{ .Level }} id="{{ .Anchor | safeURL }}" class="heading">{{ .Text | safeHTML }} <a href="#{{ .Anchor | safeURL }}"><i class="fa-solid fa-link anchor"></i></a></h{{ .Level }}>
+{{ else }}
+<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }}</h{{ .Level }}>
+{{ end }}
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -1,4 +1,6 @@
+{{- $section := .Section }}
 {{- with partial "utilities/GetMenu" . }}{{ $.Scratch.Set "sidebar" . }}{{ end -}}
+{{ $.Scratch.Set "version" (site.Param (printf "%s.version" .Section)) }}

 <!doctype html>
 <html lang="{{ .Site.Language.Lang }}" class="no-js" data-bs-theme="dark">
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -69,6 +69,7 @@

 {{ define "main" -}}
    {{- $menu := .Scratch.Get "sidebar" -}}
+    {{- $version := .Scratch.Get "version" -}}
    {{- $sidebar := .Site.Params.navigation.sidebar | default true -}}
    {{ if and $menu $sidebar -}}
        <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvass-sidebar" aria-labelledby="offcanvas-label">
@@ -77,14 +78,14 @@
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
-                {{ partial "assets/sidebar" (dict "page" . "menu" $menu) }}
+                {{ partial "assets/sidebar" (dict "page" . "menu" $menu "version" $version) }}
            </div>
        </div>
    
        <div class="container-fluid">
            <div class="row row-cols-md-2 row-cols-lg-3">
                <div class="col col-md-3 col-lg-2 d-none pt-5 d-md-block sidebar-overflow sticky-top">
-                    {{ partial "assets/sidebar" (dict "page" . "menu" $menu) }}
+                    {{ partial "assets/sidebar" (dict "page" . "menu" $menu "version" $version) }}
                </div>
                <div class="col col-md-9 col-lg-8 mb-5 p-4">
                    {{ partial "partials/header.html" . }}
--- a/layouts/partials/assets/navbar.html
+++ b/layouts/partials/assets/navbar.html
@@ -79,19 +79,21 @@
 {{- $pre := .Pre -}}
 {{- $post := .Post -}}

-<nav class="navbar navbar-expand-{{ $size }} {{ with $color }}bg-{{ . }}{{ end }} {{ if $fixed }}fixed-top{{ end }} p-3">
-	<div class="container-fluid">
+<nav class="navbar navbar-expand-{{ $size }} {{ with $color }}bg-{{ . }}{{ end }} {{ if $fixed }}fixed-top{{ end }} p-4">
+	<div class="container-fluid p-0">
        <!-- Insert sidebar toggler when applicable -->
-        {{- if $page.Scratch.Get "sidebar" -}}
-            <button class="navbar-toggler collapsed ms-n3" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvass-sidebar" aria-controls="offcanvass-sidebar" aria-label="{{ T "toggleSidebar" }}">
-                {{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}}
-            </button>
-        {{- else -}}
-            <!-- Insert invisible sidebar toggler to center logo correctly on smaller screens -->
-            <button class="navbar-toggler collapsed ms-n3 invisible" type="button">
-                {{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}}
-            </button>
-        {{- end -}}
+        <div class="d-flex">
+            {{- if $page.Scratch.Get "sidebar" -}}
+                <button class="navbar-toggler fw-30 collapsed p-0 mx-auto" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvass-sidebar" aria-controls="offcanvass-sidebar" aria-label="{{ T "toggleSidebar" }}">
+                    {{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}}
+                </button>
+            {{- else -}}
+                <!-- Insert invisible sidebar toggler to center logo correctly on smaller screens -->
+                <button class="navbar-toggler fw-30 collapsed p-0 mx-auto invisible" type="button">
+                    {{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}}
+                </button>
+            {{- end -}}
+        </div>

        <!-- Insert the brand logo or name -->
        <a class="navbar-brand mx-auto" href="{{ site.Home.RelPermalink }}">
@@ -103,12 +105,14 @@
        </a>

        <!-- Insert main navigation toggler -->
-		<button id="main-nav-toggler" class="navbar-toggler collapsed me-n3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent-{{ $id }}"
-			aria-controls="navbarSupportedContent-{{ $id }}" aria-expanded="false" aria-label="{{ T "toggleMainNav" }}">
-			<span class="toggler-icon top-bar emphasis"></span>
-			<span class="toggler-icon middle-bar emphasis"></span>
-			<span class="toggler-icon bottom-bar emphasis"></span>
-		</button>
+        <div class="d-flex fw-30">
+            <button id="main-nav-toggler" class="navbar-toggler collapsed p-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent-{{ $id }}"
+                aria-controls="navbarSupportedContent-{{ $id }}" aria-expanded="false" aria-label="{{ T "toggleMainNav" }}">
+                <span class="toggler-icon top-bar emphasis"></span>
+                <span class="toggler-icon middle-bar emphasis"></span>
+                <span class="toggler-icon bottom-bar emphasis"></span>
+            </button>
+        </div>

        <div class="navbar-collapse collapse" id="navbarSupportedContent-{{ $id }}">
            <!-- Insert search input -->
@@ -120,17 +124,18 @@
                    {{- $menu_item_url := $menu.URL | relLangURL -}}
                    {{- $page_url:= $page.RelPermalink | relLangURL -}}
                    {{- $active := hasPrefix $page_url $menu_item_url -}}
-
+                    
                    {{- $url := urls.Parse .URL -}}
                    {{- $baseurl := urls.Parse $.Site.Params.Baseurl -}}
                    {{- if .HasChildren -}}
                        <li class="nav-item dropdown">
                            <a class="nav-link {{ if $active }}active{{ end }} dropdown-toggle" href="{{ .URL }}" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                {{ if $active }}<span  class="active">{{ .Name }}</span>{{ else }}{{ .Name }}{{ end }}
+                                {{ if $active }}<span class="active">{{ .Name }}</span>{{ else }}{{ .Name }}{{ end }}
                            </a>
                            <ul class="dropdown-menu dropdown-menu-end">
                                {{- range .Children -}}
-                                    <li><a class="dropdown-item" href="{{ .URL }}">{{ .Name }}</a></li>
+                                    {{- $child_active := eq $page_url .URL -}}
+                                    <li><a class="dropdown-item {{ if $child_active }}active{{ end }}" href="{{ .URL }}">{{ .Name }}</a></li>
                                {{- end -}}
                            </ul>
                          </li>
--- a/layouts/partials/assets/sidebar.html
+++ b/layouts/partials/assets/sidebar.html
@@ -1,6 +1,7 @@
 {{- $page := .page }}
 {{- $section := $page.Section }}
 {{- $data := .menu -}}
+{{- $version := .version -}}

 {{- define "partials/sidebar/group.html" -}}
    {{- $page := .page -}}
@@ -79,9 +80,9 @@

 {{ if $data }}
    <nav class="sidebar flex-shrink-0 ps-1 pt-3" aria-label="{{ (strings.FirstUpper $section) }} navigation">
-        {{- $sectionBreak := false }}
-        {{ $level := 0}}
-        {{ $baseURL := relLangURL (path.Join $section site.Params.docs.version) }}
+        {{- $sectionBreak := false -}}
+        {{- $level := 0 -}}
+        {{- $baseURL := relLangURL (path.Join $section $version) }}

        <ul class="list-unstyled ps-0">
        {{- range $index, $item := $data -}}
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "@gethinode/hinode",
-  "version": "0.11.1",
+  "version": "0.11.4",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@gethinode/hinode",
-      "version": "0.11.1",
+      "version": "0.11.4",
      "license": "MIT",
      "devDependencies": {
        "@fortawesome/fontawesome-free": "^6.4.0",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@gethinode/hinode",
-  "version": "0.11.1",
+  "version": "0.11.4",
  "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
  "keywords": [
    "hugo",
Author	SHA1	Message	Date
Mark Dumay	f2509b07af	Merge pull request #199 from gethinode/develop Navigation	2023-04-06 09:49:34 +02:00
mark	4b606deafd	Clean up style	2023-04-06 09:40:11 +02:00
mark	d9f805d4a4	Bump release version	2023-04-06 09:33:10 +02:00
mark	a62bea018b	Refine TOC offset	2023-04-06 09:31:09 +02:00
mark	2596f2d7ee	Refine heading offset	2023-04-06 09:31:02 +02:00
mark	2bcd955402	Fix #154	2023-04-06 09:09:17 +02:00
Mark Dumay	511ad2cb4c	Merge pull request #198 from gethinode/develop Navbar	2023-04-06 06:21:07 +02:00
mark	b87a91f6df	Fix #128	2023-04-06 06:17:30 +02:00
mark	11b8bb4c69	Bump release version	2023-04-06 06:05:00 +02:00
mark	84fab6b8a8	Improve alignment of navbar elements	2023-04-06 06:04:29 +02:00
Mark Dumay	656770352a	Merge pull request #197 from gethinode/develop Configurable sidebar version	2023-04-05 13:17:07 +02:00
mark	1dadce3f92	Bump release version	2023-04-05 13:11:57 +02:00
mark	8d428d3b51	Make sidebar version configurable	2023-04-05 13:11:28 +02:00