mirror of
https://github.com/chaoming/hugo-saasify-theme.git
synced 2025-04-20 07:11:52 +02:00
fix: improve mobile menu functionality and make it full width
This commit is contained in:
Chaoming Li
parent
f96661ac13
commit
956ab747b5
1 changed files with 69 additions and 49 deletions
|
|
@ -1,56 +1,61 @@
|
||||||
{{ $headerConfig := .Site.Params.header }}
|
{{ $headerConfig := .Site.Params.header }}
|
||||||
<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="mobile-menu-wrapper">
|
||||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
|
<input type="checkbox" id="nav-toggle" class="nav-toggle">
|
||||||
<nav class="flex items-center justify-between h-20">
|
<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 }}">
|
||||||
<!-- Logo and Title -->
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
|
||||||
<a href="{{ .Site.BaseURL }}" class="flex items-center space-x-4">
|
<nav class="flex items-center justify-between h-20">
|
||||||
{{ with $headerConfig.logo }}
|
<!-- Logo and Title -->
|
||||||
<img src="{{ .src | relURL }}" alt="{{ $.Site.Title }}" class="{{ with .class }}{{ . }}{{ else }}h-20{{ end }}">
|
<a href="{{ .Site.BaseURL }}" class="flex items-center space-x-4">
|
||||||
{{ else }}
|
{{ with $headerConfig.logo }}
|
||||||
<span class="text-2xl font-bold text-gray-900">{{ .Site.Title }}</span>
|
<img src="{{ .src | relURL }}" alt="{{ $.Site.Title }}" class="{{ with .class }}{{ . }}{{ else }}h-20{{ end }}">
|
||||||
{{ end }}
|
{{ else }}
|
||||||
{{ if .Site.Title }}
|
<span class="text-2xl font-bold text-gray-900">{{ .Site.Title }}</span>
|
||||||
<span class="text-2xl font-semibold text-gray-800">{{ .Site.Title }}</span>
|
{{ end }}
|
||||||
{{ end }}
|
{{ if .Site.Title }}
|
||||||
</a>
|
<span class="text-2xl font-semibold text-gray-800">{{ .Site.Title }}</span>
|
||||||
|
{{ end }}
|
||||||
<!-- Navigation -->
|
|
||||||
<div class="hidden md:flex items-center {{ with $headerConfig.menu.spacing }}{{ . }}{{ else }}space-x-8{{ end }}">
|
|
||||||
{{ 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>
|
|
||||||
{{ end }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- CTA Buttons -->
|
|
||||||
{{ if not $headerConfig.hideButtons }}
|
|
||||||
<div class="hidden md:flex items-center space-x-4">
|
|
||||||
{{ with $headerConfig.buttons.signIn }}
|
|
||||||
<a href="{{ .url | default "#" }}" class="{{ with .class }}{{ . }}{{ else }}inline-flex items-center justify-center px-6 py-3 rounded-lg font-medium transition duration-200 ease-in-out border-2 border-gray-200 hover:border-primary-600 hover:text-primary-600{{ end }}">
|
|
||||||
{{ .text | default "Sign in" }}
|
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
<!-- Navigation -->
|
||||||
|
<div class="hidden md:flex items-center {{ with $headerConfig.menu.spacing }}{{ . }}{{ else }}space-x-8{{ end }}">
|
||||||
|
{{ range .Site.Menus.main }}
|
||||||
|
<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 }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- CTA Buttons -->
|
||||||
|
{{ if not $headerConfig.hideButtons }}
|
||||||
|
<div class="hidden md:flex items-center space-x-4">
|
||||||
|
{{ with $headerConfig.buttons.signIn }}
|
||||||
|
<a href="{{ .url | default "#" }}" class="{{ with .class }}{{ . }}{{ else }}inline-flex items-center justify-center px-6 py-3 rounded-lg font-medium transition duration-200 ease-in-out border-2 border-gray-200 hover:border-primary-600 hover:text-primary-600{{ end }}">
|
||||||
|
{{ .text | default "Sign in" }}
|
||||||
|
</a>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
{{ with $headerConfig.buttons.getStarted }}
|
||||||
|
<a href="{{ .url | default "#" }}" class="{{ with .class }}{{ . }}{{ else }}inline-flex items-center justify-center px-6 py-3 rounded-lg font-medium transition duration-200 ease-in-out bg-primary-600 text-white hover:bg-primary-700 hover:scale-105{{ end }}">
|
||||||
|
{{ .text | default "Get Started" }}
|
||||||
|
</a>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
{{ with $headerConfig.buttons.getStarted }}
|
<!-- Mobile Menu Toggle -->
|
||||||
<a href="{{ .url | default "#" }}" class="{{ with .class }}{{ . }}{{ else }}inline-flex items-center justify-center px-6 py-3 rounded-lg font-medium transition duration-200 ease-in-out bg-primary-600 text-white hover:bg-primary-700 hover:scale-105{{ end }}">
|
<div class="md:hidden">
|
||||||
{{ .text | default "Get Started" }}
|
<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">
|
||||||
</a>
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
{{ end }}
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
||||||
</div>
|
</svg>
|
||||||
{{ end }}
|
</label>
|
||||||
|
</div>
|
||||||
<!-- Mobile Menu Button -->
|
</nav>
|
||||||
<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>
|
||||||
<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>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- 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>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue