header.hbs

<header local-class="header {{if @hero "hero"}}">
  <div local-class="header-inner">
    <LinkTo @route="index" local-class="index-link">
      <img src="/assets/cargo.png" role="none" alt="" local-class="logo">
      <h1>crates.io</h1>
    </LinkTo>

    <div local-class="search-form">
      <h1 local-class="hero-title">
        The Rust community&rsquo;s crate registry
      </h1>

      <SearchForm @size={{if @hero "big"}} @autofocus={{@hero}} />
    </div>

    <nav local-class='nav'>
      <ColorSchemeMenu local-class="color-scheme-menu" />

      <LinkTo @route="crates" @query={{hash letter=null page=1}} data-test-all-crates-link>
        Browse All Crates
      </LinkTo>
      <span local-class="sep">|</span>
      {{#if this.session.currentUser}}
        <Dropdown data-test-user-menu as |dd|>
          <dd.Trigger local-class="dropdown-button" data-test-toggle>
            {{#if this.session.isSudoEnabled}}
              <div data-test-wizard-hat local-class="wizard-hat">🧙</div>
            {{/if}}
            <UserAvatar @user={{this.session.currentUser}} @size="small" local-class="avatar" data-test-avatar />
            {{ this.session.currentUser.name }}
          </dd.Trigger>

          <dd.Menu local-class='current-user-links' as |menu|>
            <menu.Item><LinkTo @route='dashboard'>Dashboard</LinkTo></menu.Item>
            <menu.Item><LinkTo @route='settings' data-test-settings>Account Settings</LinkTo></menu.Item>
            <menu.Item><LinkTo @route='me.pending-invites'>Owner Invites</LinkTo></menu.Item>
            {{#if this.session.isAdmin}}
              <menu.Item local-class='sudo'>
                {{#if this.session.isSudoEnabled}}
                  <button data-test-disable-admin-actions local-class='sudo-menu-item' type='button' {{on 'click' this.disableSudo}}>
                    Disable admin actions
                    <div local-class='expires-in'>expires at {{date-format this.session.sudoEnabledUntil 'HH:mm'}}</div>
                  </button>
                {{else}}
                  <button data-test-enable-admin-actions local-class='sudo-menu-item' type='button' {{on 'click' this.enableSudo}}>
                    Enable admin actions
                  </button>
                {{/if}}
              </menu.Item>
            {{/if}}
            <menu.Item local-class='menu-item-with-separator'>
              <button
                type="button"
                disabled={{this.session.logoutTask.isRunning}}
                local-class="logout-menu-item"
                data-test-logout-button
                {{on "click" (perform this.session.logoutTask)}}
              >
                {{#if this.session.logoutTask.isRunning}}
                  <LoadingSpinner local-class="spinner"/>
                {{/if}}
                Sign Out
              </button>
            </menu.Item>
          </dd.Menu>
        </Dropdown>
      {{else}}
        <button
          type="button"
          disabled={{this.session.loginTask.isRunning}}
          local-class="login-button"
          data-test-login-button
          {{on "click" (perform this.session.loginTask)}}
        >
          {{#if this.session.loginTask.isRunning}}
            <LoadingSpinner local-class="spinner"/>
          {{else}}
            {{svg-jar "lock" local-class="login-icon"}}
          {{/if}}
          Log in with GitHub
        </button>
      {{/if}}
    </nav>

    <div local-class='menu'>
      <ColorSchemeMenu local-class="color-scheme-menu" />

      <Dropdown as |dd|>
        <dd.Trigger local-class="dropdown-button">
          Menu
        </dd.Trigger>
        <dd.Menu local-class="current-user-links" as |menu|>
          <menu.Item><LinkTo @route="crates">Browse All Crates</LinkTo></menu.Item>
          {{#if this.session.currentUser}}
            <menu.Item><LinkTo @route="dashboard">Dashboard</LinkTo></menu.Item>
            <menu.Item><LinkTo @route="settings" data-test-me-link>Account Settings</LinkTo></menu.Item>
            <menu.Item><LinkTo @route="me.pending-invites">Owner Invites</LinkTo></menu.Item>
            <menu.Item local-class="menu-item-with-separator">
              <button
                type="button"
                disabled={{this.session.logoutTask.isRunning}}
                local-class="logout-menu-item"
                {{on "click" (perform this.session.logoutTask)}}
              >
                {{#if this.session.logoutTask.isRunning}}
                  <LoadingSpinner local-class="spinner"/>
                {{/if}}
                Sign Out
              </button>
            </menu.Item>
          {{else}}
            <menu.Item>
              <button
                type="button"
                disabled={{this.session.loginTask.isRunning}}
                local-class="login-menu-item"
                {{on "click" (perform this.session.loginTask)}}
              >
                {{#if this.session.loginTask.isRunning}}
                  <LoadingSpinner local-class="spinner"/>
                {{/if}}
                Log in with GitHub
              </button>
            </menu.Item>
          {{/if}}
        </dd.Menu>
      </Dropdown>
    </div>
  </div>
</header>