Merge pull request #210 from nunocoracao/201-fixed-main-menu

added new fixed header

assets/css/compiled/main.css

@@ -1599,6 +1599,14 @@ select {
   margin-right: -0.5rem;
 }
 
+.ml-auto {
+  margin-left: auto;
+}
+
+.mr-auto {
+  margin-right: auto;
+}
+
 .mb-0 {
   margin-bottom: 0px;
 }
@@ -1651,6 +1659,14 @@ select {
   height: 2rem;
 }
 
+.h-\[120px\] {
+  height: 120px;
+}
+
+.h-\[100px\] {
+  height: 100px;
+}
+
 .h-\[250px\] {
   height: 250px;
 }
@@ -1683,6 +1699,10 @@ select {
   min-height: 0px;
 }
 
+.min-h-\[148px\] {
+  min-height: 148px;
+}
+
 .w-12 {
   width: 3rem;
 }
@@ -1755,6 +1775,10 @@ select {
   max-width: 5rem;
 }
 
+.max-w-\[64rem\] {
+  max-width: 64rem;
+}
+
 .max-w-xl {
   max-width: 36rem;
 }
@@ -2154,6 +2178,14 @@ select {
   padding-bottom: 1rem;
 }
 
+.pl-\[24px\] {
+  padding-left: 24px;
+}
+
+.pr-\[24px\] {
+  padding-right: 24px;
+}
+
 .pt-16 {
   padding-top: 4rem;
 }
@@ -3723,6 +3755,10 @@ body:has(#menu-controller:checked) {
     top: 2.5rem;
   }
 
+  .lg\:top-\[140px\] {
+    top: 140px;
+  }
+
   .lg\:left-0 {
     left: 0px;
   }

config/_default/params.toml

@@ -15,6 +15,9 @@ enableCodeCopy = true
 # mainSections = ["section1", "section2"]
 # robots = ""
 
+[header]
+  layout = "basic" # valid options: basic, fixed
+
 [footer]
  # showMenu = true
   showCopyright = true

exampleSite/config/_default/params.toml

@@ -15,6 +15,9 @@ enableCodeCopy = true
 mainSections = ["docs"]
 # robots = ""
 
+[header]
+  layout = "fixed" # valid options: basic, fixed
+
 [footer]
   showMenu = true
   showCopyright = true

layouts/_default/single.html

@@ -24,7 +24,7 @@
     {{ if and (.Params.showTableOfContents | default (.Site.Params.article.showTableOfContents | default false)) (in
     .TableOfContents "<ul") }} 
     <div class="order-first sm:max-w-prose lg:ml-auto px-0 lg:order-last lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8">
-      <div class="toc ltr:pl-5 rtl:pr-5 print:hidden lg:sticky lg:top-10">
+      <div class="toc ltr:pl-5 rtl:pr-5 print:hidden lg:sticky {{ if eq .Site.Params.header.layout "fixed" }} lg:top-[140px] {{ else }} lg:top-10 {{ end }}">
         {{ partial "toc.html" . }}
       </div>
       </div>

layouts/partials/header/basic.html

@@ -122,30 +122,3 @@
         </label>
     </div>
 </div>
-
-
-<div id="mobile-menu"
-    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 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 class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"
-                href="{{ .URL }}" title="{{ .Title }}">{{ .Name | markdownify | emojify }}</a>
-        </li>
-        {{ end }}
-        {{ end }}
-        {{ if .Site.Params.enableSearch | default false }}
-        <li>
-            <button id="search-button-mobile" class="text-base hover:text-primary-600 dark:hover:text-primary-400">
-                {{ partial "icon.html" "search" }}
-            </button>
-        </li>
-        {{ end }}
-    </ul>
-</div>

layouts/partials/header/fixed.html

@@ -0,0 +1,145 @@
+<div class="min-h-[148px]"></div>
+<div class="fixed inset-x-0 h-[120px] pl-[24px] pr-[24px] sbackdrop-blur-xl sshadown-2xl" style="z-index:100">
+    <div id="menu-blur" class="absolute opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl shadow-2xl"></div>
+    <div class="relative max-w-[64rem] h-[100px] ml-auto mr-auto">
+            <div style="padding-left:0;padding-right:0"
+                class="flex items-center justify-between px-4 py-6 sm:px-6 md:justify-start space-x-3">
+                {{ if .Site.Params.Logo -}}
+                {{ $logo := resources.Get .Site.Params.Logo }}
+                {{ if $logo }}
+                <div>
+                    <a href="{{ "" | relLangURL }}" class="flex">
+                        <span class="sr-only">{{ .Site.Title | markdownify | emojify }}</span>
+
+                        <img src="{{ $logo.RelPermalink }}" width="{{ div $logo.Width 2 }}"
+                            height="{{ div $logo.Height 2 }}"
+                            class="max-h-[5rem] max-w-[5rem] object-scale-down object-left nozoom"
+                            alt="{{ .Site.Title }}" />
+
+                    </a>
+                </div>
+                {{ end }}
+                {{- end }}
+                <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
+                            | emojify }}</a>
+
+
+                    </nav>
+                    <div 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>
+                        {{ 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" }}">
+                            {{ partial "icon.html" "search" }}
+                        </button>
+                        {{ end }}
+
+
+                        {{/* Appearance switch */}}
+                        {{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
+                        <div
+                            class="{{ if .Site.Params.footer.showScrollToTop | default true -}} ltr:mr-14 rtl:ml-14 {{- end }} cursor-pointer text-sm text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400">
+                            <button id="appearance-switcher" type="button">
+                                <div class="flex items-center justify-center h-12 dark:hidden">
+                                    {{ partial "icon.html" "moon" }}
+                                </div>
+                                <div class="items-center justify-center hidden h-12 dark:flex">
+                                    {{ partial "icon.html" "sun" }}
+                                </div>
+                            </button>
+                        </div>
+                        {{ end }}
+
+                    </div>
+                    <div class="flex md:hidden items-center space-x-5 md:ml-12">
+
+                        <span></span>
+
+                        {{ partial "translations.html" . }}
+
+                        {{ 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" }}">
+                            {{ partial "icon.html" "search" }}
+                        </button>
+                        {{ end }}
+
+                        {{/* Appearance switch */}}
+                        {{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
+                        <button id="appearance-switcher-mobile" type="button" style="margin-right:5px">
+                            <div class="flex items-center justify-center h-12 dark:hidden">
+                                {{ partial "icon.html" "moon" }}
+                            </div>
+                            <div class="items-center justify-center hidden h-12 dark:flex">
+                                {{ partial "icon.html" "sun" }}
+                            </div>
+                        </button>
+                        {{ end }}
+
+                    </div>
+                </div>
+                <div class="-my-2 -mr-2 md:hidden">
+
+                    <label id="menu-button" for="menu-controller" class="block">
+                        <input type="checkbox" id="menu-controller" class="hidden" />
+                        <div class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400">
+                            {{ partial "icon.html" "bars" }}
+                        </div>
+                        <div id="menu-wrapper" style="padding-top:25px;"
+                            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 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 }}">
+                                        {{ partial "icon.html" .Pre }}
+                                        {{ if and .Pre .Name }} &nbsp; {{ end }}
+                                        {{ .Name | markdownify | emojify }}
+                                    </a>
+                                </li>
+                                {{ end }}
+                                {{ end }}
+
+                            </ul>
+                        </div>
+                    </label>
+                </div>
+            </div>
+        </div>
+</div>
+<script>
+    window.addEventListener('scroll', function (e) {
+        var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+        var background_blur = document.getElementById('menu-blur');
+        background_blur.style.opacity = (scroll / 300)
+    });
+</script>