From c93a0b6aeb344cd70ea94a9e56b1bb3f059d4b18 Mon Sep 17 00:00:00 2001
From: Daniel Supernault <danielsupernault@gmail.com>
Date: Thu, 6 Mar 2025 01:51:03 -0700
Subject: [PATCH] Update navbar, fix icon

---
 .../assets/components/partials/navbar.vue     | 1856 ++++++++---------
 1 file changed, 879 insertions(+), 977 deletions(-)

diff --git a/resources/assets/components/partials/navbar.vue b/resources/assets/components/partials/navbar.vue
index 8fea06452..852767f88 100644
--- a/resources/assets/components/partials/navbar.vue
+++ b/resources/assets/components/partials/navbar.vue
@@ -1,985 +1,887 @@
 <template>
-	<nav class="metro-nav navbar navbar-expand navbar-light navbar-laravel sticky-top shadow-none py-1">
-		<div class="container-fluid">
-				<a class="navbar-brand d-flex align-items-center" href="/i/web" title="Logo">
-					<img src="/img/pixelfed-icon-color.svg" height="30px" class="px-2" loading="eager" alt="Pixelfed logo">
-					<span class="font-weight-bold mb-0 d-none d-sm-block" style="font-size:20px;">
-						{{ brandName }}
-					</span>
-				</a>
-
-				<div class="collapse navbar-collapse">
-					<div class="navbar-nav ml-auto">
-					  <!-- <form class="form-inline search-bar" method="get" action="/i/results">
-						<input class="form-control" name="q" placeholder="Search ..." aria-label="search" autocomplete="off" required style="position: relative;line-height: 0.6;width:100%;min-width: 300px;max-width: 500px;border-radius: 8px;" role="search">
-					  </form> -->
-
-						<autocomplete
-							class="searchbox"
-							:search="autocompleteSearch"
-							:placeholder="$t('navmenu.search')"
-							aria-label="Search"
-							:get-result-value="getSearchResultValue"
-							:debounceTime="700"
-							@submit="onSearchSubmit"
-							ref="autocomplete">
-
-							<template #result="{ result, props }">
-								<li
-								v-bind="props"
-								class="autocomplete-result sr"
-								>
-									<div v-if="result.s_type === 'account'" class="media align-items-center my-0">
-										<img :src="result.avatar" width="40" height="40" class="sr-avatar" style="border-radius: 40px" onerror="this.src='/storage/avatars/default.png?v=0';this.onerror=null;">
-										<div class="media-body sr-account">
-											<div class="sr-account-acct" :class="{ compact: result.acct && result.acct.length > 24 }">
-												&commat;{{ result.acct }}
-												<b-button
-													v-if="result.locked"
-													v-b-tooltip.html
-													title="Private Account"
-													variant="link"
-													size="sm"
-													class="p-0"
-													>
-													<i class="far fa-lock fa-sm text-lighter ml-1"></i>
-												</b-button>
-											</div>
-											<template v-if="result.is_admin">
-												<div class="sr-account-stats">
-													<div class="sr-account-stats-followers text-danger font-weight-bold">
-														Admin
-													</div>
-													<div>·</div>
-													<div class="sr-account-stats-followers font-weight-bold">
-														<span>{{ formatCount(result.followers_count) }}</span>
-														<span>Followers</span>
-													</div>
-												</div>
-											</template>
-											<template v-else>
-												<template v-if="result.local">
-													<div class="sr-account-stats">
-														<div v-if="result.followers_count" class="sr-account-stats-followers font-weight-bold">
-															<span>{{ formatCount(result.followers_count) }}</span>
-															<span>Followers</span>
-														</div>
-														<div v-if="result.followers_count && result.statuses_count">·</div>
-														<div v-if="result.statuses_count" class="sr-account-stats-statuses font-weight-bold">
-															<span>{{ formatCount(result.statuses_count) }}</span>
-															<span>Posts</span>
-														</div>
-														<div v-if="!result.followers_count && result.statuses_count">·</div>
-														<div class="sr-account-stats-statuses font-weight-bold">
-															<i class="far fa-clock fa-sm"></i>
-															<span>{{ timeAgo(result.created_at) }}</span>
-														</div>
-													</div>
-												</template>
-												<template v-else>
-													<div class="sr-account-stats">
-														<div v-if="result.followers_count" class="sr-account-stats-followers font-weight-bold">
-															<span>{{ formatCount(result.followers_count) }}</span>
-															<span>Followers</span>
-														</div>
-														<div v-if="result.followers_count && result.statuses_count">·</div>
-														<div v-if="result.statuses_count" class="sr-account-stats-statuses font-weight-bold">
-															<span>{{ formatCount(result.statuses_count) }}</span>
-															<span>Posts</span>
-														</div>
-														<div v-if="!result.followers_count && result.statuses_count">·</div>
-
-														<div v-if="!result.followers_count && !result.statuses_count" class="sr-account-stats-statuses font-weight-bold">
-															Remote Account
-														</div>
-														<div v-if="!result.followers_count && !result.statuses_count">
-															·
-														</div>
-														<b-button
-															v-b-tooltip.html
-															:title="'Joined ' + timeAgo(result.created_at) + ' ago'"
-															variant="link"
-															size="sm"
-															class="sr-account-stats-statuses p-0"
-															>
-															<i class="far fa-clock fa-sm"></i>
-															<span class="font-weight-bold">{{ timeAgo(result.created_at) }}</span>
-														</b-button>
-													</div>
-												</template>
-											</template>
-										</div>
-									</div>
-
-									<div v-else-if="result.s_type === 'hashtag'" class="media align-items-center my-0">
-										<div class="media-icon">
-											<i class="far fa-hashtag fa-large"></i>
-										</div>
-										<div class="media-body sr-tag">
-											<div class="sr-tag-name" :class="{ compact: result.name && result.name.length > 26 }">
-												#{{ result.name }}
-											</div>
-											<div v-if="result.count && result.count > 100" class="sr-tag-count">
-												{{ formatCount(result.count) }} {{ result.count == 1 ? 'Post' : 'Posts' }}
-											</div>
-										</div>
-									</div>
-
-									<div v-else-if="result.s_type === 'status'" class="media align-items-center my-0">
-										<img :src="result.account.avatar"  width="40" height="40" class="sr-avatar" style="border-radius: 40px" onerror="this.src='/storage/avatars/default.png?v=0';this.onerror=null;">
-
-										<div class="media-body sr-post">
-											<div class="sr-post-acct" :class="{ compact: result.acct && result.acct.length > 26 }">
-												&commat;{{ truncate(result.account.acct, 20) }}
-												<b-button
-													v-if="result.locked"
-													v-b-tooltip.html
-													title="Private Account"
-													variant="link"
-													size="sm"
-													class="p-0"
-													>
-													<i class="far fa-lock fa-sm text-lighter ml-1"></i>
-												</b-button>
-											</div>
-											<div class="sr-post-action">
-												<div class="sr-post-action-timestamp">
-													<i class="far fa-clock fa-sm"></i>
-													{{ timeAgo(result.created_at)}}
-												</div>
-												<div>·</div>
-												<div class="sr-post-action-label">
-													Tap to view post
-												</div>
-											</div>
-										</div>
-									</div>
-								</li>
-							</template>
-						</autocomplete>
-
-					</div>
-					<div class="ml-auto">
-						<ul class="navbar-nav align-items-center">
-							<!-- <li class="nav-item px-md-2 d-none d-md-block">
-								<router-link class="nav-link font-weight-bold text-dark" to="/i/web" title="Home" data-toggle="tooltip" data-placement="bottom">
-									<i class="far fa-home fa-lg"></i>
-									<span class="sr-only">Home</span>
-								</router-link>
-							</li>
-							<li class="nav-item px-md-2 d-none d-md-block">
-								<router-link class="nav-link font-weight-bold text-dark" title="Compose" data-toggle="tooltip" data-placement="bottom" to="/i/web/compose">
-									<i class="far fa-plus-square fa-lg"></i>
-									<span class="sr-only">Compose</span>
-								</router-link>
-							</li> -->
-							<!-- <li class="nav-item px-md-2">
-								<router-link class="nav-link font-weight-bold text-dark" to="/i/web/direct" title="Direct" data-toggle="tooltip" data-placement="bottom">
-									<i class="far fa-comment-dots fa-lg"></i>
-									<span class="sr-only">Direct</span>
-								</router-link>
-							</li>
-							<li class="nav-item px-md-2 d-none d-md-block">
-								<router-link class="nav-link font-weight-bold text-dark fa-layers fa-fw" to="/i/web/notifications" title="Notifications" data-toggle="tooltip" data-placement="bottom">
-									<i class="far fa-bell fa-lg"></i>
-									<span class="fa-layers-counter" style="background:Tomato"></span>
-									<span class="sr-only">Notifications</span>
-								</router-link>
-							</li> -->
-							<li class="nav-item dropdown ml-2">
-								<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="User Menu">
-									<i class="d-none far fa-user fa-lg text-dark"></i>
-									<span class="sr-only">User Menu</span>
-									<img :src="user.avatar" class="nav-avatar rounded-circle border shadow" width="30" height="30" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=0';">
-								</a>
-
-								<div class="dropdown-menu dropdown-menu-right shadow" aria-labelledby="navbarDropdown">
-									<ul class="nav flex-column">
-										<li class="nav-item nav-icons">
-											<div class="d-flex justify-content-between align-items-center">
-												<router-link class="nav-link text-center" to="/i/web">
-													<div class="icon text-lighter"><i class="far fa-home fa-lg"></i></div>
-													<div class="small">{{ $t('navmenu.homeFeed') }}</div>
-												</router-link>
-
-												<router-link v-if="hasLocalTimeline" class="nav-link text-center" :to="{ name: 'timeline', params: { scope: 'local' } }">
-													<div class="icon text-lighter"><i class="fas fa-stream fa-lg"></i></div>
-													<div class="small">{{ $t('navmenu.localFeed') }}</div>
-												</router-link>
-
-												<router-link v-if="hasNetworkTimeline" class="nav-link text-center" :to="{ name: 'timeline', params: { scope: 'global' } }">
-													<div class="icon text-lighter"><i class="far fa-globe fa-lg"></i></div>
-													<div class="small">{{ $t('navmenu.globalFeed') }}</div>
-												</router-link>
-											</div>
-										</li>
-
-										<li class="nav-item nav-icons">
-											<div class="d-flex justify-content-between align-items-center">
-												<router-link class="nav-link text-center" to="/i/web/discover">
-													<div class="icon text-lighter"><i class="far fa-compass"></i></div>
-													<div class="small">{{ $t('navmenu.discover') }}</div>
-												</router-link>
-
-												<router-link class="nav-link text-center" to="/i/web/notifications">
-													<div class="icon text-lighter">
-														<i class="far fa-bell"></i>
-													</div>
-													<div class="small">
-														{{ $t('navmenu.notifications') }}
-													</div>
-												</router-link>
-
-												<router-link class="nav-link text-center px-3" :to="'/i/web/profile/' + user.id">
-													<div class="icon text-lighter">
-														<i class="far fa-user"></i>
-													</div>
-													<div class="small">{{ $t('navmenu.profile') }}</div>
-												</router-link>
-											</div>
-											<hr class="mb-0" style="margin-top: -5px;opacity: 0.4;" />
-										</li>
-
-										<li class="nav-item">
-											<router-link class="nav-link" to="/i/web/compose">
-												<span class="icon text-lighter"><i class="far fa-plus-square"></i></span>
-												{{ $t('navmenu.compose') }}
-											</router-link>
-										</li>
-
-										<!-- <li class="nav-item">
-											<router-link class="nav-link" to="/i/web/discover">
-												<span class="icon text-lighter"><i class="far fa-compass"></i></span>
-												{{ $t('navmenu.discover') }}
-											</router-link>
-										</li> -->
-
-										<li class="nav-item">
-											<router-link class="nav-link d-flex justify-content-between align-items-center" to="/i/web/direct">
-												<span>
-													<span class="icon text-lighter">
-														<i class="far fa-envelope"></i>
-													</span>
-													{{ $t('navmenu.directMessages') }}
-												</span>
-
-												<!-- <span class="badge badge-danger font-weight-light rounded-pill px-2" style="transform:scale(0.86)">99+</span> -->
-											</router-link>
-										</li>
-
-										<li class="nav-item">
-											<a class="nav-link" href="/i/web" @click.prevent="openUserInterfaceSettings">
-												<span class="icon text-lighter"><i class="far fa-brush"></i></span>
-												{{ $t('navmenu.appearance') }}
-											</a>
-										</li>
-
-										<li class="nav-item">
-											<router-link class="nav-link" to="/settings/home">
-												<span class="icon text-lighter"><i class="fa-cog"></i></span>
-												{{ $t('navmenu.settings') }}
-											</router-link>
-										</li>
-
-										<!-- <li class="nav-item">
-											<router-link class="nav-link d-flex justify-content-between align-items-center" to="/i/web/notifications">
-												<span>
-													<span class="icon text-lighter">
-														<i class="far fa-bell"></i>
-													</span>
-													{{ $t('navmenu.notifications') }}
-												</span>
-											</router-link>
-										</li> -->
-
-										<!-- <li class="nav-item">
-											<hr class="mt-n1" style="opacity: 0.4;margin-bottom: 0;" />
-
-											<router-link class="nav-link" :to="'/i/web/profile/' + user.id">
-												<span class="icon text-lighter">
-													<i class="far fa-user"></i>
-												</span>
-												{{ $t('navmenu.profile') }}
-											</router-link>
-										</li> -->
-										<li v-if="user.is_admin" class="nav-item">
-											<hr class="mt-n1" style="opacity: 0.4;margin-bottom: 0;" />
-											<a class="nav-link" href="/i/admin/dashboard">
-												<span class="icon text-lighter">
-													<i class="far fa-tools"></i>
-												</span>
-												{{ $t('navmenu.admin') }}
-											</a>
-										</li>
-
-										<li class="nav-item">
-											<hr class="mt-n1" style="opacity: 0.4;margin-bottom: 0;" />
-											<a class="nav-link" href="/">
-												<span class="icon text-lighter">
-													<i class="fas fa-chevron-left"></i>
-												</span>
-												{{ $t('navmenu.backToPreviousDesign') }}
-											</a>
-										</li>
-
-										<li class="nav-item">
-											<hr class="mt-n1" style="opacity: 0.4;margin-bottom: 0;" />
-											<a class="nav-link" href="/" @click.prevent="logout()">
-												<span class="icon text-lighter">
-													<i class="far fa-sign-out"></i>
-												</span>
-												{{ $t('navmenu.logout') }}
-											</a>
-										</li>
-									</ul>
-								</div>
-							</li>
-						</ul>
-					</div>
-				</div>
-		</div>
-
-		<b-modal
-			ref="uis"
-			hide-footer
-			centered
-			body-class="p-0 ui-menu"
-			title="$t('navmenu.appearance')">
-			<div class="list-group list-group-flush">
-				<div class="list-group-item px-3">
-					<div class="d-flex justify-content-between align-items-center">
-						<div>
-							<p class="font-weight-bold mb-1">{{ $t('appearance.theme') }}</p>
-							<p class="small text-muted mb-0"></p>
-						</div>
-
-						<div class="btn-group btn-group-sm">
-							<button
-								class="btn"
-								:class="[ uiColorScheme == 'system' ? 'btn-primary' : 'btn-outline-primary']"
-								@click="toggleUi('system')">
-								{{ $t('appearance.auto') }}
-							</button>
-							<button
-								class="btn"
-								:class="[ uiColorScheme == 'light' ? 'btn-primary' : 'btn-outline-primary']"
-								@click="toggleUi('light')">
-								{{ $t('appearance.lightMode') }}
-							</button>
-							<button
-								class="btn"
-								:class="[ uiColorScheme == 'dark' ? 'btn-primary' : 'btn-outline-primary']"
-								@click="toggleUi('dark')">
-								{{ $t('appearance.darkMode') }}
-							</button>
-						</div>
-					</div>
-				</div>
-
-				<div class="list-group-item px-3">
-					<div class="d-flex justify-content-between align-items-center">
-						<div>
-							<p class="font-weight-bold mb-1">{{ $t('appearance.profileLayout') }}</p>
-							<p class="small text-muted mb-0"></p>
-						</div>
-
-						<div class="btn-group btn-group-sm">
-							<button
-								class="btn"
-								:class="[ profileLayout == 'grid' ? 'btn-primary' : 'btn-outline-primary']"
-								@click="toggleProfileLayout('grid')">
-								{{ $t('appearance.grid') }}
-							</button>
-							<button
-								class="btn"
-								:class="[ profileLayout == 'masonry' ? 'btn-primary' : 'btn-outline-primary']"
-								@click="toggleProfileLayout('masonry')">
-								{{ $t('appearance.masonry') }}
-							</button>
-							<button
-								class="btn"
-								:class="[ profileLayout == 'feed' ? 'btn-primary' : 'btn-outline-primary']"
-								@click="toggleProfileLayout('feed')">
-								{{ $t('appearance.feed') }}
-							</button>
-						</div>
-					</div>
-				</div>
-
-				<div class="list-group-item px-3">
-					<div class="d-flex justify-content-between align-items-center">
-						<div>
-							<p class="font-weight-bold mb-0">{{ $t('appearance.compactPreviews') }}</p>
-						</div>
-						<b-form-checkbox v-model="fixedHeight" switch size="lg" />
-					</div>
-				</div>
-
-				<div class="list-group-item px-3">
-					<div class="d-flex justify-content-between align-items-center">
-						<div>
-							<p class="font-weight-bold mb-0">{{ $t('appearance.loadComments') }}</p>
-						</div>
-						<b-form-checkbox v-model="autoloadComments" switch size="lg" />
-					</div>
-				</div>
-
-				<div class="list-group-item px-3">
-					<div class="d-flex justify-content-between align-items-center">
-						<div>
-							<p class="font-weight-bold mb-0">{{ $t('appearance.hideStats') }}</p>
-						</div>
-						<b-form-checkbox v-model="hideCounts" switch size="lg" />
-					</div>
-				</div>
-
-			</div>
-		</b-modal>
-	</nav>
+    <nav class="metro-nav navbar navbar-expand navbar-light navbar-laravel sticky-top shadow-none py-1">
+        <div class="container-fluid">
+                <a class="navbar-brand d-flex align-items-center" href="/i/web" title="Logo">
+                    <img src="/img/pixelfed-icon-color.svg" height="30px" class="px-2" loading="eager" alt="Pixelfed logo">
+                    <span class="font-weight-bold mb-0 d-none d-sm-block" style="font-size:20px;">
+                        {{ brandName }}
+                    </span>
+                </a>
+
+                <div class="collapse navbar-collapse">
+                    <div class="navbar-nav ml-auto">
+                        <autocomplete
+                            class="searchbox"
+                            :search="autocompleteSearch"
+                            :placeholder="$t('navmenu.search')"
+                            aria-label="Search"
+                            :get-result-value="getSearchResultValue"
+                            :debounceTime="700"
+                            @submit="onSearchSubmit"
+                            ref="autocomplete">
+
+                            <template #result="{ result, props }">
+                                <li
+                                v-bind="props"
+                                class="autocomplete-result sr"
+                                >
+                                    <div v-if="result.s_type === 'account'" class="media align-items-center my-0">
+                                        <img :src="result.avatar" width="40" height="40" class="sr-avatar" style="border-radius: 40px" onerror="this.src='/storage/avatars/default.png?v=0';this.onerror=null;">
+                                        <div class="media-body sr-account">
+                                            <div class="sr-account-acct" :class="{ compact: result.acct && result.acct.length > 24 }">
+                                                &commat;{{ result.acct }}
+                                                <b-button
+                                                    v-if="result.locked"
+                                                    v-b-tooltip.html
+                                                    title="Private Account"
+                                                    variant="link"
+                                                    size="sm"
+                                                    class="p-0"
+                                                    >
+                                                    <i class="far fa-lock fa-sm text-lighter ml-1"></i>
+                                                </b-button>
+                                            </div>
+                                            <template v-if="result.is_admin">
+                                                <div class="sr-account-stats">
+                                                    <div class="sr-account-stats-followers text-danger font-weight-bold">
+                                                        Admin
+                                                    </div>
+                                                    <div>·</div>
+                                                    <div class="sr-account-stats-followers font-weight-bold">
+                                                        <span>{{ formatCount(result.followers_count) }}</span>
+                                                        <span>Followers</span>
+                                                    </div>
+                                                </div>
+                                            </template>
+                                            <template v-else>
+                                                <template v-if="result.local">
+                                                    <div class="sr-account-stats">
+                                                        <div v-if="result.followers_count" class="sr-account-stats-followers font-weight-bold">
+                                                            <span>{{ formatCount(result.followers_count) }}</span>
+                                                            <span>Followers</span>
+                                                        </div>
+                                                        <div v-if="result.followers_count && result.statuses_count">·</div>
+                                                        <div v-if="result.statuses_count" class="sr-account-stats-statuses font-weight-bold">
+                                                            <span>{{ formatCount(result.statuses_count) }}</span>
+                                                            <span>Posts</span>
+                                                        </div>
+                                                        <div v-if="!result.followers_count && result.statuses_count">·</div>
+                                                        <div class="sr-account-stats-statuses font-weight-bold">
+                                                            <i class="far fa-clock fa-sm"></i>
+                                                            <span>{{ timeAgo(result.created_at) }}</span>
+                                                        </div>
+                                                    </div>
+                                                </template>
+                                                <template v-else>
+                                                    <div class="sr-account-stats">
+                                                        <div v-if="result.followers_count" class="sr-account-stats-followers font-weight-bold">
+                                                            <span>{{ formatCount(result.followers_count) }}</span>
+                                                            <span>Followers</span>
+                                                        </div>
+                                                        <div v-if="result.followers_count && result.statuses_count">·</div>
+                                                        <div v-if="result.statuses_count" class="sr-account-stats-statuses font-weight-bold">
+                                                            <span>{{ formatCount(result.statuses_count) }}</span>
+                                                            <span>Posts</span>
+                                                        </div>
+                                                        <div v-if="!result.followers_count && result.statuses_count">·</div>
+
+                                                        <div v-if="!result.followers_count && !result.statuses_count" class="sr-account-stats-statuses font-weight-bold">
+                                                            Remote Account
+                                                        </div>
+                                                        <div v-if="!result.followers_count && !result.statuses_count">
+                                                            ·
+                                                        </div>
+                                                        <b-button
+                                                            v-b-tooltip.html
+                                                            :title="'Joined ' + timeAgo(result.created_at) + ' ago'"
+                                                            variant="link"
+                                                            size="sm"
+                                                            class="sr-account-stats-statuses p-0"
+                                                            >
+                                                            <i class="far fa-clock fa-sm"></i>
+                                                            <span class="font-weight-bold">{{ timeAgo(result.created_at) }}</span>
+                                                        </b-button>
+                                                    </div>
+                                                </template>
+                                            </template>
+                                        </div>
+                                    </div>
+
+                                    <div v-else-if="result.s_type === 'hashtag'" class="media align-items-center my-0">
+                                        <div class="media-icon">
+                                            <i class="far fa-hashtag fa-large"></i>
+                                        </div>
+                                        <div class="media-body sr-tag">
+                                            <div class="sr-tag-name" :class="{ compact: result.name && result.name.length > 26 }">
+                                                #{{ result.name }}
+                                            </div>
+                                            <div v-if="result.count && result.count > 100" class="sr-tag-count">
+                                                {{ formatCount(result.count) }} {{ result.count == 1 ? 'Post' : 'Posts' }}
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div v-else-if="result.s_type === 'status'" class="media align-items-center my-0">
+                                        <img :src="result.account.avatar"  width="40" height="40" class="sr-avatar" style="border-radius: 40px" onerror="this.src='/storage/avatars/default.png?v=0';this.onerror=null;">
+
+                                        <div class="media-body sr-post">
+                                            <div class="sr-post-acct" :class="{ compact: result.acct && result.acct.length > 26 }">
+                                                &commat;{{ truncate(result.account.acct, 20) }}
+                                                <b-button
+                                                    v-if="result.locked"
+                                                    v-b-tooltip.html
+                                                    title="Private Account"
+                                                    variant="link"
+                                                    size="sm"
+                                                    class="p-0"
+                                                    >
+                                                    <i class="far fa-lock fa-sm text-lighter ml-1"></i>
+                                                </b-button>
+                                            </div>
+                                            <div class="sr-post-action">
+                                                <div class="sr-post-action-timestamp">
+                                                    <i class="far fa-clock fa-sm"></i>
+                                                    {{ timeAgo(result.created_at)}}
+                                                </div>
+                                                <div>·</div>
+                                                <div class="sr-post-action-label">
+                                                    Tap to view post
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </li>
+                            </template>
+                        </autocomplete>
+
+                    </div>
+                    <div class="ml-auto">
+                        <ul class="navbar-nav align-items-center">
+                            <li class="nav-item dropdown ml-2">
+                                <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="User Menu">
+                                    <i class="d-none far fa-user fa-lg text-dark"></i>
+                                    <span class="sr-only">User Menu</span>
+                                    <img :src="user.avatar" class="nav-avatar rounded-circle border shadow" width="30" height="30" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=0';">
+                                </a>
+
+                                <div class="dropdown-menu dropdown-menu-right shadow" aria-labelledby="navbarDropdown">
+                                    <ul class="nav flex-column">
+                                        <li class="nav-item nav-icons">
+                                            <div class="d-flex justify-content-between align-items-center">
+                                                <router-link class="nav-link text-center" to="/i/web">
+                                                    <div class="icon text-lighter"><i class="far fa-home fa-lg"></i></div>
+                                                    <div class="small">{{ $t('navmenu.homeFeed') }}</div>
+                                                </router-link>
+
+                                                <router-link v-if="hasLocalTimeline" class="nav-link text-center" :to="{ name: 'timeline', params: { scope: 'local' } }">
+                                                    <div class="icon text-lighter"><i class="fas fa-stream fa-lg"></i></div>
+                                                    <div class="small">{{ $t('navmenu.localFeed') }}</div>
+                                                </router-link>
+
+                                                <router-link v-if="hasNetworkTimeline" class="nav-link text-center" :to="{ name: 'timeline', params: { scope: 'global' } }">
+                                                    <div class="icon text-lighter"><i class="far fa-globe fa-lg"></i></div>
+                                                    <div class="small">{{ $t('navmenu.globalFeed') }}</div>
+                                                </router-link>
+                                            </div>
+                                        </li>
+
+                                        <li class="nav-item nav-icons">
+                                            <div class="d-flex justify-content-between align-items-center">
+                                                <router-link class="nav-link text-center" to="/i/web/discover">
+                                                    <div class="icon text-lighter"><i class="far fa-compass"></i></div>
+                                                    <div class="small">{{ $t('navmenu.discover') }}</div>
+                                                </router-link>
+
+                                                <router-link class="nav-link text-center" to="/i/web/notifications">
+                                                    <div class="icon text-lighter">
+                                                        <i class="far fa-bell"></i>
+                                                    </div>
+                                                    <div class="small">
+                                                        {{ $t('navmenu.notifications') }}
+                                                    </div>
+                                                </router-link>
+
+                                                <router-link class="nav-link text-center px-3" :to="'/i/web/profile/' + user.id">
+                                                    <div class="icon text-lighter">
+                                                        <i class="far fa-user"></i>
+                                                    </div>
+                                                    <div class="small">{{ $t('navmenu.profile') }}</div>
+                                                </router-link>
+                                            </div>
+                                            <hr class="mb-0" style="margin-top: -5px;opacity: 0.4;" />
+                                        </li>
+
+                                        <li class="nav-item">
+                                            <router-link class="nav-link" to="/i/web/compose">
+                                                <span class="icon text-lighter"><i class="far fa-plus-square"></i></span>
+                                                {{ $t('navmenu.compose') }}
+                                            </router-link>
+                                        </li>
+
+                                        <li class="nav-item">
+                                            <router-link class="nav-link d-flex justify-content-between align-items-center" to="/i/web/direct">
+                                                <span>
+                                                    <span class="icon text-lighter">
+                                                        <i class="far fa-envelope"></i>
+                                                    </span>
+                                                    {{ $t('navmenu.directMessages') }}
+                                                </span>
+                                            </router-link>
+                                        </li>
+
+                                        <li class="nav-item">
+                                            <a class="nav-link" href="/i/web" @click.prevent="openUserInterfaceSettings">
+                                                <span class="icon text-lighter"><i class="far fa-brush"></i></span>
+                                                {{ $t('navmenu.appearance') }}
+                                            </a>
+                                        </li>
+
+                                        <li class="nav-item">
+                                            <router-link class="nav-link" to="/settings/home">
+                                                <span class="icon text-lighter"><i class="far fa-cog"></i></span>
+                                                {{ $t('navmenu.settings') }}
+                                            </router-link>
+                                        </li>
+
+                                        <li v-if="user.is_admin" class="nav-item">
+                                            <hr class="mt-n1" style="opacity: 0.4;margin-bottom: 0;" />
+                                            <a class="nav-link" href="/i/admin/dashboard">
+                                                <span class="icon text-lighter">
+                                                    <i class="far fa-tools"></i>
+                                                </span>
+                                                {{ $t('navmenu.admin') }}
+                                            </a>
+                                        </li>
+
+                                        <li class="nav-item">
+                                            <hr class="mt-n1" style="opacity: 0.4;margin-bottom: 0;" />
+                                            <a class="nav-link" href="/" @click.prevent="logout()">
+                                                <span class="icon text-lighter">
+                                                    <i class="far fa-sign-out"></i>
+                                                </span>
+                                                {{ $t('navmenu.logout') }}
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+        </div>
+
+        <b-modal
+            ref="uis"
+            hide-footer
+            centered
+            body-class="p-0 ui-menu"
+            title="$t('navmenu.appearance')">
+            <div class="list-group list-group-flush">
+                <div class="list-group-item px-3">
+                    <div class="d-flex justify-content-between align-items-center">
+                        <div>
+                            <p class="font-weight-bold mb-1">{{ $t('appearance.theme') }}</p>
+                            <p class="small text-muted mb-0"></p>
+                        </div>
+
+                        <div class="btn-group btn-group-sm">
+                            <button
+                                class="btn"
+                                :class="[ uiColorScheme == 'system' ? 'btn-primary' : 'btn-outline-primary']"
+                                @click="toggleUi('system')">
+                                {{ $t('appearance.auto') }}
+                            </button>
+                            <button
+                                class="btn"
+                                :class="[ uiColorScheme == 'light' ? 'btn-primary' : 'btn-outline-primary']"
+                                @click="toggleUi('light')">
+                                {{ $t('appearance.lightMode') }}
+                            </button>
+                            <button
+                                class="btn"
+                                :class="[ uiColorScheme == 'dark' ? 'btn-primary' : 'btn-outline-primary']"
+                                @click="toggleUi('dark')">
+                                {{ $t('appearance.darkMode') }}
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="list-group-item px-3">
+                    <div class="d-flex justify-content-between align-items-center">
+                        <div>
+                            <p class="font-weight-bold mb-1">{{ $t('appearance.profileLayout') }}</p>
+                            <p class="small text-muted mb-0"></p>
+                        </div>
+
+                        <div class="btn-group btn-group-sm">
+                            <button
+                                class="btn"
+                                :class="[ profileLayout == 'grid' ? 'btn-primary' : 'btn-outline-primary']"
+                                @click="toggleProfileLayout('grid')">
+                                {{ $t('appearance.grid') }}
+                            </button>
+                            <button
+                                class="btn"
+                                :class="[ profileLayout == 'masonry' ? 'btn-primary' : 'btn-outline-primary']"
+                                @click="toggleProfileLayout('masonry')">
+                                {{ $t('appearance.masonry') }}
+                            </button>
+                            <button
+                                class="btn"
+                                :class="[ profileLayout == 'feed' ? 'btn-primary' : 'btn-outline-primary']"
+                                @click="toggleProfileLayout('feed')">
+                                {{ $t('appearance.feed') }}
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="list-group-item px-3">
+                    <div class="d-flex justify-content-between align-items-center">
+                        <div>
+                            <p class="font-weight-bold mb-0">{{ $t('appearance.compactPreviews') }}</p>
+                        </div>
+                        <b-form-checkbox v-model="fixedHeight" switch size="lg" />
+                    </div>
+                </div>
+
+                <div class="list-group-item px-3">
+                    <div class="d-flex justify-content-between align-items-center">
+                        <div>
+                            <p class="font-weight-bold mb-0">{{ $t('appearance.loadComments') }}</p>
+                        </div>
+                        <b-form-checkbox v-model="autoloadComments" switch size="lg" />
+                    </div>
+                </div>
+
+                <div class="list-group-item px-3">
+                    <div class="d-flex justify-content-between align-items-center">
+                        <div>
+                            <p class="font-weight-bold mb-0">{{ $t('appearance.hideStats') }}</p>
+                        </div>
+                        <b-form-checkbox v-model="hideCounts" switch size="lg" />
+                    </div>
+                </div>
+
+            </div>
+        </b-modal>
+    </nav>
 </template>
 
 <script type="text/javascript">
-	import Autocomplete from '@trevoreyre/autocomplete-vue'
-	import '@trevoreyre/autocomplete-vue/dist/style.css'
-
-	export default {
-		components: {
-			Autocomplete
-		},
-
-		data() {
-			return {
-				brandName: 'pixelfed',
-				user: window._sharedData.user,
-				profileLayoutModel: 'grid',
-				hasLocalTimeline: true,
-				hasNetworkTimeline: false
-			}
-		},
-
-		computed: {
-			profileLayout: {
-				get() {
-					return this.$store.state.profileLayout;
-				},
-
-				set(val) {
-					this.$store.commit('setProfileLayout', val);
-				}
-			},
-
-			hideCounts: {
-				get() {
-					return this.$store.state.hideCounts;
-				},
-
-				set(val) {
-					this.$store.commit('setHideCounts', val);
-				}
-			},
-			autoloadComments: {
-				get() {
-					return this.$store.state.autoloadComments;
-				},
-
-				set(val) {
-					this.$store.commit('setAutoloadComments', val);
-				}
-			},
-			newReactions: {
-				get() {
-					return this.$store.state.newReactions;
-				},
-
-				set(val) {
-					this.$store.commit('setNewReactions', val);
-				}
-			},
-
-			fixedHeight: {
-				get() {
-					return this.$store.state.fixedHeight;
-				},
-
-				set(val) {
-					this.$store.commit('setFixedHeight', val);
-				}
-			},
-
-			uiColorScheme: {
-				get() {
-					return this.$store.state.colorScheme;
-				},
-
-				set(val) {
-					this.$store.commit('setColorScheme', val);
-				}
-			}
-		},
-
-		mounted() {
-			if(window.App.config.features.hasOwnProperty('timelines')) {
-				this.hasLocalTimeline = App.config.features.timelines.local;
-				this.hasNetworkTimeline = App.config.features.timelines.network;
-			}
-
-			let u = new URLSearchParams(window.location.search);
-			if(u.has('q') && u.get('q') && u.has('src') && u.get('src') === 'ac') {
-				this.$refs.autocomplete.setValue(u.get('q'));
-				setTimeout(() => {
-					let ai = document.querySelector('.autocomplete-input')
-					ai.focus();
-				}, 1000)
-			}
-
-			this.brandName = window.App.config.site.name;
-		},
-
-		methods: {
-			autocompleteSearch(q) {
-				if (!q || q.length < 2) {
-					return [];
-				}
-
-				let resolve = q.startsWith('https://') || q.startsWith('@');
-
-				return axios.get('/api/v2/search', {
-					params: {
-						q: q,
-						resolve: resolve,
-						'_pe': 1
-					}
-				}).then(res => {
-					let results = [];
-					let accounts = res.data.accounts.map(res => {
-						let account = res;
-						account.s_type = 'account';
-						return account;
-					});
-					let hashtags = res.data.hashtags.map(res => {
-						let tag = res;
-						tag.s_type = 'hashtag';
-						return tag;
-					})
-					// let statuses = res.data.statuses.map(res => {
-					// 	let status = res;
-					// 	status.s_type = 'status';
-					// 	return status;
-					// });
-
-					// results.push(...statuses.slice(0,5));
-					results.push(...accounts.slice(0,5));
-					results.push(...hashtags.slice(0,5));
-
-					if(res.data.statuses) {
-						if(Array.isArray(res.data.statuses)) {
-							let statuses = res.data.statuses.map(res => {
-								let status = res;
-								status.s_type = 'status';
-								return status;
-							});
-							results.push(...statuses);
-						} else {
-							if(q === res.data.statuses.url) {
-								this.$refs.autocomplete.value = '';
-
-								this.$router.push({
-									name: 'post',
-									path: `/i/web/post/${res.data.statuses.id}`,
-									params: {
-										id: res.data.statuses.id,
-										cachedStatus: res.data.statuses,
-										cachedProfile: this.user
-									}
-								});
-							}
-						}
-					}
-					return results;
-				});
-			},
-
-			getSearchResultValue(result) {
-				return result;
-			},
-
-			onSearchSubmit(result) {
-				if (result.length < 1) {
-					return;
-				}
-				this.$refs.autocomplete.value = '';
-				switch(result.s_type) {
-					case 'account':
-						// this.$router.push({
-						// 	name: 'profile',
-						// 	path: `/i/web/profile/${result.id}`,
-						// 	params: {
-						// 		id: result.id,
-						// 		cachedProfile: result,
-						// 		cachedUser: this.user
-						// 	}
-						// });
-						location.href = `/i/web/profile/${result.id}`;
-					break;
-
-					case 'hashtag':
-						// this.$router.push({
-						// 	name: 'hashtag',
-						// 	path: `/i/web/hashtag/${result.name}`,
-						// 	params: {
-						// 		id: result.name,
-						// 	}
-						// });
-						location.href = `/i/web/hashtag/${result.name}`;
-					break;
-
-					case 'status':
-						// this.$router.push({
-						// 	name: 'post',
-						// 	path: `/i/web/post/${result.id}`,
-						// 	params: {
-						// 		id: result.id,
-						// 	}
-						// });
-						location.href = `/i/web/post/${result.id}`;
-					break;
-				}
-			},
-
-			truncate(text, limit = 30) {
-				if(text.length <= limit) {
-					return text;
-				}
-
-				return text.slice(0, limit) + '...'
-			},
-
-			timeAgo(ts) {
-				return window.App.util.format.timeAgo(ts);
-			},
-
-			formatCount(val) {
-				if(!val) {
-					return 0;
-				}
-
-				return new Intl.NumberFormat('en-CA', { notation: 'compact' , compactDisplay: "short" }).format(val);
-			},
-
-			logout() {
-				axios.post('/logout')
-				.then(res => {
-					location.href = '/';
-				}).catch(err => {
-					location.href = '/';
-				})
-			},
-
-			openUserInterfaceSettings() {
-				event.currentTarget.blur();
-				this.$refs.uis.show();
-			},
-
-			toggleUi(ui) {
-				event.currentTarget.blur();
-				this.uiColorScheme = ui;
-			},
-
-			toggleProfileLayout(layout) {
-				event.currentTarget.blur();
-				this.profileLayout = layout;
-			}
-		}
-	}
+    import Autocomplete from '@trevoreyre/autocomplete-vue'
+    import '@trevoreyre/autocomplete-vue/dist/style.css'
+
+    export default {
+        components: {
+            Autocomplete
+        },
+
+        data() {
+            return {
+                brandName: 'pixelfed',
+                user: window._sharedData.user,
+                profileLayoutModel: 'grid',
+                hasLocalTimeline: true,
+                hasNetworkTimeline: false
+            }
+        },
+
+        computed: {
+            profileLayout: {
+                get() {
+                    return this.$store.state.profileLayout;
+                },
+
+                set(val) {
+                    this.$store.commit('setProfileLayout', val);
+                }
+            },
+
+            hideCounts: {
+                get() {
+                    return this.$store.state.hideCounts;
+                },
+
+                set(val) {
+                    this.$store.commit('setHideCounts', val);
+                }
+            },
+            autoloadComments: {
+                get() {
+                    return this.$store.state.autoloadComments;
+                },
+
+                set(val) {
+                    this.$store.commit('setAutoloadComments', val);
+                }
+            },
+            newReactions: {
+                get() {
+                    return this.$store.state.newReactions;
+                },
+
+                set(val) {
+                    this.$store.commit('setNewReactions', val);
+                }
+            },
+
+            fixedHeight: {
+                get() {
+                    return this.$store.state.fixedHeight;
+                },
+
+                set(val) {
+                    this.$store.commit('setFixedHeight', val);
+                }
+            },
+
+            uiColorScheme: {
+                get() {
+                    return this.$store.state.colorScheme;
+                },
+
+                set(val) {
+                    this.$store.commit('setColorScheme', val);
+                }
+            }
+        },
+
+        mounted() {
+            if(window.App.config.features.hasOwnProperty('timelines')) {
+                this.hasLocalTimeline = App.config.features.timelines.local;
+                this.hasNetworkTimeline = App.config.features.timelines.network;
+            }
+
+            let u = new URLSearchParams(window.location.search);
+            if(u.has('q') && u.get('q') && u.has('src') && u.get('src') === 'ac') {
+                this.$refs.autocomplete.setValue(u.get('q'));
+                setTimeout(() => {
+                    let ai = document.querySelector('.autocomplete-input')
+                    ai.focus();
+                }, 1000)
+            }
+
+            this.brandName = window.App.config.site.name;
+        },
+
+        methods: {
+            autocompleteSearch(q) {
+                if (!q || q.length < 2) {
+                    return [];
+                }
+
+                let resolve = q.startsWith('https://') || q.startsWith('@');
+
+                return axios.get('/api/v2/search', {
+                    params: {
+                        q: q,
+                        resolve: resolve,
+                        '_pe': 1
+                    }
+                }).then(res => {
+                    let results = [];
+                    let accounts = res.data.accounts.map(res => {
+                        let account = res;
+                        account.s_type = 'account';
+                        return account;
+                    });
+                    let hashtags = res.data.hashtags.map(res => {
+                        let tag = res;
+                        tag.s_type = 'hashtag';
+                        return tag;
+                    })
+
+                    results.push(...accounts.slice(0,5));
+                    results.push(...hashtags.slice(0,5));
+
+                    if(res.data.statuses) {
+                        if(Array.isArray(res.data.statuses)) {
+                            let statuses = res.data.statuses.map(res => {
+                                let status = res;
+                                status.s_type = 'status';
+                                return status;
+                            });
+                            results.push(...statuses);
+                        } else {
+                            if(q === res.data.statuses.url) {
+                                this.$refs.autocomplete.value = '';
+
+                                this.$router.push({
+                                    name: 'post',
+                                    path: `/i/web/post/${res.data.statuses.id}`,
+                                    params: {
+                                        id: res.data.statuses.id,
+                                        cachedStatus: res.data.statuses,
+                                        cachedProfile: this.user
+                                    }
+                                });
+                            }
+                        }
+                    }
+                    return results;
+                });
+            },
+
+            getSearchResultValue(result) {
+                return result;
+            },
+
+            onSearchSubmit(result) {
+                if (result.length < 1) {
+                    return;
+                }
+                this.$refs.autocomplete.value = '';
+                switch(result.s_type) {
+                    case 'account':
+                        location.href = `/i/web/profile/${result.id}`;
+                    break;
+
+                    case 'hashtag':
+                        location.href = `/i/web/hashtag/${result.name}`;
+                    break;
+
+                    case 'status':
+                        location.href = `/i/web/post/${result.id}`;
+                    break;
+                }
+            },
+
+            truncate(text, limit = 30) {
+                if(text.length <= limit) {
+                    return text;
+                }
+
+                return text.slice(0, limit) + '...'
+            },
+
+            timeAgo(ts) {
+                return window.App.util.format.timeAgo(ts);
+            },
+
+            formatCount(val) {
+                if(!val) {
+                    return 0;
+                }
+
+                return new Intl.NumberFormat('en-CA', { notation: 'compact' , compactDisplay: "short" }).format(val);
+            },
+
+            logout() {
+                axios.post('/logout')
+                .then(res => {
+                    location.href = '/';
+                }).catch(err => {
+                    location.href = '/';
+                })
+            },
+
+            openUserInterfaceSettings() {
+                event.currentTarget.blur();
+                this.$refs.uis.show();
+            },
+
+            toggleUi(ui) {
+                event.currentTarget.blur();
+                this.uiColorScheme = ui;
+            },
+
+            toggleProfileLayout(layout) {
+                event.currentTarget.blur();
+                this.profileLayout = layout;
+            }
+        }
+    }
 </script>
 
 <style lang="scss">
-	.metro-nav {
-		z-index: 4;
-
-		.dropdown-menu {
-			min-width: 18rem;
-			padding: 0;
-			border: none;
-
-			.nav {
-				overflow: auto;
-			}
-
-			.nav-item {
-				.nav-link {
-					font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
-					font-weight: 500;
-					color: rgba(156,163,175, 1);
-					padding-left: 14px;
-					margin-bottom: 5px;
-
-					.icon {
-						display: inline-block;
-						width: 40px;
-						text-align: center;
-					}
-
-				}
-
-				.router-link-exact-active {
-					color: var(--primary);
-					font-weight: 700;
-					padding-left: 14px;
-
-					&:not(.text-center) {
-						padding-left: 10px;
-						border-left: 4px solid var(--primary);
-					}
-
-					.icon {
-						color: var(--primary) !important;
-					}
-				}
-
-				&.nav-icons {
-					.small {
-						font-weight: 700 !important;
-					}
-				}
-
-				&:is(:last-child) {
-					.nav-link {
-						margin-bottom: 0;
-						border-bottom-left-radius: 15px;
-						border-bottom-right-radius: 15px;
-					}
-				}
-			}
-		}
-
-		.fa-layers {
-			display: inline-block;
-			height: 1em;
-			position: relative;
-			text-align: center;
-			vertical-align: -0.125em;
-			width: 1em;
-
-			.fa-layers-counter {
-				background-color: #ff253a;
-				border-radius: 1em;
-				-webkit-box-sizing: border-box;
-				box-sizing: border-box;
-				color: #fff;
-				height: 1.5em;
-				line-height: 1;
-				max-width: 5em;
-				min-width: 1.5em;
-				overflow: hidden;
-				padding: 0.25em;
-				right: 0;
-				text-overflow: ellipsis;
-				top: 0;
-				transform: scale(.5);
-				-webkit-transform-origin: top right;
-				transform-origin: top right;
-
-				display: inline-block;
-			    position: absolute;
-
-			    margin-right: -5px;
-			    margin-top: -10px;
-			}
-
-			.far {
-				bottom: 0;
-				left: 0;
-				margin: auto;
-				position: absolute;
-				right: 0;
-				top: 0;
-			}
-		}
-
-		.searchbox {
-			@media (min-width: 768px) {
-				width: 300px;
-			}
-		}
-
-		.nav-avatar {
-			@media (min-width: 768px) {
-				width: 50px;
-				height: 50px;
-			}
-		}
-
-		.autocomplete[data-loading="true"]::after {
-			content: "";
-			border-right: 3px solid var(--primary);
-		}
-
-		.autocomplete {
-			&-input {
-				padding: 0.375rem 0.75rem 0.375rem 2.6rem;
-				background-color: var(--light-gray);
-				font-size: 0.9rem;
-				border-radius: 50rem;
-				background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQjhDMkNDIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMTEiIGN5PSIxMSIgcj0iNSIvPjxwYXRoIGQ9Ik0xOSAxOWwtNC00Ii8+PC9zdmc+");
-				box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%) !important;
-			}
-
-			&-result {
-				background-image: none;
-				padding: 10px 12px;
-				cursor: pointer;
-
-				&-list {
-					box-shadow: 0 0.125rem 0.45rem var(--border-color);
-					-ms-overflow-style: none;
-					scrollbar-width: none;
-
-					&::-webkit-scrollbar {
-						width: 0 !important
-					}
-				}
-
-				.media-icon {
-					display: flex;
-					justify-content: center;
-					align-items: center;
-					width: 40px;
-					height: 40px;
-					margin-right: 12px;
-					background: var(--light-gray);
-					border: 1px solid var(--input-border);
-					border-radius: 40px;
-					box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%);
-				}
-
-			}
-		}
-
-		.sr {
-			&:not(:last-child) {
-				border-bottom: 1px solid var(--input-border);
-			}
-
-			&-avatar {
-				margin-right: 12px;
-				box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)
-			}
-
-			&-account {
-				display: flex;
-				flex-direction: column;
-				align-items: flex-start;
-				justify-content: center;
-				gap: 3px;
-
-				&-acct {
-					word-wrap: break-word;
-					word-break: break-all;
-					font-size: 14px;
-					line-height: 18px;
-					font-weight: bold;
-					color: var(--dark);
-					margin-right: 1rem;
-
-					&.compact {
-						font-size: 12px;
-					}
-				}
-
-				&-stats {
-					display: flex;
-					align-items: center;
-					gap: 5px;
-					line-height: 14px;
-
-					&-followers,
-					&-statuses {
-						font-size: 11px;
-						font-weight: 500;
-						color: var(--text-lighter);
-					}
-				}
-			}
-
-			&-tag {
-				display: flex;
-				flex-direction: column;
-				align-items: flex-start;
-				justify-content: center;
-				gap: 3px;
-
-				&-name {
-					word-wrap: break-word;
-					word-break: break-all;
-					font-size: 14px;
-					line-height: 18px;
-					font-weight: bold;
-					color: var(--dark);
-					margin-right: 1rem;
-
-					&.compact {
-						font-size: 12px;
-					}
-				}
-
-				&-count {
-					font-size: 11px;
-					line-height: 13px;
-					color: var(--text-lighter);
-					font-weight: bold;
-				}
-			}
-
-			&-post {
-				display: flex;
-				flex-direction: column;
-				align-items: flex-start;
-				justify-content: center;
-				gap: 3px;
-
-				&-acct {
-					font-size: 14px;
-					line-height: 18px;
-					font-weight: bold;
-					color: var(--dark);
-				}
-
-				&-action {
-					display: flex;
-					font-size: 11px;
-					line-height: 14px;
-					color: var(--text-lighter);
-					font-weight: 500;
-					gap: 3px;
-					align-items: center;
-
-					&-timestamp {
-						font-weight: 700;
-					}
-
-					&-label {
-						font-weight: 700;
-					}
-				}
-			}
-		}
-	}
-
-	.force-dark-mode {
-		.autocomplete-result-list {
-			border-color: var(--input-border);
-		}
-
-		.autocomplete-result:hover, .autocomplete-result[aria-selected=true] {
-			box-shadow: 0;
-    		background-color: rgba(255, 255, 255, .1);
-		}
-
-		.autocomplete[data-loading="true"]::after {
-			content: "";
-			border: 3px solid rgba(255, 255, 255, 0.22);
-			border-right: 3px solid var(--primary);
-		}
-	}
+    .metro-nav {
+        z-index: 4;
+
+        .dropdown-menu {
+            min-width: 18rem;
+            padding: 0;
+            border: none;
+
+            .nav {
+                overflow: auto;
+            }
+
+            .nav-item {
+                .nav-link {
+                    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
+                    font-weight: 500;
+                    color: rgba(156,163,175, 1);
+                    padding-left: 14px;
+                    margin-bottom: 5px;
+
+                    .icon {
+                        display: inline-block;
+                        width: 40px;
+                        text-align: center;
+                    }
+
+                }
+
+                .router-link-exact-active {
+                    color: var(--primary);
+                    font-weight: 700;
+                    padding-left: 14px;
+
+                    &:not(.text-center) {
+                        padding-left: 10px;
+                        border-left: 4px solid var(--primary);
+                    }
+
+                    .icon {
+                        color: var(--primary) !important;
+                    }
+                }
+
+                &.nav-icons {
+                    .small {
+                        font-weight: 700 !important;
+                    }
+                }
+
+                &:is(:last-child) {
+                    .nav-link {
+                        margin-bottom: 0;
+                        border-bottom-left-radius: 15px;
+                        border-bottom-right-radius: 15px;
+                    }
+                }
+            }
+        }
+
+        .fa-layers {
+            display: inline-block;
+            height: 1em;
+            position: relative;
+            text-align: center;
+            vertical-align: -0.125em;
+            width: 1em;
+
+            .fa-layers-counter {
+                background-color: #ff253a;
+                border-radius: 1em;
+                -webkit-box-sizing: border-box;
+                box-sizing: border-box;
+                color: #fff;
+                height: 1.5em;
+                line-height: 1;
+                max-width: 5em;
+                min-width: 1.5em;
+                overflow: hidden;
+                padding: 0.25em;
+                right: 0;
+                text-overflow: ellipsis;
+                top: 0;
+                transform: scale(.5);
+                -webkit-transform-origin: top right;
+                transform-origin: top right;
+
+                display: inline-block;
+                position: absolute;
+
+                margin-right: -5px;
+                margin-top: -10px;
+            }
+
+            .far {
+                bottom: 0;
+                left: 0;
+                margin: auto;
+                position: absolute;
+                right: 0;
+                top: 0;
+            }
+        }
+
+        .searchbox {
+            @media (min-width: 768px) {
+                width: 300px;
+            }
+        }
+
+        .nav-avatar {
+            @media (min-width: 768px) {
+                width: 50px;
+                height: 50px;
+            }
+        }
+
+        .autocomplete[data-loading="true"]::after {
+            content: "";
+            border-right: 3px solid var(--primary);
+        }
+
+        .autocomplete {
+            &-input {
+                padding: 0.375rem 0.75rem 0.375rem 2.6rem;
+                background-color: var(--light-gray);
+                font-size: 0.9rem;
+                border-radius: 50rem;
+                background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQjhDMkNDIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMTEiIGN5PSIxMSIgcj0iNSIvPjxwYXRoIGQ9Ik0xOSAxOWwtNC00Ii8+PC9zdmc+");
+                box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%) !important;
+            }
+
+            &-result {
+                background-image: none;
+                padding: 10px 12px;
+                cursor: pointer;
+
+                &-list {
+                    box-shadow: 0 0.125rem 0.45rem var(--border-color);
+                    -ms-overflow-style: none;
+                    scrollbar-width: none;
+
+                    &::-webkit-scrollbar {
+                        width: 0 !important
+                    }
+                }
+
+                .media-icon {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    width: 40px;
+                    height: 40px;
+                    margin-right: 12px;
+                    background: var(--light-gray);
+                    border: 1px solid var(--input-border);
+                    border-radius: 40px;
+                    box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%);
+                }
+
+            }
+        }
+
+        .sr {
+            &:not(:last-child) {
+                border-bottom: 1px solid var(--input-border);
+            }
+
+            &-avatar {
+                margin-right: 12px;
+                box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)
+            }
+
+            &-account {
+                display: flex;
+                flex-direction: column;
+                align-items: flex-start;
+                justify-content: center;
+                gap: 3px;
+
+                &-acct {
+                    word-wrap: break-word;
+                    word-break: break-all;
+                    font-size: 14px;
+                    line-height: 18px;
+                    font-weight: bold;
+                    color: var(--dark);
+                    margin-right: 1rem;
+
+                    &.compact {
+                        font-size: 12px;
+                    }
+                }
+
+                &-stats {
+                    display: flex;
+                    align-items: center;
+                    gap: 5px;
+                    line-height: 14px;
+
+                    &-followers,
+                    &-statuses {
+                        font-size: 11px;
+                        font-weight: 500;
+                        color: var(--text-lighter);
+                    }
+                }
+            }
+
+            &-tag {
+                display: flex;
+                flex-direction: column;
+                align-items: flex-start;
+                justify-content: center;
+                gap: 3px;
+
+                &-name {
+                    word-wrap: break-word;
+                    word-break: break-all;
+                    font-size: 14px;
+                    line-height: 18px;
+                    font-weight: bold;
+                    color: var(--dark);
+                    margin-right: 1rem;
+
+                    &.compact {
+                        font-size: 12px;
+                    }
+                }
+
+                &-count {
+                    font-size: 11px;
+                    line-height: 13px;
+                    color: var(--text-lighter);
+                    font-weight: bold;
+                }
+            }
+
+            &-post {
+                display: flex;
+                flex-direction: column;
+                align-items: flex-start;
+                justify-content: center;
+                gap: 3px;
+
+                &-acct {
+                    font-size: 14px;
+                    line-height: 18px;
+                    font-weight: bold;
+                    color: var(--dark);
+                }
+
+                &-action {
+                    display: flex;
+                    font-size: 11px;
+                    line-height: 14px;
+                    color: var(--text-lighter);
+                    font-weight: 500;
+                    gap: 3px;
+                    align-items: center;
+
+                    &-timestamp {
+                        font-weight: 700;
+                    }
+
+                    &-label {
+                        font-weight: 700;
+                    }
+                }
+            }
+        }
+    }
+
+    .force-dark-mode {
+        .autocomplete-result-list {
+            border-color: var(--input-border);
+        }
+
+        .autocomplete-result:hover, .autocomplete-result[aria-selected=true] {
+            box-shadow: 0;
+            background-color: rgba(255, 255, 255, .1);
+        }
+
+        .autocomplete[data-loading="true"]::after {
+            content: "";
+            border: 3px solid rgba(255, 255, 255, 0.22);
+            border-right: 3px solid var(--primary);
+        }
+    }
 </style>