<link rel="stylesheet" href="/style/mobileNav.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<script src="/scripts/mobileNav.js"></script>

<div id="hiddenHelper"></div>
<div id="blurredBackground" onclick="burgerClicked()"></div>
<div class="navWrapper">

    <div id="topBar">
        <div id="logoContainer">
            <img id="logo" src="/images/Logo/FolketsHusTransparent-Cut-Large.png" alt="Logga" onclick="redirectToUrl('')"></img>
            <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>
        
        
        <nav id="nav" data-is-mobile="true">
            <ul id="navSelection">

                <li class="seperatorLine"></li>
                <li class="seperatorLine"></li>

                <li class="navElement" id="navElement1" onclick="redirectToUrl('')">
                    <p class="firstLayer a" id="_">Hem</p>
                </li>

                <li class="seperatorLine"></li>
                <li class="seperatorLine"></li>

                <li class="navElement dropdownButton" id="navElement2" onclick="dropdownClicked()" data-open="false">
                    <p class="firstLayer isDropdown" id="bio-rosen">Bio Rosen</p>
                    <span class="material-symbols-outlined">expand_more</span>
                </li>
                
                <li class="seperatorLine"></li>
                
                <ul class="dropdown" id="bio-rosen-dropdown">
                    <li class="dropdownElement" onclick="redirectToUrl('bio-rosen/filmer')">
                        <p class="secondLayer a" id="filmer">Filmer</p>
                    </li>
                    <li class="seperatorLine"></li>
                    <li class="dropdownElement" onclick="redirectToUrl('bio-rosen/live-pa-bio')">
                        <p class="secondLayer a" id="live-pa-bio">Live På Bio</p>
                    </li>
                    <li class="seperatorLine"></li>
                    <li class="dropdownElement" onclick="redirectToUrl('bio-rosen/bio-kontrast')">
                        <p class="secondLayer a" id="bio-kontrast">Bio Kontrast</p>
                    </li>
                </ul>
                
                <li class="seperatorLine"></li>
        
                <li class="navElement" id="navElement3" onclick="redirectToUrl('unes-kok-bar')">
                    <p class="firstLayer a" id="unes-kok-bar">Unes Kök & Bar</p>
                </li>
                
                <li class="seperatorLine"></li>
                <li class="seperatorLine"></li>
        
                <li class="navElement" id="navElement4" onclick="redirectToUrl('boka-lokal')">
                    <p class="firstLayer a" id="boka-lokal">Boka Lokal</p>
                </li>
                
                <li class="seperatorLine"></li>
                <li class="seperatorLine"></li>
        
                <li class="navElement dropdownButton" id="navElement5" onclick="dropdownClicked()" data-open="false">
                    <p class="firstLayer isDropdown" id="om-oss">Om Oss</p>
                    <span class="material-symbols-outlined">expand_more</span>
                </li>
                
                <li class="seperatorLine"></li>
        
                <ul class="dropdown" id="om-oss-dropdown">
                    <li class="dropdownElement" onclick="redirectToUrl('om-oss/vi-som-jobbar-har')">
                        <p class="secondLayer a" id="vi-som-jobbar-har">Vi Som Jobbar Här</p>
                    </li>
                    <li class="seperatorLine"></li>
                    <li class="dropdownElement" onclick="redirectToUrl('om-oss/om-huset')">
                        <p class="secondLayer a" id="om-huset">Om Huset</p>
                    </li>
                    <li class="seperatorLine"></li>
                    <li class="dropdownElement" onclick="redirectToUrl('om-oss/folkets-hus-hallstavik-100-ar')">
                        <p class="secondLayer a" id="folkets-hus-hallstavik-100-ar">Folkets Hus<br>Hallstavik 100 år</p>
                    </li>
                    <li class="seperatorLine"></li>
                    <li class="dropdownElement" onclick="redirectToUrl('om-oss/vara-hyresgaster')">
                        <p class="secondLayer a" id="vara-hyresgaster">Våra Hyresgäster</p>
                    </li>
                </ul>

                <li class="seperatorLine"></li>
        
                <li class="navElement" id="navElement6 kontaktButton" onclick="kontaktButton()">
                    <p class="firstLayer a">Kontakt</p>
                </li>

                <li class="seperatorLine"></li>
                <li class="seperatorLine"></li>

            </ul>
        </nav>

        <div id="burgerButton" onclick="burgerClicked()">
            <div class="burgerLine" id="topLine"></div>
            <div class="burgerLine" id="middleLine"></div>
            <div class="burgerLine" id="bottomLine"></div>
        </div>
        
    </div>
</div>