appwrite/app/views/console/comps/header.phtml

<header class="clear" data-version>
    <a href="/console" class="logo pull-start">
        <img src="/images/appwrite.svg" alt="Appwrite Light Logo" class="force-light" loading="lazy" />
        <img src="/images/appwrite-footer-dark.svg" alt="Appwrite Dark Logo" class="force-dark" loading="lazy" />
    </a>

    <div class="change-project pull-start desktops-only">
        <div class="list project-only margin-end-small">
            <label class="margin-bottom-no">
                <select class="margin-bottom-no"
                    data-xanalytics-event="change"
                    data-xanalytics-category="console/header"
                    data-xanalytics-label="Project Switch"
                    data-switch
                    data-ls-bind="{{router.params.project}}"
                    data-unsync="1"
                    data-ls-loop="projects.projects" data-ls-as="option" aria-label="Switch Project">
                    <option data-ls-attrs="value={{option.$id}}" data-ls-bind="{{option.name}}"></option>
                </select>
            </label>
        </div>

        <button style="overflow: visible;" class="project-only setup-new tooltip round down pull-end" aria-label="Quick Start" data-tooltip="Create a new project"><i class="icon-plus"></i></button>
    </div>

    <div class="account-box pull-end"
        data-service="account.get"
        data-name="account"
        data-scope="console"
        data-event="load"
        data-success="trigger"
        data-success-param-trigger-events="account.get"
        data-failure="trigger"
        data-failure-param-trigger-events="account.deleteSession">

        <div class="console-back">
            <a href="/console" class="link-return-animation--end">Back to Console &nbsp;<i class="icon-right-open"></i></a>
        </div>

        <div class="account link pull-end clear">
            <img src="" data-ls-attrs="src={{account|avatar}}" alt="User Avatar" class="avatar margin-start pull-end" />
            <span class="name pull-end desktops-only" data-ls-bind="{{account.name}}"></span>
        </div>

        <div class="console-index drop-list bottom end" data-ls-ui-open="" data-button-text="" data-button-aria="Account Options" data-button-icon="" data-button-selector="[data-toggler]" data-button-class="account-button" data-blur="1">
            <ul class="margin-top-large arrow-end">
                <li>
                    <a href="/console/account"><i class="icon-user"></i> &nbsp; Your Account</a>
                </li>
                <li>
                    <span class="link"><i class="icon-sun-inv force-dark pull-start"></i><i class="icon-moon-inv force-light pull-start"></i> &nbsp; Change Theme
                        <div class="pull-end switch-theme">
                            <button data-general-theme
                                data-analytics
                                data-analytics-event="click"
                                data-analytics-category="console/header"
                                data-analytics-label="Switch Theme">
                                <i class="icon-sun-inv force-light"></i>
                                <i class="icon-moon-inv force-dark"></i>
                            </button>
                        </div>
                    </span>
                </li>
            </ul>
        </div>

    </div>

    <nav class="project-only" data-ls-ui-open="" data-button-class="round icon-btn phones-only tablets-only" data-button-aria="Navigation" data-button-icon="icon-dot-3">
        <a class="logo" href="/console"
            data-analytics
            data-analytics-event="click"
            data-analytics-category="console/navigation"
            data-analytics-label="Logo Link">
            <img src="/images/appwrite-nav.svg" loading="lazy" alt="Appwrite Logo" class="nav" />

            <img src="/images/appwrite.svg" loading="lazy" alt="Appwrite Light Logo" class="top force-light" loading="lazy" />
            <img src="/images/appwrite-footer-dark.svg" loading="lazy" alt="Appwrite Dark Logo" class="top force-dark" loading="lazy" />
        </a>

        <div data-ui-highlight class="container">

            <ul class="links">
                <li>
                    <a data-ls-attrs="href=/console/home?project={{router.params.project}}"
                        data-analytics
                        data-analytics-event="click"
                        data-analytics-category="console/navigation"
                        data-analytics-label="Home Link">
                        <i class="icon-home"></i>
                        Home
                    </a>
                </li>
            </ul>

            <b class="subtitle">DEVELOP</b>

            <ul class="links">
                <li>
                    <a data-ls-attrs="href=/console/databases?project={{router.params.project}}"
                        data-analytics
                        data-analytics-event="click"
                        data-analytics-category="console/navigation"
                        data-analytics-label="Database Link">
                        <i class="icon-database"></i>
                        Database
                    </a>
                </li>
                <li>
                    <a data-ls-attrs="href=/console/storage?project={{router.params.project}}"
                        data-analytics
                        data-analytics-event="click"
                        data-analytics-category="console/navigation"
                        data-analytics-label="Storage Link">
                        <i class="icon-folder"></i>
                        Storage
                    </a>
                </li>
                <li>
                    <a data-ls-attrs="href=/console/users?project={{router.params.project}}"
                        data-analytics
                        data-analytics-event="click"
                        data-analytics-category="console/navigation"
                        data-analytics-label="Users Link">
                        <i class="icon-users"></i>
                        Users
                    </a>
                </li>
                <li>
                    <a data-ls-attrs="href=/console/functions?project={{router.params.project}}"
                        data-analytics
                        data-analytics-event="click"
                        data-analytics-category="console/navigation"
                        data-analytics-label="Functions Link"
                        class="link-animation-disabled">
                        <i class="icon-lightning"></i>
                        Functions
                    </a>
                </li>
            </ul>

            <b class="subtitle">MANAGE</b>

            <ul class="links">
                <li>
                    <a data-ls-attrs="href=/console/webhooks?project={{router.params.project}}"
                        data-analytics
                        data-analytics-event="click"
                        data-analytics-category="console/navigation"
                        data-analytics-label="Webhooks Links">
                        <i class="icon-link"></i>
                        Webhooks
                    </a>
                </li>
                <li>
                    <a data-ls-attrs="href=/console/keys?project={{router.params.project}}"
                        data-analytics
                        data-analytics-event="click"
                        data-analytics-category="console/navigation"
                        data-analytics-label="API Keys Link">
                        <i class="icon-key-inv"></i>
                        API Keys
                    </a>
                </li>
            </ul>
        </div>

        <ul class="links bottom">
            <li>
                <a data-ls-attrs="href=/console/settings?project={{router.params.project}}"
                    data-analytics
                    data-analytics-event="click"
                    data-analytics-category="console/navigation"
                    data-analytics-label="Settings Link">
                    <i class="icon-cog"></i> Settings</a>
            </li>
        </ul>
    </nav>
</header>

<div class=""
    data-service="projects.list"
    data-event="load,projects.update"
    data-name="projects"
    data-scope="console"></div>

<div class="load-screen" data-ls-ui-loader>
    <div class="animation"><div></div><div></div><div></div><div></div></div>
    <img src="/images/appwrite.svg" alt="Appwrite Light Logo" class="force-light" loading="lazy" />
    <img src="/images/appwrite-footer-dark.svg" alt="Appwrite Dark Logo" class="force-dark" loading="lazy" />
</div>

<div data-ui-modal class="modal box close sticky-footer" data-button-alias=".setup-new" data-button-icon="icon-plus" data-button-class="project-only" data-open-event="create-project">
    <h1>Create Project</h1>

    <form
        data-setup
        data-analytics
        data-analytics-activity
        data-analytics-event="submit"
        data-analytics-category="console"
        data-analytics-label="Create Project">
        <p>Appwrite projects are containers for your resources and apps across different platforms.</p>

        <label>Project ID</label>
        <input
            type="hidden"
            data-custom-id
            data-id-type="auto"
            data-validator="projects.get"
            required
            maxlength="36"
            class=""
            pattern="^[a-zA-Z0-9][a-zA-Z0-9._-]{0,35}$"
            name="projectId" />

        <label>Name</label>
        <input type="text" class="full-width margin-bottom-xl" name="name" required autocomplete="off" maxlength="128" />

        <footer>
            <button type="submit">Create</button> &nbsp; <button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
        </footer>
    </form>
</div>

<section class="upload-box" x-data x-show="$store.uploader.files().length > 0">
    <div class="upload-box-header">
        <h4 class="upload-box-title">
            <span class="text">Uploading files</span>
            <span class="amount" x-text="$store.uploader.files().length"></span>
        </h4>
        <button class="icon-button" :class="$store.uploader.isOpen ? '' : 'is-open'" aria-label="toggle upload box" @click="$store.uploader.toggle()"><span class="icon-chevron-down" aria-hidden="true"></span></button>
        <button class="icon-button" @click="$store.uploader.cancelAll()" aria-label="close upload box"><span class="icon-x" aria-hidden="true"></span></button>
    </div>
    <div class="upload-box-content" :class="$store.uploader.isOpen ? 'is-open' : ''">
        <ul class="upload-box-list">
            <template x-if="$store.uploader.files().length > 0">
                <template x-for="file in $store.uploader.files()" :key="file.id">
                    <li x-show="!file.cancelled" class="upload-box-item">
                        <div class="upload-image u-margin-inline-end-16" :class="file.completed ? 'is-finished' : ''">
                            <div class="progress"
                                :style="'--progress-value:' + file.progress"
                                :aria-valuenow="file.progress"
                                role="progressbar"
                                aria-valuemin="0"
                                aria-valuemax="100"></div>
                            <span x-show="!file.completed" class="icon" x-text="file.progress + '%'"></span>
                            <span x-show="file.completed" class="icon icon-file"></span>
                        </div>
                        <label for="file1" class="file-name trim-inner-text" x-text="file.name" :title="file.name"></label>
                        <span class="pill is-failed" x-show="file.failed" :title="file.error">failed</span>
                        <button x-show="file.completed" class="icon-button is-success" aria-label="Uploading"><span class="icon-check"></span></button>
                        <button x-show="!file.completed" class="icon-button" aria-label="Uploading" @click="$store.uploader.removeFile(file.id)"><span class="icon-x"></span></button>
                    </li>
                </template>
            </template>
        </ul>
    </div>
</section>