chore: make docs subsection to show on mobile (#1517)

Signed-off-by: thisisobate <[email protected]>
kedacore · Jan 2, 2025 · 953427b · 953427b
1 parent 7d50594
commit 953427b
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 8 deletions.
diff --git a/assets/sass/nav.sass b/assets/sass/nav.sass
@@ -64,6 +64,12 @@
     & + &
       margin-top: 1rem
 
+.docs-menu--desktop
+  display: flex
+
+.docs-menu--mobile
+  display: none
+
 .scrolled
     background: #1d1c29 !important
     transition: background 1000ms
@@ -85,6 +91,12 @@
   .is-left-padded
     padding-left: 40px
 
+  .docs-menu--mobile
+    display: flex
+
+  .docs-menu--desktop
+    display: none
+
 @media screen and (max-width: 1023px)
   .navbar-link, .navbar-item
     color: $dark
diff --git a/config.toml b/config.toml
@@ -164,11 +164,48 @@ parent = "docs"
 weight = 1
 
 [[menu.docs]]
-url = "/docs/concepts/"
+url = "/docs/concepts"
 name = "Concepts"
+identifier = "Concepts"
 parent = "docs"
 weight = 2
 
+[[menu.docs]]
+url = "/docs/concepts/scaling-deployments/"
+name = "Scaling Deployments, StatefulSets & Custom Resources"
+parent = "Concepts"
+weight = 1
+
+[[menu.docs]]
+url = "/docs/concepts/scaling-jobs/"
+name = "Scaling Jobs"
+parent = "Concepts"
+weight = 2
+
+[[menu.docs]]
+url = "/docs/concepts/authentication/"
+name = "Authentication"
+parent = "Concepts"
+weight = 3
+
+[[menu.docs]]
+url = "/docs/concepts/external-scalers/"
+name = "External Scalers"
+parent = "Concepts"
+weight = 4
+
+[[menu.docs]]
+url = "/docs/concepts/admission-webhooks/"
+name = "Admission Webhooks"
+parent = "Concepts"
+weight = 5
+
+[[menu.docs]]
+url = "/docs/concepts/troubleshooting/"
+name = "Troubleshooting"
+parent = "Concepts"
+weight = 6
+
 [[menu.docs]]
 url = "/docs/concepts/#architecture"
 name = "Architecture"
@@ -213,7 +250,7 @@ weight = 9
 
 [[menu.docs]]
 url = "/docs/troubleshooting/"
-name = "Troubleshooting"
+name = "Troubleshooting Guide"
 parent = "docs"
 weight = 10
 

diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
@@ -33,18 +33,53 @@
           </p>
         </div>
 
-        <!-- <div class="navbar-item is-size-5-desktop has-dropdown is-hoverable">
-          <a class="navbar-link is-arrowless" href="/docs/{{ $latest }}/scalers">Scalers</a>
+        <!-- docs menu for mobile showing nested items -->
+        <div class="docs-menu--mobile navbar-item is-size-5-desktop has-dropdown is-hoverable">
+          {{ with .Site.Menus.docs }}
+          <div class="navbar-item is-size-5-desktop has-dropdown is-hoverable">
+            {{ range . }}
+              {{ template "main_nav_item" . }}
+            {{ end }}
+          </div>
+          {{ end }}
         </div>
-
+
+        {{ define "main_nav_item" }}
+        {{ $versions := site.Params.versions.docs }}
+        {{ $latest   := index $versions 0 }}
+        {{ $url := replaceRE "/docs" (printf "/docs/%s" $latest) .URL }}
+        {{ $isExternal := hasPrefix .URL "http" }}
         <div class="navbar-item is-size-5-desktop has-dropdown is-hoverable">
-          <a class="navbar-link is-arrowless" href="/docs/{{ $latest }}/authentication-providers">Auth providers</a>
-        </div> -->
+          <a class="navbar-link is-arrowless"{{ with .URL }} href="{{ $url }}"{{ end }} {{ if $isExternal }} target="_blank"{{ end }}>
+            <span>
+              {{ .Name }}
+            </span>
+            {{ if $isExternal }}
+              <span class="icon">
+                <i class="fas fa-xs fa-external-link-alt"></i>
+              </span>
+              {{ end }}
+              {{ if .HasChildren }}
+            <span class="icon">
+              <i class="fas fa-md fa-caret-down"></i>
+            </span>
+            {{ end }}
+          </a>
+          {{ if .HasChildren }}
+            <div class="navbar-dropdown is-radiusless">
+              {{ range .Children }}
+                {{ template "main_nav_item" . }}
+              {{ end }}
+            </div>
+          {{ end }}
+          </div>
+        {{ end }}
 
+        <!-- docs menu for desktop hiding nested items   -->
         {{ range $docs }}
         {{ $isExternal := hasPrefix .URL "http" }}
         {{ if .HasChildren }}
-        <div class="navbar-item is-size-5-desktop has-dropdown is-hoverable">
+        <div class="docs-menu--desktop navbar-item is-size-5-desktop has-dropdown is-hoverable">
           <a class="navbar-link is-arrowless"{{ with .URL }} href="{{ . }}{{ $latest }}"{{ end }}>
             <span>
               {{ .Name }}