Improved sidebar design, added sfw and theme toggles.

assets/components/header/header.vue

@@ -1,11 +1,16 @@
 <template>
 	<header class="header">
 		<div class="header-nav">
-			<Icon
-				icon="menu"
+			<div
 				class="sidebar-toggle"
-				@click.native.stop="toggleSidebar"
-			/>
+				@click.stop="toggleSidebar"
+			>
+				<Icon icon="menu" />
+				<div
+					class="logo"
+					v-html="logo"
+				/>
+			</div>
 
 			<router-link
 				to="/"
@@ -68,7 +73,7 @@
 			<div class="header-toggles">
 				<Icon
 					v-show="!sfw"
-					v-tooltip="'Hit S to use SFW mode'"
+					v-tooltip="'Hit S to enable safe mode'"
 					icon="flower"
 					class="toggle noselect"
 					@click.native="setSfw(true)"
@@ -76,9 +81,9 @@
 
 				<Icon
 					v-show="sfw"
-					v-tooltip="'Hit N to use NSFW mode'"
-					icon="flower"
-					class="toggle active noselect"
+					v-tooltip="'Hit N to disable safe mode'"
+					icon="evil2"
+					class="toggle noselect"
 					@click.native="setSfw(false)"
 				/>
 
@@ -207,14 +212,27 @@ export default {
 
 .sidebar-toggle {
     display: none;
-    fill: var(--shadow-modest);
-    padding: 0 1rem;
-    width: 1.5rem;
-    height: 100%;
+	height: 100%;
+
+	.logo {
+		fill: var(--primary);
+		padding: .5rem;
+	}
+
+	.icon {
+		display: inline-block;
+		fill: var(--shadow-modest);
+		padding: 0 1rem;
+		width: 1.5rem;
+		height: 100%;
+	}
 
     &:hover {
-        fill: var(--primary);
-        cursor: pointer;
+		cursor: pointer;
+
+		.icon {
+			fill: var(--primary);
+		}
     }
 }
 
@@ -335,16 +353,13 @@ export default {
 }
 
 @media(max-width: $breakpoint-micro) {
-    .nav {
+    .nav,
+	.header-logo {
         display: none;
     }
 
     .sidebar-toggle {
-        display: inline-block;
-    }
-
-    .header-logo {
-        padding: 0 0 0 .5rem;
+        display: flex;
     }
 }