Merge pull request #377 from nunocoracao/subnavigation-feature-branch

✨ Add sub-navigation and nested menus

layouts/partials/head.html

@@ -147,4 +147,4 @@
   </script>
   {{ end }}
   {{ end }}
-</head>
+</head>

layouts/partials/header/basic.html

@@ -1,6 +1,6 @@
 <div style="padding-left:0;padding-right:0;padding-top:2px;padding-bottom:3px"
     class="flex items-center justify-between px-4 py-6 sm:px-6 md:justify-start space-x-3">
-    {{ if .Site.Params.Logo -}}
+    {{ if .Site.Params.Logo }}
     {{ $logo := resources.Get .Site.Params.Logo }}
     {{ if $logo }}
     <div>
@@ -17,20 +17,17 @@
     <div class="flex flex-1 items-center justify-between">
         <nav class="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>
-            
-            
+
+
         </nav>
-        <div class="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 }}
-            <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 }}">
-                {{ partial "icon.html" .Pre }}
-                {{ if and .Pre .Name }} &nbsp; {{ end }}
-                {{ .Name | markdownify | emojify }}
-            </a>
+            {{ partial "header/header-option.html" . }}
             {{ end }}
             {{ end }}
 
@@ -38,12 +35,12 @@
 
             {{ 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 }}
 
-            
+
             {{/* Appearance switch */}}
             {{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
             <div
@@ -59,7 +56,7 @@
             </div>
             {{ end }}
 
-        </div>
+        </nav>
         <div class="flex md:hidden items-center space-x-5 md:ml-12">
 
             <span></span>
@@ -68,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 }}
@@ -97,28 +94,71 @@
             <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">
-                    <li class="mb-1">
-                        <span class="cursor-pointer inline-block align-text-bottom hover:text-primary-600 dark:hover:text-primary-400">{{ partial
+                    class="flex space-y-2 mt-3 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
+                            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>
+
+                    {{ partial "header/header-mobile-option.html" . }}
+
                     {{ end }}
                     {{ 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" {{ if .Site.Params.Logo }} style="margin-top:-15px" {{ end }}>
+    <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

@@ -0,0 +1,31 @@
+<li class="mt-1">
+    <a class="flex items-center">
+        {{ if .Pre }}
+        <span {{ if and .Pre .Name}} class="mr-1" {{ end }}>
+            {{ partial "icon.html" .Pre }}
+        </span>
+        {{ end }}
+        <p class="text-bg font-bg 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-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-1" {{ 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 }}
+<li class="mb-2"></li>

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

@@ -0,0 +1,13 @@
+<li class="mt-1">
+    <a href="{{ .URL }}" {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:"
+        ) }} target="_blank" {{ end }} class="flex items-center">
+        {{ if .Pre }}
+        <div {{ if and .Pre .Name}} class="mr-2" {{ end }}>
+            {{ partial "icon.html" .Pre }}
+        </div>
+        {{ end }}
+        <p class="text-bg font-bg 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

@@ -0,0 +1,34 @@
+<div>
+  <div class="cursor-pointer flex items-center nested-menu">
+    {{ if .Pre }}
+    <span {{ if and .Pre .Name}} class="mr-1" {{ 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}} class="mr-1" {{ 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>

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

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

layouts/partials/header/header-option.html

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