Added tooltip menu with header toggles and upcoming filter access.

assets/components/header/header.vue

@@ -78,39 +78,75 @@
 				@click.stop="toggleSidebar"
 			><Icon icon="menu" /></div>
 
-			<div class="header-toggles">
-				<Icon
-					v-show="!sfw"
-					v-tooltip="'Hit S to enable safe mode'"
-					icon="flower"
-					class="toggle noselect"
-					@click.native="setSfw(true)"
-				/>
+			<v-popover>
+				<div class="header-account">
+					<div class="account">
+						<Icon
+							icon="user3-long"
+							class="avatar"
+						/>
+					</div>
+				</div>
 
-				<Icon
-					v-show="sfw"
-					v-tooltip="'Hit N to disable safe mode'"
-					icon="fire"
-					class="toggle noselect"
-					@click.native="setSfw(false)"
-				/>
+				<div
+					slot="popover"
+					class="menu"
+				>
+					<ul class="menu-items noselect">
+						<li class="menu-item disabled">
+							<Icon icon="enter2" />Sign in
+						</li>
 
-				<Icon
-					v-show="theme === 'light'"
-					v-tooltip="'Hit D to use dark theme'"
-					icon="moon"
-					class="toggle noselect"
-					@click.native="setTheme('dark')"
-				/>
+						<li
+							v-show="!sfw"
+							class="menu-item"
+							@click="setSfw(true)"
+						>
+							<Icon
+								icon="flower"
+								class="toggle noselect"
+							/>Safe mode
+						</li>
 
-				<Icon
-					v-show="theme === 'dark'"
-					v-tooltip="'Hit L to use light theme'"
-					icon="sun"
-					class="toggle noselect"
-					@click.native="setTheme('light')"
-				/>
-			</div>
+						<li
+							v-show="sfw"
+							class="menu-item"
+							@click="setSfw(false)"
+						>
+							<Icon
+								icon="fire"
+								class="toggle noselect"
+							/>Filth mode
+						</li>
+
+						<li
+							v-show="theme === 'light'"
+							class="menu-item"
+							@click="setTheme('dark')"
+						>
+							<Icon
+								icon="moon"
+								class="toggle noselect"
+							/>Dark theme
+						</li>
+
+						<li
+							v-show="theme === 'dark'"
+							class="menu-item"
+							@click="setTheme('light')"
+						>
+							<Icon
+								icon="sun"
+								class="toggle noselect"
+							/>Light theme
+						</li>
+
+						<li class="menu-item">
+							<Icon icon="filter" />Filters
+						</li>
+					</ul>
+				</div>
+			</v-popover>
 
 			<Search class="search-full" />
 
@@ -318,6 +354,73 @@ export default {
     }
 }
 
+.header-account {
+	padding: 1rem;
+
+	&:hover {
+		cursor: pointer;
+
+		.account {
+			border-color: var(--primary);
+		}
+
+		.avatar {
+			fill: var(--primary);
+		}
+	}
+}
+
+.account {
+	width: 1.25rem;
+	height: 1.25rem;
+	display: flex;
+	justify-content: center;
+	border: solid 2px var(--shadow);
+	border-radius: 1.5rem;
+	overflow: hidden;
+
+	.avatar {
+		width: 1rem;
+		height: 1rem;
+		margin: .3rem 0 0 0;
+		fill: var(--shadow);
+	}
+}
+
+.menu-items {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+
+.menu-item {
+	display: flex;
+	padding: .75rem 1rem .75rem .75rem;
+
+	.icon {
+		fill: var(--darken);
+		margin: 0 1rem 0 0;
+	}
+
+	&.disabled {
+		color: var(--darken-weak);
+		cursor: default;
+
+		.icon {
+			fill: var(--darken-weak);
+		}
+	}
+
+	&:hover:not(.disabled) {
+		cursor: pointer;
+		color: var(--primary);
+
+		.icon {
+			fill: var(--primary);
+		}
+	}
+}
+
 .search-compact {
     display: none;
     height: 100%;
@@ -352,8 +455,8 @@ export default {
         display: flex;
     }
 
-    .header-toggles {
-        margin: 0;
+    .header-account {
+		padding: 1rem .5rem 1rem 1rem;
     }
 }
 
@@ -374,16 +477,7 @@ export default {
         display: none;
     }
 
-	.header-toggles {
-		display: none;
-	}
-}
-
-@media(max-width: $breakpoint-micro) {
-}
-
-@media(max-width: $breakpoint-nano) {
-	.header-toggles {
+	.header-account {
 		display: none;
 	}
 }