templates/hugo-saasify-theme
1
0
Fork 0
mirror of https://github.com/chaoming/hugo-saasify-theme.git synced 2025-04-20 18:31:53 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: improve mobile menu functionality and make it full width

Browse source
This commit is contained in:
Chaoming Li 2024-11-19 17:23:08 +11:00
parent f96661ac13
commit 956ab747b5
1 changed files with 69 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
layouts/partials/header.html
View file

@ -1,4 +1,6 @@
{{ $headerConfig := .Site.Params.header }} {{ $headerConfig := .Site.Params.header }}
<div class="mobile-menu-wrapper">
<input type="checkbox" id="nav-toggle" class="nav-toggle">
<header class="fixed w-full top-0 z-50 {{ with $headerConfig.background }}{{ . }}{{ else }}bg-white/80 backdrop-blur-sm{{ end }} {{ with $headerConfig.border }}{{ . }}{{ else }}border-b border-gray-100{{ end }}"> <header class="fixed w-full top-0 z-50 {{ with $headerConfig.background }}{{ . }}{{ else }}bg-white/80 backdrop-blur-sm{{ end }} {{ with $headerConfig.border }}{{ . }}{{ else }}border-b border-gray-100{{ end }}">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl"> <div class="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
<nav class="flex items-center justify-between h-20"> <nav class="flex items-center justify-between h-20">
@ -17,7 +19,7 @@
<!-- Navigation --> <!-- Navigation -->
<div class="hidden md:flex items-center {{ with $headerConfig.menu.spacing }}{{ . }}{{ else }}space-x-8{{ end }}"> <div class="hidden md:flex items-center {{ with $headerConfig.menu.spacing }}{{ . }}{{ else }}space-x-8{{ end }}">
{{ range .Site.Menus.main }} {{ range .Site.Menus.main }}
<a href="{{ .URL }}" class="{{ with $headerConfig.menu.linkClass }}{{ . }}{{ else }}text-gray-600 hover:text-primary-600 font-medium transition duration-200{{ end }}">{{ .Name }}</a> <a href="{{ .URL }}" class="{{ with $headerConfig.menu.linkClass }}{{ . }}{{ else }}text-gray-600 hover:text-primary-600 font-bold transition duration-200{{ end }}">{{ .Name }}</a>
{{ end }} {{ end }}
</div> </div>
@ -38,19 +40,22 @@
</div> </div>
{{ end }} {{ end }}
<!-- Mobile Menu Button --> <!-- Mobile Menu Toggle -->
<button class="md:hidden p-2 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-600 focus:ring-offset-2 transition-colors" id="mobile-menu-button" aria-label="Menu" onclick="document.getElementById('mobile-menu').classList.toggle('hidden')"> <div class="md:hidden">
<label for="nav-toggle" class="p-2 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-600 focus:ring-offset-2 transition-colors cursor-pointer">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg> </svg>
</button> </label>
</div>
</nav> </nav>
</div>
<!-- Mobile Menu --> <!-- Mobile Menu -->
<div class="md:hidden hidden" id="mobile-menu"> <div class="nav-content md:hidden w-full fixed left-0 right-0 top-20 bg-white border-t border-gray-100 shadow-lg">
<div class="py-4 space-y-4"> <div class="w-full px-6 py-4">
{{ range .Site.Menus.main }} {{ range .Site.Menus.main }}
<a href="{{ .URL }}" class="{{ with $headerConfig.menu.mobileLinkClass }}{{ . }}{{ else }}block text-gray-600 hover:text-primary-600 font-medium transition duration-200 py-2{{ end }}">{{ .Name }}</a> <a href="{{ .URL }}" class="{{ with $headerConfig.menu.mobileLinkClass }}{{ . }}{{ else }}block text-gray-600 hover:text-primary-600 font-bold transition duration-200 py-2{{ end }}">{{ .Name }}</a>
{{ end }} {{ end }}
{{ if not $headerConfig.hideButtons }} {{ if not $headerConfig.hideButtons }}
@ -70,5 +75,20 @@
{{ end }} {{ end }}
</div> </div>
</div> </div>
</div>
</header> </header>
<style>
.mobile-menu-wrapper {
position: relative;
}
.nav-toggle {
display: none;
}
.nav-content {
display: none;
}
.nav-toggle:checked ~ header .nav-content {
display: block;
}
</style>
</div>