final version for testing

README.md

@@ -33,7 +33,8 @@ Blowfish is designed to be a powerful, lightweight theme for [Hugo](https://gohu
 - Support for multiple authors
 - Support for series of articles
 - Flexible with any content types, taxonomies and menus
-- Support for header, footer, and nested menus
+- Support for header and footer menus
+- Additional support for nested menus
 - Multilingual content support inlcuding support for RTL languages
 - Ability to link to posts on third-party websites
 - Buymeacoffee integration

assets/css/compiled/main.css

@@ -1657,6 +1657,10 @@ select {
   flex-wrap: wrap;
 }
 
+.items-end {
+  align-items: flex-end;
+}
+
 .items-center {
   align-items: center;
 }
@@ -1691,6 +1695,12 @@ select {
   margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-y-3 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
+
 .place-self-center {
   place-self: center;
 }
@@ -1893,6 +1903,10 @@ select {
   padding: 0.25rem;
 }
 
+.p-5 {
+  padding: 1.25rem;
+}
+
 .p-0 {
   padding: 0px;
 }
@@ -2009,6 +2023,10 @@ select {
   padding-right: 24px;
 }
 
+.pt-2 {
+  padding-top: 0.5rem;
+}
+
 .pt-16 {
   padding-top: 4rem;
 }
@@ -2236,6 +2254,16 @@ 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);
@@ -3013,6 +3041,25 @@ body:has(#menu-controller:checked) {
   z-index: 100;
 }
 
+.nested-menu:hover + .menuhide {
+  visibility: visible;
+  opacity: 1;
+  transition: visibility 0.3s, opacity 0.3s ease-in-out ;
+}
+
+.menuhide:hover {
+  visibility: visible;
+  opacity: 1;
+  transition: visibility 0.3s, opacity 0.3s ease-in-out ;
+}
+
+.menuhide {
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility 0.3s, opacity 0.3s ease-in-out ;
+  z-index: 1000;
+}
+
 .first\:mt-8:first-child {
   margin-top: 2rem;
 }
@@ -3493,20 +3540,11 @@ body:has(#menu-controller:checked) {
     padding-right: 1.5rem;
   }
 
-  .sm\:py-10 {
-    padding-top: 2.5rem;
-    padding-bottom: 2.5rem;
-  }
-
   .sm\:py-24 {
     padding-top: 6rem;
     padding-bottom: 6rem;
   }
 
-  .sm\:pt-10 {
-    padding-top: 2.5rem;
-  }
-
   .sm\:pl-6 {
     padding-left: 1.5rem;
   }

assets/css/main.css

@@ -422,3 +422,22 @@ body:has(#menu-controller:checked) {
 .medium-zoom-image--opened {
   z-index: 100;
 }
+
+.nested-menu:hover + .menuhide {
+  visibility: visible;
+  opacity: 1;
+  transition: visibility 0.3s, opacity 0.3s ease-in-out ;
+}
+
+.menuhide:hover {
+  visibility: visible;
+  opacity: 1;
+  transition: visibility 0.3s, opacity 0.3s ease-in-out ;
+}
+
+.menuhide {
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility 0.3s, opacity 0.3s ease-in-out ;
+  z-index: 1000;
+}

assets/js/header.js

@@ -1,11 +0,0 @@
-function header_toggle_nested_menu(element) {
-  if (!element) {
-    throw new Error("Could not find button")
-  }
-  let parent_element = element.parentElement;
-  if(!parent_element) {
-    throw new Error("Could not get parent element from button")
-  }
-  let nested_menu = parent_element.querySelector(".header-nested-menu")
-  nested_menu.classList.toggle('hidden');
-}

config/_default/menus.en.toml

@@ -15,6 +15,22 @@
 #  pageRef = "posts"
 #  weight = 10
 
+#[[main]]
+#  name = "Parent"
+#  weight = 20
+
+#[[main]]
+#  name = "example sub-menu 1"
+#  parent = "Parent"
+#  pageRef = "posts"
+#  weight = 20
+
+#[[main]]
+#  name = "example sub-menu 2"
+#  parent = "Parent"
+#  pageRef = "posts"
+#  weight = 20
+
 #[[main]]
 #  name = "Categories"
 #  pageRef = "categories"

exampleSite/config/_default/menus.en.toml

@@ -16,25 +16,26 @@
   weight = 10
 
 [[main]]
-  name = "Parent"
+  name = "Nested Menu"
   pageRef = "samples"
   weight = 20
 
 [[main]]
-  name = "test1"
+  name = "sub-menu 1"
-  parent = "Parent"
+  parent = "Nested Menu"
   pageRef = "samples"
   weight = 20
 
 [[main]]
-  name = "test2"
+  name = "sub-menu 2"
-  parent = "Parent"
+  parent = "Nested Menu"
   pageRef = "samples"
   weight = 20
 
 [[main]]
-  name = "test3"
+  name = "sub-menu 3"
-  parent = "Parent"
+  parent = "Nested Menu"
+  pre = "github"
   pageRef = "samples"
   weight = 20
 

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

@@ -197,36 +197,33 @@ Both menus are completely optional and can be commented out if not required. Use
 
 ### Nested Menus
 
-bla bla bla
+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.
 
 ```toml
 # config/_default/menus.toml
 
 [[main]]
-  name = "Blog"
+  name = "Parent"
-  pageRef = "posts"
-  weight = 10
-
-[[main]]
-  name = "Topics"
-  pageRef = "topics"
   weight = 20
 
 [[main]]
-  pre = "github"
+  name = "sub-menu 1"
-  name = "GitHub"
+  parent = "Parent"
-  url = "https://github.com/nunocoracao/blowfish"
+  pageRef = "samples"
-  weight = 30
+  weight = 20
 
 [[main]]
-  identifier = "github2"
+  name = "sub-menu 2"
-  pre = "github"
+  parent = "Parent"
-  url = "https://github.com/nunocoracao/blowfish"
+  pageRef = "samples"
-  weight = 40
+  weight = 20
 
-[[footer]]
+[[main]]
-  name = "Privacy"
+  name = "sub-menu 3"
-  url = "https://external-link"
+  parent = "Parent"
+  pre = "github"
+  pageRef = "samples"
+  weight = 20
 ```
 
 ## Thumbnails & Backgrounds

layouts/partials/head.html

@@ -86,11 +86,6 @@
   <link rel="icon" type="image/png" sizes="16x16" href="{{ "favicon-16x16.png" | relURL }}" />
   <link rel="manifest" href="{{ "site.webmanifest" | relURL }}" />
   {{ end }}
-  {{/* Header */}}
-  {{ $headerLib := resources.Get "js/header.js" }}
-  {{ $headerLib := $headerLib | resources.Minify }}
-  {{ $headerJS := $headerLib | resources.Fingerprint "sha512" }}
-  <script defer type="text/javascript" src="{{ $headerJS.RelPermalink }}" integrity="{{ $headerJS.Data.Integrity }}"></script>
   {{/* Site Verification */}}
   {{ with .Site.Params.verification.google }}
   <meta name="google-site-verification" content="{{ . }}" />

layouts/partials/header/basic.html

@@ -17,7 +17,8 @@
     <div class="flex flex-1 items-center justify-between">
         <nav class="site-header-title flex space-x-3">
 
-            <a href="{{ "" | relLangURL }}" class="text-base font-medium text-gray-500 hover:text-gray-900">{{ .Site.Title | markdownify
+            <a href="{{ "" | relLangURL }}" class="text-base font-medium text-gray-500 hover:text-gray-900">{{
+                .Site.Title | markdownify
                 | emojify }}</a>
 
 
@@ -26,16 +27,15 @@
 
             {{ if .Site.Menus.main }}
             {{ range .Site.Menus.main }}
-
             {{ partial "header/header-option.html" . }}
+            {{ end }}
+            {{ end }}
 
-            {{ end }}
-            {{ end }}
             {{ partial "translations.html" . }}
 
             {{ 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,38 +94,21 @@
             <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 w-full px-6 py-6 mx-auto overflow-visible list-none ltr:text-right rtl:text-left max-w-7xl sm:px-14 md:px-24 lg:px-32 sm:py-10 sm:pt-10">
+                    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">
-                    <li class="mb-1">
+                    
-                        <span class="cursor-pointer inline-block align-text-bottom hover:text-primary-600 dark:hover:text-primary-400">{{ partial
+                    <li>
+                        <span
+                            class="cursor-pointer inline-block align-text-bottom hover:text-primary-600 dark:hover:text-primary-400">{{
+                            partial
                             "icon.html"
                             "xmark" }}</span>
                     </li>
 
                     {{ if .Site.Menus.main }}
                     {{ range .Site.Menus.main }}
-                    <li class="mb-1">
-                        <a {{ if or (strings.HasPrefix .URL "http:") (strings.HasPrefix .URL "https:") }} target="_blank"{{ end }} class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"
-                            href="{{ .URL }}" title="{{ .Title }}">
-                            <span class="inline-block align-text-bottom">{{ partial "icon.html" .Pre }}</span>
-                            {{ if and .Pre .Name }} &nbsp; {{ end }}
-                            {{ .Name | markdownify | emojify }}
-                        </a>
-                    </li>
-                    {{ end }}
-                    {{ end }}
                     
-                    {{ if .Site.Menus.subnavigation }}
+                    {{ partial "header/header-mobile-option.html" . }}
-                    <p>-</p>
+
-                    {{ range .Site.Menus.subnavigation }}
-                    <li class="mb-1">
-                      <a {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }} target="_blank" {{ end }}
-                          class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href="{{ .URL }}"
-                          title="{{ .Title }}">
-                        <span class="inline-block align-text-bottom">{{ partial "icon.html" .Pre }}</span>
-                        {{ if and .Pre .Name }} &nbsp; {{ end }}
-                        {{ .Name | markdownify | emojify }}
-                      </a>
-                    </li>
                     {{ end }}
                     {{ end }}
 
@@ -134,15 +117,3 @@
         </label>
     </div>
 </div>
-
-{{ if .Site.Menus.subnavigation }}
-<div class="site-header-menu-subnavigation flex items-center justify-between md:justify-start space-x-3">
-  <div class="flex flex-1 items-center justify-between">
-    <div class="hidden md:flex items-center space-x-5">
-      {{ range .Site.Menus.subnavigation }}
-        {{ partial "header/header-option.html" . }}
-      {{ end }}
-    </div>
-  </div>
-</div>
-{{ end }}

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

@@ -0,0 +1,30 @@
+<li class="mt-3">
+    <a class="flex items-center">
+        {{ if .Pre }}
+        <span {{ if and .Pre .Name}} style="margin-right:3px;" {{ end }}>
+            {{ partial "icon.html" .Pre }}
+        </span>
+        {{ end }}
+        <p class="text-xl font-xl text-gray-500 hover:text-gray-900" title="{{ .Title }}">
+            {{ .Name | markdownify | emojify }}
+        </p>
+        <span>
+            {{ partial "icon.html" "chevron-down" }}
+        </span>
+    </a>
+</li>
+{{ range .Children }}
+<li class="mt-2">
+    <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 }}>
+            {{ partial "icon.html" .Pre }}
+        </span>
+        {{ end }}
+        <p class="text-sm font-small text-gray-500 hover:text-gray-900" title="{{ .Title }}">
+            {{ .Name | markdownify | emojify }}
+        </p>
+    </a>
+</li>
+{{ end }}

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

@@ -0,0 +1,13 @@
+<li class="mt-3">
+    <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 }}>
+            {{ partial "icon.html" .Pre }}
+        </span>
+        {{ end }}
+        <p class="text-xl font-xl text-gray-500 hover:text-gray-900" title="{{ .Title }}">
+            {{ .Name | markdownify | emojify }}
+        </p>
+    </a>
+</li>

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

@@ -0,0 +1,5 @@
+{{ if .HasChildren }} 
+  {{ partial "header/header-mobile-option-nested.html" . }}
+{{ else }}
+  {{ partial "header/header-mobile-option-simple.html" . }}
+{{ end }}

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

@@ -1,8 +1,45 @@
-<div class="relative">
+<div>
+  <div class="cursor-pointer flex items-center nested-menu">
+    {{ if .Pre }}
+    <span {{ if and .Pre .Name}} style="margin-right:3px;" {{ end }}>
+      {{ partial "icon.html" .Pre }}
+    </span>
+    {{ end }}
+    <a class="text-base font-medium text-gray-500 hover:text-gray-900" title="{{ .Title }}">
+      {{ .Name | markdownify | emojify }}
+    </a>
+    <span>
+      {{ partial "icon.html" "chevron-down" }}
+    </span>
+  </div>
+  <div class="absolute menuhide">
+    <div class="pt-2 p-5 mt-2 rounded-xl backdrop-blur shadow-2xl">
+      <div class="flex flex-col space-y-3">
+        {{ range .Children }}
+        <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 }}>
+            {{ 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>
+        {{ end }}
+      </div>
+    </div>
+  </div>
+</div>
+
+
+
+<!--div class="relative">
   <button
     type="button"
     class="header-toggle-nested-menu-button text-base hover:text-primary-600 dark:hover:text-primary-400"
-    aria-expanded="false"
+    aria-expanded="true"
     onclick="header_toggle_nested_menu(this)"
   >
     <div class="hidden md:flex items-center">
@@ -29,4 +66,4 @@
       </div>
     </div>
   </div>
-</div>
+</div-->

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

@@ -1,5 +1,11 @@
-<a href="{{ .URL }}" {{ if or (strings.HasPrefix .URL "http:") (strings.HasPrefix .URL "https:") }} target="_blank"{{ end }} class="text-base font-medium text-gray-500 hover:text-gray-900" title="{{ .Title }}">
+<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 }}>
         {{ partial "icon.html" .Pre }}
-    {{ if and .Pre .Name }} &nbsp; {{ end }}
+    </span>
+    {{ end }}
+    <p class="text-base font-medium text-gray-500 hover:text-gray-900" title="{{ .Title }}">
         {{ .Name | markdownify | emojify }}
+    </p>
 </a>