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

{{ $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="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
        <nav class="flex items-center justify-between h-20">
            <!-- Logo -->
            <a href="{{ .Site.BaseURL }}" class="flex items-center">
                {{ with $headerConfig.logo }}
                    <img src="{{ .src | relURL }}" alt="{{ $.Site.Title }}" class="{{ with .class }}{{ . }}{{ else }}h-8{{ end }}">
                {{ else }}
                    <span class="text-xl font-bold text-gray-900">{{ .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 }}
                    <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>
                {{ 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 }}

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

        <!-- Mobile Menu -->
        <div class="md:hidden hidden" id="mobile-menu">
            <div class="py-4 space-y-4">
                {{ 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>
                {{ 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-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 .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" }}
                    </a>
                    {{ end }}
                </div>
                {{ end }}
            </div>
        </div>
    </div>
</header>