Merge pull request #642 from h-enk/navbar-dropdown

Adds support for sub navigation main menu

assets/scss/common/_dark.scss

@@ -527,3 +527,19 @@ $navbar-dark-active-color:          $link-color-dark;
     border-color: $border-dark;
   }
 }
+
+[data-dark-mode] .dropdown-menu.dropdown-menu-main {
+  background: $body-overlay-dark;
+}
+
+[data-dark-mode] .dropdown-menu-main .dropdown-item {
+  color: $body-color-dark;
+}
+
+[data-dark-mode] .dropdown-menu-main .dropdown-item:hover {
+  color: $link-color-dark;
+}
+
+[data-dark-mode] .dropdown-menu-main .dropdown-item.active {
+  color: $link-color-dark;
+}

assets/scss/components/_buttons.scss

@@ -218,3 +218,30 @@ pre {
   margin-left: -0.1875rem;
   margin-right: -0.3125rem;
 }
+
+.dropdown-menu.dropdown-menu-main {
+  width: 100%;
+}
+
+.dropdown-menu-main .dropdown-item {
+  color: inherit;
+  font-size: $font-size-base;
+  font-weight: 400;
+  text-decoration: none;
+}
+
+.dropdown-menu-main .dropdown-item:hover {
+  background-color: transparent;
+  color: $primary;
+}
+
+.dropdown-menu-main .dropdown-item.active {
+  color: $primary;
+  font-weight: 400;
+  text-decoration: none;
+  background-color: inherit;
+}
+
+.dropdown-menu-main .dropdown-item.active:hover {
+  background-color: transparent;
+}

config/_default/menus/menus.en.toml

@@ -44,6 +44,26 @@
   url = "/blog/"
   weight = 20
 
+[[main]]
+  name = "Get Started"
+  weight = 30
+  identifier = "get-started"
+  url = "/docs/prologue/introduction/"
+
+[[main]]
+  name = "Quick Start"
+  weight = 40
+  identifier = "quick-start"
+  url = "/docs/prologue/quick-start/"
+  parent = "get-started"
+
+[[main]]
+  name = "Tutorial"
+  weight = 50
+  identifier = "tutorial"
+  url = "https://getdoks.org/tutorial/introduction/"
+  parent = "get-started"
+
 [[social]]
   name = "GitHub"
   pre = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-github\"><path d=\"M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22\"></path></svg>"

layouts/partials/header/header.html

@@ -34,9 +34,26 @@
             {{- $active = or $active (eq .Name $current.Title) -}}
             {{- $active = or $active (and (eq .Name ($section | humanize)) (eq $current.Section $section)) -}}
             {{- $active = or $active (and (eq .Name "Blog") (eq $current.Section "blog" "contributors")) -}}
+            {{ if .HasChildren }}
+              <li class="nav-item dropdown">
+                <a class="nav-link dropdown-toggle ps-0 py-1" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                  {{ .Name }}
+                  <span class="dropdown-caret"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg></span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-main shadow rounded border-0" aria-labelledby="navbarDropdownMenuLink">
+                  {{ range .Children -}}
+                  {{- $active = eq .Name $current.Title -}}
+                    <li>
+                      <a class="dropdown-item{{ if $active }} active{{ end }}" href="{{ .URL | relLangURL }}"{{ if $active }} aria-current="true"{{ end }}>{{ .Name }}</a>
+                    </li>
+                  {{ end -}}
+                </ul>
+              </li>
+            {{ else }}
               <li class="nav-item">
                 <a class="nav-link ps-0 py-1{{ if $active }} active{{ end }}" href="{{ .URL | relLangURL }}">{{ .Name }}</a>
               </li>
+            {{ end }}
           {{ end -}}
         </ul>
         <hr class="text-black-50 my-4 d-md-none">