recovered sub-navigation

assets/css/compiled/main.css

@@ -1425,6 +1425,10 @@ select {
   margin-right: -0.5rem;
 }
 
+.mr-1 {
+  margin-right: 0.25rem;
+}
+
 .ml-auto {
   margin-left: auto;
 }
@@ -2015,6 +2019,10 @@ select {
   padding-left: 0.5rem;
 }
 
+.pb-3 {
+  padding-bottom: 0.75rem;
+}
+
 .pl-\[24px\] {
   padding-left: 24px;
 }
@@ -2114,6 +2122,10 @@ select {
   font-weight: 500;
 }
 
+.font-light {
+  font-weight: 300;
+}
+
 .uppercase {
   text-transform: uppercase;
 }
@@ -2254,16 +2266,6 @@ select {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.ring-1 {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
-.ring-opacity-5 {
-  --tw-ring-opacity: 0.05;
-}
-
 .backdrop-blur {
   --tw-backdrop-blur: blur(8px);
   -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);

exampleSite/config/_default/menus.en.toml

@@ -39,6 +39,28 @@
   pageRef = "samples"
   weight = 20
 
+[[subnavigation]]
+  name = "An interesting topic"
+  pageRef = "tags/interesting-topic"
+  weight = 10
+
+[[subnavigation]]
+  name = "My Awesome Category"
+  pre = "github"
+  pageRef = "categories/awesome"
+  weight = 20
+
+[[subnavigation]]
+  name = "YOLO"
+  pageRef = "categories/awesome"
+  weight = 20
+
+[[subnavigation]]
+  name = "My Awesome Category asd"
+  pre = "twitter"
+  pageRef = "categories/awesome"
+  weight = 20
+
 [[main]]
   name = "Samples"
   pageRef = "samples"

exampleSite/content/docs/getting-started/index.md

@@ -195,7 +195,7 @@ Menu links will be sorted from lowest to highest `weight`, and then alphabetical
 
 Both menus are completely optional and can be commented out if not required. Use the template provided in the file as a guide.
 
-### Nested Menus
+### Nested menus
 
 The theme also supports nested menus. In order to use them you just need to define a parent entry in `menu.toml` and its sub-menus using the `parent` parameter to reference the parent. All properties can be used for sub-menus. Note that `pageRef` and `url` will be ignored for the parent entry. Nested menus is only available in the main menu not for the footer.
 
@@ -226,6 +226,26 @@ The theme also supports nested menus. In order to use them you just need to defi
   weight = 20
 ```
 
+### Sub-Navigation menu
+
+Additionally, you can also configure a sub-navigation menu. Just define new menu entries as `subnavigation` in `menu.toml`. This will render a second line with caregories below the main header menu.
+
+```toml
+# config/_default/menus.toml
+
+[[subnavigation]]
+  name = "An interesting topic"
+  pageRef = "tags/interesting-topic"
+  weight = 10
+
+[[subnavigation]]
+  name = "My Awesome Category"
+  pageRef = "categories/awesome"
+  weight = 20
+```
+
+
+
 ## Thumbnails & Backgrounds
 
 Blowfish was built so it would be easy to add visual support to your articles. If your familiar with Hugo article strucutre, you just need to place an image file (almost all formats are supported bue we recommend `.png` or `.jpg`) that starts with `feature*` inside your article folder. And that's it, Blowfish will then able to both use the image as a thumbnail within your website as well as for <a target="_blank" href="https://oembed.com/">oEmbed</a> cards across social platforms. 

layouts/partials/header/basic.html

@@ -23,7 +23,7 @@
 
 
         </nav>
-        <nav class="site-header-menu-main hidden md:flex items-center space-x-5 md:ml-12">
+        <nav class="hidden md:flex items-center space-x-5 md:ml-12">
 
             {{ if .Site.Menus.main }}
             {{ range .Site.Menus.main }}
@@ -35,7 +35,7 @@
 
             {{ if .Site.Params.enableSearch | default false }}
             <button id="search-button" class="text-base hover:text-primary-600 dark:hover:text-primary-400"
-                title="{{ i18n "search.open_button_title" }}">
+                title="{{ i18n " search.open_button_title" }}">
                 {{ partial "icon.html" "search" }}
             </button>
             {{ end }}
@@ -65,7 +65,7 @@
 
             {{ if .Site.Params.enableSearch | default false }}
             <button id="search-button-mobile" class="text-base hover:text-primary-600 dark:hover:text-primary-400"
-                title="{{ i18n "search.open_button_title" }}">
+                title="{{ i18n " search.open_button_title" }}">
                 {{ partial "icon.html" "search" }}
             </button>
             {{ end }}
@@ -94,7 +94,7 @@
             <div id="menu-wrapper" style="padding-top:5px;"
                 class="fixed inset-0 z-30 invisible w-screen h-screen m-auto overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50">
                 <ul
-                    class="flex movedown flex-col items-end w-full px-6 py-6 mx-auto overflow-visible list-none ltr:text-right rtl:text-left max-w-7xl">
+                    class="flex mt-4 flex-col items-end w-full px-6 py-6 mx-auto overflow-visible list-none ltr:text-right rtl:text-left max-w-7xl">
 
                     <li>
                         <span
@@ -113,7 +113,53 @@
                     {{ end }}
 
                 </ul>
+                {{ if .Site.Menus.subnavigation }}
+
+                <hr>
+                <ul
+                    class="flex mt-4 flex-col items-end w-full px-6 py-6 mx-auto overflow-visible list-none ltr:text-right rtl:text-left max-w-7xl">
+
+
+                    {{ range .Site.Menus.subnavigation }}
+                    <li class="mb-1">
+                        <a href="{{ .URL }}" {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:"
+                            ) }} target="_blank" {{ end }} class="flex items-center">
+                            {{ if .Pre }}
+                            <span {{ if and .Pre .Name}} class="mr-3" {{ end }}>
+                                {{ partial "icon.html" .Pre }}
+                            </span>
+                            {{ end }}
+                            <p class="text-sm font-sm text-gray-500 hover:text-gray-900" title="{{ .Title }}">
+                                {{ .Name | markdownify | emojify }}
+                            </p>
+                        </a>
+                    </li>
+                    {{ end }}
+
+                </ul>
+                {{ end }}
+
             </div>
         </label>
     </div>
 </div>
+
+{{ if .Site.Menus.subnavigation }}
+<div class="flex pb-3 flex-col items-end justify-between md:justify-start space-x-3" style="margin-top:-15px">
+    <div class="hidden md:flex items-center space-x-5">
+        {{ range .Site.Menus.subnavigation }}
+        <a href="{{ .URL }}" {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
+            target="_blank" {{ end }} class="flex items-center">
+            {{ if .Pre }}
+            <span {{ if and .Pre .Name}} class="mr-1" {{ end }}>
+                {{ partial "icon.html" .Pre }}
+            </span>
+            {{ end }}
+            <p class="text-xs font-light text-gray-500 hover:text-gray-900" title="{{ .Title }}">
+                {{ .Name | markdownify | emojify }}
+            </p>
+        </a>
+        {{ end }}
+    </div>
+</div>
+{{ end }}

layouts/partials/header/header-mobile-option-nested.html

@@ -1,11 +1,11 @@
 <li class="mt-3">
     <a class="flex items-center">
         {{ if .Pre }}
-        <span {{ if and .Pre .Name}} style="margin-right:3px;" {{ end }}>
+        <span {{ if and .Pre .Name}} class="mr-1" {{ end }}>
             {{ partial "icon.html" .Pre }}
         </span>
         {{ end }}
-        <p class="text-xl font-xl text-gray-500 hover:text-gray-900" title="{{ .Title }}">
+        <p class="text-bg font-bg text-gray-500 hover:text-gray-900" title="{{ .Title }}">
             {{ .Name | markdownify | emojify }}
         </p>
         <span>
@@ -18,7 +18,7 @@
     <a href="{{ .URL }}" {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:"
         ) }} target="_blank" {{ end }} class="flex items-center">
         {{ if .Pre }}
-        <span {{ if and .Pre .Name}} style="margin-right:3px;" {{ end }}>
+        <span {{ if and .Pre .Name}} class="mr-1" {{ end }}>
             {{ partial "icon.html" .Pre }}
         </span>
         {{ end }}

layouts/partials/header/header-mobile-option-simple.html

@@ -2,11 +2,11 @@
     <a href="{{ .URL }}" {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:"
         ) }} target="_blank" {{ end }} class="flex items-center">
         {{ if .Pre }}
-        <span {{ if and .Pre .Name}} style="margin-right:3px;" {{ end }}>
+        <span {{ if and .Pre .Name}} class="mr-2" {{ end }}>
             {{ partial "icon.html" .Pre }}
         </span>
         {{ end }}
-        <p class="text-xl font-xl text-gray-500 hover:text-gray-900" title="{{ .Title }}">
+        <p class="text-bg font-bg text-gray-500 hover:text-gray-900" title="{{ .Title }}">
             {{ .Name | markdownify | emojify }}
         </p>
     </a>

layouts/partials/header/header-option-nested.html

@@ -1,7 +1,7 @@
 <div>
   <div class="cursor-pointer flex items-center nested-menu">
     {{ if .Pre }}
-    <span {{ if and .Pre .Name}} style="margin-right:3px;" {{ end }}>
+    <span {{ if and .Pre .Name}} class="mr-1" {{ end }}>
       {{ partial "icon.html" .Pre }}
     </span>
     {{ end }}
@@ -19,7 +19,7 @@
         <a href="{{ .URL }}" {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
           target="_blank" {{ end }} class="flex items-center">
           {{ if .Pre }}
-          <span {{ if and .Pre .Name}} style="margin-right:3px;" {{ end }}>
+          <span {{ if and .Pre .Name}} class="mr-1" {{ end }}>
             {{ partial "icon.html" .Pre }}
           </span>
           {{ end }}

layouts/partials/header/header-option-simple.html

@@ -1,7 +1,7 @@
 <a href="{{ .URL }}" {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }} target="_blank" {{
     end }} class="flex items-center">
     {{ if .Pre }}
-    <span {{ if and .Pre .Name}} style="margin-right:3px;" {{ end }}>
+    <span {{ if and .Pre .Name}} class="mr-1" {{ end }}>
         {{ partial "icon.html" .Pre }}
     </span>
     {{ end }}