hugo-saasify-theme/layouts/partials/header.html

{{ $headerConfig := .Site.Params.header }}
{{ $dropdownConfig := $headerConfig.menu.dropdown }}
<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 }}">
        <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">
                <!-- Logo and Title -->
                <a href="{{ .Site.BaseURL }}" class="flex items-center space-x-4">
                    {{ with $headerConfig.logo }}
                        <img src="{{ .src | relURL }}" alt="{{ $.Site.Title }}" class="{{ with .class }}{{ . }}{{ else }}h-12{{ end }}">
                    {{ else }}
                        <span class="text-3xl font-bold text-gray-900">{{ .Site.Title }}</span>
                    {{ end }}
                    {{ if .Site.Title }}
                        <span class="text-3xl font-semibold text-gray-800">{{ .Site.Title }}</span>
                    {{ end }}
                </a>

                <!-- Navigation -->
                <div class="hidden md:flex items-center {{ with $headerConfig.menu.spacing }}{{ . }}{{ else }}space-x-8{{ end }}">
                    {{ range .Site.Menus.main }}
                        {{ if .Params.has_submenu }}
                        <div class="relative group">
                            <button class="flex items-center {{ with $headerConfig.menu.linkClass }}{{ . }}{{ else }}text-base text-gray-900 hover:text-primary-600 font-bold transition duration-200{{ end }}">
                                {{ .Name }}
                                <svg class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                </svg>
                            </button>
                            <div class="absolute left-0 mt-2 {{ $dropdownConfig.width | default "w-72" }} opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 ease-in-out">
                                <div class="{{ $dropdownConfig.container_padding | default "py-6" }} {{ $dropdownConfig.background | default "bg-white" }} {{ $dropdownConfig.border | default "border border-gray-100" }} {{ $dropdownConfig.shadow | default "shadow-xl" }} {{ $dropdownConfig.radius | default "rounded-lg" }}">
                                    {{ range .Params.submenu }}
                                    <a href="{{ .url }}" class="block {{ $dropdownConfig.item_padding | default "px-8 py-3" }} {{ $dropdownConfig.text_size | default "text-sm" }} {{ $dropdownConfig.text_color | default "text-gray-700" }} {{ $dropdownConfig.hover_background | default "hover:bg-gray-50" }}">{{ .name }}</a>
                                    {{ end }}
                                </div>
                            </div>
                        </div>
                        {{ else }}
                        <a href="{{ .URL }}" class="{{ with $headerConfig.menu.linkClass }}{{ . }}{{ else }}text-base text-gray-900 hover:text-primary-600 font-bold transition duration-200{{ end }}">{{ .Name }}</a>
                        {{ end }}
                    {{ 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-bold 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-bold 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 }}

                <!-- Mobile Menu Toggle -->
                <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">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                        </svg>
                    </label>
                </div>
            </nav>
        </div>

        <!-- 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="w-full px-6 py-4">
                {{ range .Site.Menus.main }}
                    {{ if .Params.has_submenu }}
                    <div class="py-2">
                        <div class="text-xl text-gray-900 font-bold mb-2">{{ .Name }}</div>
                        <div class="pl-4">
                            {{ range .Params.submenu }}
                            <a href="{{ .url }}" class="block text-gray-700 hover:text-primary-600 py-2">{{ .name }}</a>
                            {{ end }}
                        </div>
                    </div>
                    {{ else }}
                    <a href="{{ .URL }}" class="{{ with $headerConfig.menu.mobileLinkClass }}{{ . }}{{ else }}block text-xl text-gray-900 hover:text-primary-600 font-bold transition duration-200 py-2{{ end }}">{{ .Name }}</a>
                    {{ end }}
                {{ end }}
                
                {{ if not $headerConfig.hideButtons }}
                <div class="pt-4 space-y-4">
                    {{ with $headerConfig.buttons.signIn }}
                    <a href="{{ .url | default "#" }}" class="{{ with .mobileClass }}{{ . }}{{ else }}block text-center px-6 py-3 rounded-lg font-bold 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 .mobileClass }}{{ . }}{{ else }}block text-center px-6 py-3 rounded-lg font-bold 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 }}
            </div>
        </div>
    </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>