orchard/src/renderer/views/app/app-navigation.ejs

<div
  class="app-navigation"
  v-cloak>
  <transition name="wpfade">
    <div
      class="usermenu-container"
      v-if="chrome.menuOpened">
      <div class="usermenu-body">
        <button
          class="app-sidebar-button"
          style="width: 100%"
          @click="appRoute('apple-account-settings')">
          <img
            class="sidebar-user-icon"
            loading="lazy"
            :src="getMediaItemArtwork(chrome.hideUserInfo ? './assets/logocut.png' : (chrome.userinfo.attributes['artwork'] ? chrome.userinfo.attributes['artwork']['url'] : ''), 26)" />

          <div
            class="sidebar-user-text"
            v-if="!chrome.hideUserInfo">
            <template v-if="chrome.userinfo.id || mk.isAuthorized">
              <div class="fullname text-overflow-elipsis">
                {{ chrome.userinfo != null && chrome.userinfo.attributes != null ? chrome.userinfo.attributes.name ?? "" : "" }}
              </div>
              <div class="handle-text text-overflow-elipsis">
                {{ chrome.userinfo != null && chrome.userinfo.attributes != null ? chrome.userinfo.attributes.handle ?? "" : "" }}
              </div>
            </template>
            <template v-else>
              <div @click="mk.authorize()">
                {{ $root.getLz("term.login") }}
              </div>
            </template>
          </div>
          <div
            class="sidebar-user-text"
            v-else>
            {{ $root.getLz("app.name") }}
          </div>
        </button>
        <!-- Use 20px SVG for usermenu icon -->
        <button
          class="usermenu-item"
          v-if="cfg.general.privateEnabled"
          @click="cfg.general.privateEnabled = false">
          <span class="usermenu-item-icon"> <%- include("../svg/x.svg") %> </span>
          <span class="usermenu-item-name">{{ $root.getLz("term.disablePrivateSession") }}</span>
        </button>
        <button
          class="usermenu-item"
          @click="appRoute('remote-pair')">
          <span class="usermenu-item-icon"> <%- include("../svg/smartphone.svg") %> </span>
          <span class="usermenu-item-name">{{ $root.getLz("action.showWebRemoteQR") }}</span>
        </button>
        <button
          class="usermenu-item"
          @click="modals.castMenu = true">
          <span class="usermenu-item-icon"> <%- include("../svg/cast.svg") %> </span>
          <span class="usermenu-item-name">{{ $root.getLz("term.cast") }}</span>
        </button>
        <button
          class="usermenu-item"
          @click="modals.audioSettings = true">
          <span class="usermenu-item-icon"> <%- include("../svg/headphones.svg") %> </span>
          <span class="usermenu-item-name">{{ $root.getLz("term.audioSettings") }}</span>
        </button>
        <button
          class="usermenu-item"
          v-if="pluginInstalled"
          @click="modals.pluginMenu = true">
          <span class="usermenu-item-icon"> <%- include("../svg/grid.svg") %> </span>
          <span class="usermenu-item-name">{{ $root.getLz("term.plugin") }}</span>
        </button>
        <button
          class="usermenu-item"
          @click="appRoute('about')">
          <span class="usermenu-item-icon"> <%- include("../svg/info.svg") %> </span>
          <span class="usermenu-item-name">{{ $root.getLz("term.about") }}</span>
        </button>
        <button
          class="usermenu-item"
          @click="modals.settings = true">
          <span class="usermenu-item-icon"> <%- include("../svg/settings.svg") %> </span>
          <span class="usermenu-item-name">{{ $root.getLz("term.settings") }}</span>
        </button>
        <button
          class="usermenu-item"
          v-for="entry in $root.pluginMenuTopEntries"
          @click="entry.onClick()">
          <span
            class="usermenu-item-icon"
            style="right: 2.5px">
            <%- include("../svg/grid.svg") %>
          </span>
          <span class="usermenu-item-name">{{ entry.name }}</span>
        </button>
        <button
          class="usermenu-item"
          @click="unauthorize()">
          <span
            class="usermenu-item-icon"
            style="right: 2.5px">
            <%- include("../svg/log-out.svg") %>
          </span>
          <span class="usermenu-item-name">{{ $root.getLz("term.logout") }}</span>
        </button>
        <button
          class="usermenu-item"
          @click="quit()">
          <span
            class="usermenu-item-icon"
            style="right: 2.5px">
            <%- include("../svg/x.svg") %>
          </span>
          <span class="usermenu-item-name">{{ $root.getLz("term.quit") }}</span>
        </button>
        <button
          v-if="!chrome.noC2Upgrade"
          class="usermenu-item"
          @click="c2offer()">
          <span
            class="usermenu-item-icon"
            style="right: 1.5px">
            <img
              class="sidebar-user-icon"
              loading="lazy"
              style="height: 16px; width: 16px"
              src="./assets/logocut.png" />
          </span>
          <span class="usermenu-item-name">Cider 2 Upgrade</span>
        </button>
      </div>
    </div>
  </transition>
  <transition name="sidebartransition">
    <cider-app-sidebar v-if="!chrome.sidebarCollapsed"></cider-app-sidebar>
  </transition>
  <app-content-area></app-content-area>
  <transition name="drawertransition">
    <div
      class="app-drawer"
      v-if="drawer.open && drawer.panel == 'lyrics' && lyrics && lyrics != [] && lyrics.length > 0">
      <div class="bgArtworkMaterial">
        <div class="bg-artwork-container">
          <img
            v-if="(cfg.visual.bg_artwork_rotation && animateBackground)"
            class="bg-artwork a"
            :src="$store.state.artwork.playerLCD" />
          <img
            v-if="(cfg.visual.bg_artwork_rotation && animateBackground)"
            class="bg-artwork b"
            :src="$store.state.artwork.playerLCD" />
          <img
            v-if="!(cfg.visual.bg_artwork_rotation && animateBackground)"
            class="bg-artwork no-animation"
            :src="$store.state.artwork.playerLCD" />
        </div>
      </div>
      <lyrics-view
        v-if="drawer.panel == 'lyrics'"
        :time="mk.currentPlaybackTime - lyricOffset"
        :lyrics="lyrics"
        :richlyrics="richlyrics"></lyrics-view>
      <div
        v-if="drawer.panel == 'lyrics'"
        class="lyric-footer">
        <button
          class="md-btn"
          @click="modularUITest(!fullscreenLyrics)">
          {{ fullscreenLyrics ? $root.getLz("term.defaultView") : $root.getLz("term.fullscreenView") }}
        </button>
      </div>
    </div>
  </transition>
  <transition name="drawertransition">
    <div
      class="app-drawer"
      v-if="drawer.open && drawer.panel == 'queue'">
      <cider-queue
        ref="queue"
        v-if="drawer.panel == 'queue'"></cider-queue>
    </div>
  </transition>
</div>