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: resolve header issues with mobile menu, container, and accessibility

Browse source
This commit is contained in:
Chaoming Li 2024-11-18 10:17:48 +11:00
parent 54801d5d3b
commit 5f7ab531f8
1 changed files with 4 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
layouts/partials/header.html
View file

@ -1,6 +1,6 @@
{{ $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 }}"> <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"> <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">
<!-- Logo --> <!-- Logo -->
<a href="{{ .Site.BaseURL }}" class="flex items-center"> <a href="{{ .Site.BaseURL }}" class="flex items-center">
@ -36,7 +36,7 @@
{{ end }} {{ end }}
<!-- Mobile Menu Button --> <!-- Mobile Menu Button -->
<button class="md:hidden p-2" id="mobile-menu-button" aria-label="Menu"> <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')">
<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>
@ -53,13 +53,13 @@
{{ if not $headerConfig.hideButtons }} {{ if not $headerConfig.hideButtons }}
<div class="pt-4 space-y-4"> <div class="pt-4 space-y-4">
{{ with $headerConfig.buttons.signIn }} {{ with $headerConfig.buttons.signIn }}
<a href="{{ .url | default "#" }}" class="{{ with .mobileClass }}{{ . }}{{ else }}block text-center 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 }}"> <a href="{{ .url | default "#" }}" class="{{ with .mobileClass }}{{ . }}{{ else }}block text-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" }} {{ .text | default "Sign in" }}
</a> </a>
{{ end }} {{ end }}
{{ with $headerConfig.buttons.getStarted }} {{ with $headerConfig.buttons.getStarted }}
<a href="{{ .url | default "#" }}" class="{{ with .mobileClass }}{{ . }}{{ else }}block text-center 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 }}"> <a href="{{ .url | default "#" }}" class="{{ with .mobileClass }}{{ . }}{{ else }}block text-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" }} {{ .text | default "Get Started" }}
</a> </a>
{{ end }} {{ end }}