Added alert dialog. Fixed image rotation EXIT data being discarded.

assets/components/header/header.vue

@@ -82,8 +82,25 @@
 				@click.stop="$emit('toggleSidebar')"
 			><Icon icon="menu" /></div>
 
+			<Tooltip v-if="me">
+				<div
+					class="header-button header-notifications"
+					@click="showAddAlert = true"
+				>
+					<Icon
+						icon="bell2"
+					/>
+				</div>
+
+				<template v-slot:tooltip>
+					<div
+						class="notifications"
+					>No notifications</div>
+				</template>
+			</Tooltip>
+
 			<Tooltip>
-				<div class="header-account">
+				<div class="header-button header-account">
 					<div class="account">
 						<Icon
 							icon="user3-long"
@@ -121,6 +138,11 @@
 					/>
 				</template>
 			</Tooltip>
+
+			<AddAlert
+				v-if="showAddAlert"
+				@close="showAddAlert = false"
+			>Alert</AddAlert>
 		</div>
 	</header>
 </template>
@@ -128,11 +150,18 @@
 <script>
 import Menu from './menu.vue';
 import Search from './search.vue';
+import AddAlert from '../alerts/add-alert.vue';
 
 import logo from '../../img/logo.svg';
 
+function me() {
+	return this.$store.state.auth.user;
+}
+
 export default {
+	AddAlert,
 	components: {
+		AddAlert,
 		Menu,
 		Search,
 	},
@@ -142,8 +171,12 @@ export default {
 			logo,
 			searching: false,
 			showFilters: false,
+			showAddAlert: false,
 		};
 	},
+	computed: {
+		me,
+	},
 };
 </script>
 
@@ -257,26 +290,12 @@ export default {
     }
 }
 
-.header-toggles {
-    margin: 0 .5rem 0 0;
+.header-button {
+	padding: 1rem .75rem;
 
-    .icon {
-        padding: 1rem .75rem;
-        fill: var(--shadow);
-
-        &:hover {
-            fill: var(--shadow-strong);
-            cursor: pointer;
-        }
-
-        &.active {
-            fill: var(--primary);
-        }
-    }
-}
-
-.header-account {
-	padding: 1rem;
+	.icon {
+		fill: var(--shadow);
+	}
 
 	&:hover {
 		cursor: pointer;
@@ -285,12 +304,20 @@ export default {
 			border-color: var(--primary);
 		}
 
-		.avatar {
+		.icon {
 			fill: var(--primary);
 		}
 	}
 }
 
+.header-account {
+	padding: 1rem 1rem 1rem .75rem;
+}
+
+.header-notifications {
+	padding: 1rem .75rem 1rem 1rem;
+}
+
 .account {
 	width: 1.25rem;
 	height: 1.25rem;
@@ -333,6 +360,10 @@ export default {
     }
 }
 
+.notifications {
+	padding: 1rem;
+}
+
 @media(max-width: $breakpoint-kilo) {
     .search-full {
         display: none;
@@ -364,7 +395,8 @@ export default {
         display: none;
     }
 
-	.header-account {
+	.header-account,
+	.header-notifications {
 		display: none;
 	}
 }