rocket-3d/templates/nav.html.tera

<div class="main_bar">
    <div id="logo_container">
        <a href="/">
            <picture>
                    <source srcset="../img/Logo.svg" type="image/webp">
                    <img class="logo" type="image/svg+xml" src= "img/Logo.svg">
            </picture>
        </a>
    </div>
    <!--mobile nav-->
    <nav class="hamburger_wrapper">
        <!--add onclick animation js/css-->
        <svg id = "icon" type="image/svg+xml" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width=".75" d="M4 6h16M4 12h16M4 18h16">
            </path>
        </svg>
    </nav>
    <div class="mobile_dropdown_container" id="md">
        <div id="mobile_dropdown">
            <ul>
                <li>
                    <a type="text/html" href="/experiments">HANF</a>
                    <span class="drop">
                            <svg type="image/svg+xml" id="chevron_1" class="chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width=".75" d="M19 9l-7 7-7-7"></path>
                            </svg>
                    </span>
                    <ul class="down" id ="down_1">
                        <li><a type="text/html" href="/experiments/oil">Öle</a></li>
                        <li><a type="text/html" href="/experiments/flower">Blüten</a></li>
                    </ul>
                </li>
            </ul>

            <ul>
                <li>
                    <a type="text/html" href="/spider">SPINNE</a>
                    <span class="drop">
                            <svg type="image/svg+xml" id="chevron_2" class="chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width=".75" d="M19 9l-7 7-7-7"></path>
                            </svg>
                    </span>
                    <ul class="down" id ="down_2">
                        <li><a type="text/html" href="/spider/spiderPi">SpiderPi</a></li>
                        <li><a href="/peramapp">PermApp</a></li>
                    </ul>
                </li>
            </ul>
            <ul>
                <li><a type="text/html" href=/permaculture/permApp>KAOS CUBE</a>
                </li>
            </ul>
            <ul id="drop_up">
                <li><a type="text/html" href="#">OFFGRID</a>
                        <span class="drop">
                            <svg type="image/svg+xml" id="chevron_3" class="chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width=".75" d="M19 9l-7 7-7-7"></path>
                            </svg>
                        </span>
                        <ul class="down" id="down_3">
                                <li><a type="text/html" href="#">WohnMaschine</a></li>
                                <li><a type="text/html" href="#">GPUMiner</a></li>
                        </ul>
                </li>
            </ul>
             <ul>
                <li><a type="text/html" href="#">CYBERPRENEUR</a>
                </li>
            </ul>
        </div>
    </div>
<!--desktop nav-->
    <nav class="desktop_navigation">
        <ul>
            <li><a type="text/html" href="/experiments"> HANF </a>
                    <ul id="experiments">
                        <li><a type="text/html" href="/experiments/oil">Öle</a></li>
                        <li><a type="text/html" href="/experiments/flower">Blüten</a></li>
                    </ul>
            </li>
        </ul>
        <ul>
            <li><a type="text/html" href="/spider">SPINNE</a>
                    <ul>
                            <li id="fix"><a id="fix" type="text/html" href="/permapp">PermApp</a></li>
                    </ul>
        </ul>
        <ul>
            <li><a type="text/html" href="/permaculture/permApp">KAOS CUBE</a>
        </ul>
        <ul>
            <li><a type="text/html" href="#">CYBERPRENEUR</a>
        </ul>
        <ul>
            <li><a type="text/html" href="#">OFFGRID</a>
                    <ul id="broader">
                            <li id="fix" ><a id="fix" href="#">Wohn Maschine</a></li>
                            <li id="fix"><a id="fix" href="#">GPU Miner</a></li>
                    </ul>
        </ul>
    </nav>
</div>