<link rel="stylesheet" href="/style/desktopNav.css">
<script src="/scripts/desktopNav.js"></script>

<div id="hiddenHelper"></div>
<div class="navWrapper">
    <nav id="nav" data-is-mobile="false">
        <div class="flexElement1" id="logoSection" role="button" tabindex="0">
            <img id="logo" src="/images/Logo/FolketsHusTransparent-Cut-Large.png" alt="Logga" onclick="redirectToUrl('')">
            <div class="absolute" id="logoCutoff"></div>
            <h1 onclick="redirectToUrl('')">
                <% try { %>
                    <span style="text-transform: uppercase;"><%- uniqueTitle %></span>
                <% } catch { %>
                    <span style="text-transform: uppercase;">Folkets Hus</span>
                <% } %>
                <br>
                <span style="text-transform: none;">Hallstavik</span>
            </h1>
        </div>
    
        <ul class="flexElement2" id="navSection">
            <li class="navElement dropdownButton" id="navElement1" onmouseover="showDropdownElement('bioRosenDropdown', 'navElement1')" onmouseleave="hideDropdownElement('bioRosenDropdown', 'navElement1')" onfocusin="showDropdownElement('bioRosenDropdown', 'navElement1')" onfocusout="hideDropdownElement('bioRosenDropdown', 'navElement1')" tabindex="0">
                <p class="firstLayer">Bio Rosen</p>
                <div class="firstLayer dropdownArrow">
                    <span class="material-symbols-outlined">
                        chevron_right
                    </span>
                </div>
                <ul class="absolute dropdown hidden" id="bioRosenDropdown">
                    <a id="dropdownElement" tabindex="0" href="/bio-rosen/filmer">
                        <p class="secondLayer">Filmer</p>
                    </a>
                    <a id="dropdownElement" tabindex="0" href="/bio-rosen/live-pa-bio">
                        <p class="secondLayer">Live På Bio</p>
                    </a>
                    <a id="dropdownElement" tabindex="0" href="/bio-rosen/bio-kontrast">
                        <p class="secondLayer">Bio Kontrast</p>
                    </a>
                </ul>
            </li>
    
            <a class="navElement" id="navElement2" href="/unes-kok-bar" tabindex="0">
                <p class="firstLayer">Unes Kök & Bar</p>
            </a>
    
            <a class="navElement" id="navElement3" href="/boka-lokal" tabindex="0">
                <p class="firstLayer">Boka Lokal</p>
            </a>
    
            <li class="navElement dropdownButton" id="navElement4" onmouseover="showDropdownElement('omOssDropdown', 'navElement4')" onmouseleave="hideDropdownElement('omOssDropdown', 'navElement4')" onfocusin="showDropdownElement('omOssDropdown', 'navElement4')" onfocusout="hideDropdownElement('omOssDropdown', 'navElement4')" tabindex="0">
                <p class="firstLayer">Om Oss</p>
                <div class="firstLayer dropdownArrow">
                    <span class="material-symbols-outlined">
                        chevron_right
                    </span>
                </div>
                <ul class="absolute dropdown hidden" id="omOssDropdown">
                    <a id="dropdownElement" href="/om-oss/vi-som-jobbar-har" tabindex="0">
                        <p class="secondLayer">Vi Som Jobbar Här</p>
                    </a>
                    <a id="dropdownElement" href="/om-oss/om-huset" tabindex="0">
                        <p class="secondLayer">Om Huset</p>
                    </a>
                    <a id="dropdownElement" href="/om-oss/folkets-hus-hallstavik-100-ar" tabindex="0">
                        <p class="secondLayer">Folkets Hus Hallstavik 100 år</p>
                    </a>
                    <a id="dropdownElement" href="/om-oss/vara-hyresgaster" tabindex="0">
                        <p class="secondLayer">Våra Hyresgäster</p>
                    </a>
                </ul>
            </li>
    
            <a class="navElement" id="navElement5 kontaktButton" onclick="kontaktButton()"  role="button" tabindex="0">
                <p class="firstLayer">Kontakt</p>
            </a>
    
        </ul>

        
        
    </nav>
</div>
