{{define "header"}}
    <header>
        <nav class="navbar">
            <div class="nav-container">
                <div class="nav-logo">
                    <a href="/">
                        <img src="/static/Tux.svg" alt="Tux the Linux Penguin" class="tux-icon">
                        <h1>{{.CompanyName}}</h1>
                    </a>
                </div>
                <div class="nav-links">
                    <a href="/"{{if eq .CurrentPage "home"}} class="active"{{end}}>Home</a>
                    <a href="/#voordelen">↓ Voordelen</a>
                    <a href="/#distros">↓ Linux-keuze</a>
                    <a href="/#diensten">↓ Diensten</a>
                    <a href="/over-mij"{{if eq .CurrentPage "about"}} class="active"{{end}}>Over mij</a>
                    <a href="/contact"{{if eq .CurrentPage "contact"}} class="active"{{end}}>Contact</a>
                </div>
                <button class="mobile-menu-toggle" onclick="toggleMobileMenu()">
                    <span>☰</span>
                </button>
                <div class="mobile-menu" id="mobile-menu">
                    <a href="/"{{if eq .CurrentPage "home"}} class="active"{{end}}>Home</a>
                    <a href="/#voordelen">↓ Voordelen</a>
                    <a href="/#distros">↓ Linux-keuze</a>
                    <a href="/#diensten">↓ Diensten</a>
                    <a href="/over-mij"{{if eq .CurrentPage "about"}} class="active"{{end}}>Over mij</a>
                    <a href="/contact"{{if eq .CurrentPage "contact"}} class="active"{{end}}>Contact</a>
                </div>
            </div>
        </nav>
    </header>
{{end}} 