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">
+			<v-popover>
+				<div class="header-account">
+					<div class="account">
 						<Icon
-					v-show="!sfw"
+							icon="user3-long"
-					v-tooltip="'Hit S to enable safe mode'"
+							class="avatar"
-					icon="flower"
-					class="toggle noselect"
-					@click.native="setSfw(true)"
-				/>
-
-				<Icon
-					v-show="sfw"
-					v-tooltip="'Hit N to disable safe mode'"
-					icon="fire"
-					class="toggle noselect"
-					@click.native="setSfw(false)"
-				/>
-
-				<Icon
-					v-show="theme === 'light'"
-					v-tooltip="'Hit D to use dark theme'"
-					icon="moon"
-					class="toggle noselect"
-					@click.native="setTheme('dark')"
-				/>
-
-				<Icon
-					v-show="theme === 'dark'"
-					v-tooltip="'Hit L to use light theme'"
-					icon="sun"
-					class="toggle noselect"
-					@click.native="setTheme('light')"
 						/>
 					</div>
+				</div>
+
+				<div
+					slot="popover"
+					class="menu"
+				>
+					<ul class="menu-items noselect">
+						<li class="menu-item disabled">
+							<Icon icon="enter2" />Sign in
+						</li>
+
+						<li
+							v-show="!sfw"
+							class="menu-item"
+							@click="setSfw(true)"
+						>
+							<Icon
+								icon="flower"
+								class="toggle noselect"
+							/>Safe mode
+						</li>
+
+						<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 {
+    .header-account {
-        margin: 0;
+		padding: 1rem .5rem 1rem 1rem;
     }
 }
 
@@ -374,16 +477,7 @@ export default {
         display: none;
     }
 
-	.header-toggles {
+	.header-account {
-		display: none;
-	}
-}
-
-@media(max-width: $breakpoint-micro) {
-}
-
-@media(max-width: $breakpoint-nano) {
-	.header-toggles {
 		display: none;
 	}
 }

assets/img/icons/enter.svg

@@ -0,0 +1,6 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>enter</title>
+<path d="M7 13l4.5-4.5-4.5-4.5v3h-7v3h7v3z"></path>
+<path d="M15 16h-11v-2h10v-11h-10v-2h11c0.552 0 1 0.448 1 1v13c0 0.552-0.448 1-1 1z"></path>
+</svg>

assets/img/icons/enter2.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>enter2</title>
+<path d="M15 0v16h-12v-5h1v3h7v-12h-7v3h-1v-5zM6 9h-6v-2h6v-3l4 4-4 4z"></path>
+</svg>

assets/img/icons/enter3.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>enter3</title>
+<path d="M6 8h-5v-2h5v-2l3 3-3 3zM16 0v13l-6 3v-3h-6v-4h1v3h5v-9l4-2h-9v4h-1v-5z"></path>
+</svg>

assets/img/icons/exit.svg

@@ -0,0 +1,6 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>exit</title>
+<path d="M11 13l4.5-4.5-4.5-4.5v3h-7v3h7v3z"></path>
+<path d="M1 1h11v2h-10v11h10v2h-11c-0.552 0-1-0.448-1-1v-13c0-0.552 0.448-1 1-1z"></path>
+</svg>

assets/img/icons/exit2.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>exit2</title>
+<path d="M12 9h-7v-2h7v-3l4 4-4 4zM10 10v6h-10v-16h10v6h-1v-4h-5v12h5v-4z"></path>
+</svg>

assets/img/icons/exit3.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>exit3</title>
+<path d="M12 10v-2h-5v-2h5v-2l3 3zM11 9v4h-5v3l-6-3v-13h11v5h-1v-4h-8l4 2v9h4v-3z"></path>
+</svg>

assets/img/icons/user-tie.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>user-tie</title>
+<path d="M5 3c0-1.657 1.343-3 3-3s3 1.343 3 3c0 1.657-1.343 3-3 3s-3-1.343-3-3zM12.001 7h-0.553l-3.111 6.316 1.163-5.816-1.5-1.5-1.5 1.5 1.163 5.816-3.111-6.316h-0.554c-1.999 0-1.999 1.344-1.999 3v5h12v-5c0-1.656 0-3-1.999-3z"></path>
+</svg>

assets/img/icons/user3-long.svg

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   width="16"
+   height="19"
+   viewBox="0 0 16 19"
+   id="svg6">
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>user3</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs10" />
+  <title
+     id="title2">user3</title>
+  <path
+     d="M 4,4 C 4,1.791 5.791,0 8,0 10.209,0 12,1.791 12,4 12,6.209 10.209,8 8,8 5.791,8 4,6.209 4,4 Z m 8,5 H 4 C 1.791,9 0,10.791 0,13 v 6 H 16 V 13 C 16,10.791 14.209,9 12,9 Z"
+     id="path4" />
+</svg>

assets/img/icons/user3.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>user3</title>
+<path d="M4 5c0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.209-1.791 4-4 4s-4-1.791-4-4zM12 10h-8c-2.209 0-4 1.791-4 4v1h16v-1c0-2.209-1.791-4-4-4z"></path>
+</svg>

assets/img/icons/user7.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>user7</title>
+<path d="M5 4c0-1.657 1.343-3 3-3s3 1.343 3 3c0 1.657-1.343 3-3 3s-3-1.343-3-3zM8 8c-3.314 0-6 3.134-6 7h2c0-2.761 1.791-5 4-5s4 2.239 4 5h2c0-3.866-2.686-7-6-7z"></path>
+</svg>

assets/img/icons/users5.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>users5</title>
+<path d="M3 6c0-1.105 0.895-2 2-2s2 0.895 2 2c0 1.105-0.895 2-2 2s-2-0.895-2-2zM9 3c0-1.105 0.895-2 2-2s2 0.895 2 2c0 1.105-0.895 2-2 2s-2-0.895-2-2zM5 9c-2.761 0-5 2.686-5 6h1.5c0-0.64 0.103-1.258 0.308-1.837 0.192-0.546 0.465-1.032 0.809-1.446 0.654-0.785 1.501-1.218 2.383-1.218s1.729 0.432 2.383 1.218c0.345 0.414 0.617 0.9 0.809 1.446 0.204 0.579 0.308 1.197 0.308 1.837h1.5c0-3.314-2.239-6-5-6zM11 6c-1.472 0-2.794 0.763-3.709 1.977 0.112 0.049 0.224 0.101 0.335 0.157 0.34 0.173 0.664 0.376 0.97 0.61 0.007-0.009 0.014-0.018 0.022-0.027 0.654-0.785 1.501-1.218 2.383-1.218s1.729 0.432 2.383 1.218c0.345 0.414 0.617 0.9 0.809 1.446 0.204 0.579 0.308 1.197 0.308 1.837h1.5c0-3.314-2.239-6-5-6z"></path>
+</svg>