<nav class="navbar mb-4 has-background-white-ter" aria-label="main navigation">
    <div class="navbar-brand">
        <a class="navbar-item" href="/">
            <h3 class="title is-3">storage-app</h3>
        </a>
        <button class="navbar-burger" aria-label="menu" aria-expanded="false">
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
        </button>
    </div>
    <div class="navbar-start">

    </div>
    <div class="navbar-end">
        <div class="navbar-item" style="width:300px">
            <div class="field" style="width:100%" >
                <p class="control has-icons-left">
                    <input class="input is-small" type="search" placeholder="Search files (CTRL + K)"></input>
                    <span class="icon is-small is-left">
                        <i class="fa-solid fa-magnifying-glass"></i>
                    </span>
                </p>
            </div>
        </div>
        <div class="navbar-item">
            <a class="icon">
                <i class="far fa-bell"></i>
                <span class="ml-2" >0</span>
            </a>
            
        </div>
        <div class="navbar-item has-dropdown is-hoverable">
            <a class="navbar-link">
                <img src="/static/img/default_user.png" alt="User Image" />
            </a>
        
            <div class="navbar-dropdown">
                <a class="navbar-item" href="/help/about">
                    About
                </a>
                <a class="navbar-item">
                    Contact
                </a>
                <hr class="navbar-divider">
                <a class="navbar-item">
                    Report an issue
                </a>
            </div>
        </div>
    </div>
</nav>