orchard/src/renderer/views/app/sidebar.ejs

<div id="app-sidebar">
    <div class="app-sidebar-header">
        <div class="search-input-container">
            <div class="search-input--icon"></div>
            <input type="search" spellcheck="false" @click="showSearch()"
                   @focus="search.showHints = true"
                   @blur="setTimeout(()=>{search.showHints = false}, 300)"
                   v-on:keyup.enter="searchQuery();search.showHints = false" @change="showSearch();"
                   @input="getSearchHints()" :placeholder="$root.getLz('term.search') + '...'"
                   v-model="search.term"
                   ref="searchInput" class="search-input">
        </div>
    </div>
    <div class="search-hints-container" v-if="search.showHints && search.hints.length != 0">
        <div class="search-hints">
            <button class="search-hint" v-for="hint in search.hints"
                    @click="search.term = hint;search.showHints = false;searchQuery(hint)">
                {{ hint }}
            </button>
        </div>
    </div>
    <div class="app-sidebar-content">
        <div class="app-sidebar-header-text">
            {{$root.getLz('app.name')}}
        </div>
        <sidebar-library-item :name="$root.getLz('home.title')" svg-icon="./assets/feather/home.svg"
                              page="home">
        </sidebar-library-item>
        <div class="app-sidebar-header-text">
            {{$root.getLz('term.appleMusic')}}
        </div>
        <sidebar-library-item :name="$root.getLz('term.listenNow')"
                              svg-icon="./assets/feather/play-circle.svg"
                              page="listen_now"></sidebar-library-item>
        <sidebar-library-item :name="$root.getLz('term.browse')" svg-icon="./assets/feather/globe.svg"
                              page="browse">
        </sidebar-library-item>
        <sidebar-library-item :name="$root.getLz('term.radio')" svg-icon="./assets/feather/radio.svg"
                              page="radio">
        </sidebar-library-item>
        <div class="app-sidebar-header-text">
            {{$root.getLz('term.library')}}
        </div>
        <sidebar-library-item :name="$root.getLz('term.recentlyAdded')"
                              svg-icon="./assets/feather/plus-circle.svg"
                              page="library-recentlyadded"></sidebar-library-item>
        <sidebar-library-item :name="$root.getLz('term.songs')" svg-icon="./assets/feather/music.svg"
                              page="library-songs"></sidebar-library-item>
        <sidebar-library-item :name="$root.getLz('term.albums')" svg-icon="./assets/feather/disc.svg"
                              page="library-albums"></sidebar-library-item>
        <sidebar-library-item :name="$root.getLz('term.artists')" svg-icon="./assets/feather/user.svg"
                              page="library-artists"></sidebar-library-item>
        <sidebar-library-item :name="$root.getLz('term.videos')" svg-icon="./assets/feather/video.svg"
                              page="library-videos"></sidebar-library-item>
        <sidebar-library-item :name="$root.getLz('term.podcasts')" svg-icon="./assets/feather/mic.svg"
                              page="podcasts">
        </sidebar-library-item>
        <div class="app-sidebar-header-text" @contextmenu="playlistHeaderContextMenu">
            {{ $root.getLz('term.playlists') }}
        </div>
        <sidebar-playlist v-for="item in getPlaylistFolderChildren('p.playlistsroot')" :item="item">
        </sidebar-playlist>
    </div>
    <transition name="wpfade">
        <div class="usermenu-container" v-if="chrome.menuOpened">
            <div class="usermenu-body">
                <button class="app-sidebar-button" style="width:100%">

                    <img class="sidebar-user-icon" loading="lazy"
                         :src="getMediaItemArtwork(chrome.hideUserInfo ? 'http://localhost:9000/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>
                <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" v-if="cfg.advanced.AudioContext"
                        @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" @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="appRoute('settings')">
                    <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" @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>
            </div>
        </div>
    </transition>
    <div class="app-sidebar-footer display--small">

        <div class="app-playback-controls " v-if="mkReady()"
             @contextmenu="nowPlayingContextMenu">
            <div class="control-buttons">
                <div class="app-chrome-item">
                    <button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0"
                            @click="mk.shuffleMode = 1"></button>
                    <button class="playback-button--small shuffle active" v-else
                            @click="mk.shuffleMode = 0"></button>
                </div>
                <div class="app-chrome-item">
                    <button class="playback-button previous" @click="prevButton()"></button>
                </div>
                <div class="app-chrome-item">
                    <button class="playback-button pause" @click="mk.pause()"
                            v-if="mk.isPlaying"></button>
                    <button class="playback-button play" @click="mk.play()" v-else></button>
                </div>
                <div class="app-chrome-item">
                    <button class="playback-button next" @click="skipToNextItem()"></button>
                </div>
                <div class="app-chrome-item">
                    <button class="playback-button--small repeat" v-if="mk.repeatMode == 0"
                            @click="mk.repeatMode = 1"></button>
                    <button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2"
                            v-else-if="mk.repeatMode == 1"></button>
                    <button class="playback-button--small repeat active"
                            @click="mk.repeatMode = 0" v-else-if="mk.repeatMode == 2"></button>
                </div>
            </div>
            <div class="app-chrome-item volume">
                <div class="input-container">
                    <button class="volume-button--small volume" @click="muteButtonPressed()"
                            :class="{'active': this.cfg.audio.volume == 0}"></button>
                    <input type="range" class="" @wheel="volumeWheel" :step="cfg.audio.volumeStep" min="0"
                           :max="cfg.audio.maxVolume"
                           v-model="mk.volume" v-if="typeof mk.volume != 'undefined'"
                           @change="checkMuteChange()">
                </div>
            </div>
        </div>
    </div>
    <div class="app-sidebar-notification backgroundNotification"
         v-if="library.backgroundNotification.show">
        <div class="message">{{ library.backgroundNotification.message }} ({{
            library.backgroundNotification.progress }} / {{ library.backgroundNotification.total }})
        </div>
    </div>
</div>