Add mobile nav

roundabout,
created on Monday, 9 September 2024, 10:49:30 (1725878970), received on Monday, 9 September 2024, 10:49:32 (1725878972)
Author identity: vlad <vlad.muntoiu@gmail.com>

                                
                                
                                
                            
                                
                                    
                                        
                                            20  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            21  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            22  
                                            iconify-icon {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        23 +
                                            /* Material design icons are done in 24px, so we scale them to 1.5 as the default font size is 16px */
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            24  
                                                display: inline-block;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            25  
                                                width: 1em;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            26  
                                                height: 1em;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        27 +
                                            font-size: 1.5em;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            28  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            29  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            30  
                                            :is(#shape-selector, #shape-options) > button > iconify-icon {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

                                
                                
                                
                            
                                
                                    
                                        
                                            371  
                                            dd {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            372  
                                                margin-left: 40px;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            373  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        374 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        375 +
                                        #mobile-navbar {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        376 +
                                            display: none;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        377 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        378 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        379 +
                                        @media screen and (max-width: 576px) {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        380 +
                                            #mobile-navbar {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        381 +
                                                display: flex;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        382 +
                                            }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        383 +
                                            #desktop-navbar {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        384 +
                                                display: none;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        385 +
                                            }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        386 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        387 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        388 +
                                        #hamburger > nav {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        389 +
                                            display: flex;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        390 +
                                            flex-direction: column;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        391 +
                                            gap: 1em;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        392 +
                                            padding: var(--padding-card);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        393 +
                                            padding-top: var(--padding-card-top);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        394 +
                                            box-shadow: var(--shadow-card);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        395 +
                                            background: var(--color-card);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        396 +
                                            justify-content: space-between;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        397 +
                                            width: clamp(240px, calc(100vw - 56px), 448px);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        398 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        399 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        400 +
                                        #hamburger > nav > ul {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        401 +
                                            display: flex;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        402 +
                                            flex-direction: column;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        403 +
                                            gap: 1em;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        404 +
                                            margin: 0;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        405 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        406 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        407 +
                                        #hamburger > nav > ul > li {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        408 +
                                            display: flex;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        409 +
                                            gap: var(--gap-label-checkbox);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        410 +
                                            align-items: center;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        411 +
                                            margin: 0;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        412 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        413 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        414 +
                                        #hamburger > nav > ul > li > a {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        415 +
                                            text-decoration: none;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        416 +
                                            color: var(--color-card-text);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        417 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

                                
                                
                                
                            
                                
                                    
                                        
                                            5  
                                                    <meta charset="utf-8">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            6  
                                                    <meta name="viewport" content="width=device-width, initial-scale=1">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            7  
                                                    <link rel="stylesheet" href="/static/style.css">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        8 -
                                                <script src="/static/efficient-ui/dialogs.js"></script>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        9 -
                                                <script src="/static/efficient-ui/toasts.js"></script>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            8  
                                                    <script src="https://cdn.jsdelivr.net/npm/iconify-icon@2.1.0/dist/iconify-icon.min.js"></script>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            9  
                                                </head>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            10  
                                                <body>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        11 +
                                                <dialog id="hamburger" class="sheet-left">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        12 +
                                                    <nav>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        13 +
                                                        <ul>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        14 +
                                                            <li><a href="/">Home</a></li>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        15 +
                                                            <li><a href="/object/">Object list</a></li>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        16 +
                                                            <li><a href="/query-pictures">Query</a></li>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        17 +
                                                            {% if session.username %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        18 +
                                                                <li><a href="/upload">Upload</a></li>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        19 +
                                                            {% endif %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        20 +
                                                        </ul>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        21 +
                                                        <ul>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        22 +
                                                            {% if session.username %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        23 +
                                                                <li><a href="/profile/{{ session.username }}">Profile: {{ session.username }}</a></li>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        24 +
                                                                <li><a href="/logout">Log out</a></li>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        25 +
                                                            {% else %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        26 +
                                                                <li><a href="/accounts">Accounts</a></li>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        27 +
                                                            {% endif %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        28 +
                                                        </ul>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        29 +
                                                    </nav>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        30 +
                                                </dialog>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            31  
                                                    <header>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        14 -
                                                    <nav class="navbar">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        32 +
                                                    <nav class="navbar" id="mobile-navbar">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        33 +
                                                        <ul>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        34 +
                                                            <li id="hamburger-button">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        35 +
                                                                <button class="button-flat button-neutral" onclick="document.getElementById('hamburger').showModal()">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        36 +
                                                                    <iconify-icon icon="ic:baseline-menu">Menu</iconify-icon>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        37 +
                                                                </button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        38 +
                                                            </li>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        39 +
                                                        </ul>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        40 +
                                                    </nav>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        41 +
                                                    <nav class="navbar" id="desktop-navbar">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            42  
                                                            <ul>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            43  
                                                                <li><a href="/">Home</a></li>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            44  
                                                                <li><a href="/object/">Object list</a></li>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

                                
                                
                                
                            
                                
                                    
                                        
                                            92  
                                                            {% endfor %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            93  
                                                        </ol>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            94  
                                                    {% endwith %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        95 +
                                                <script src="/static/efficient-ui/dialogs.js"></script>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        96 +
                                                <script src="/static/efficient-ui/toasts.js"></script>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            97  
                                                </body>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            98  
                                            </html>