Hacky fix for notification button and overlay issue - see comments in NotifcationButton.vue stylesheet

src/App.vue

@@ -424,7 +424,18 @@
 			display: none;
 		}
 
-		@at-root #{&}__overlay { display: none; }
+		@at-root #{&}__overlay {
+			width: 100%;
+			height: 100%;
+			position: fixed;
+			top: 0;
+			left: 0;
+			z-index: 1;
+			pointer-events: none;
+			opacity: 0;
+			background-color: hsla(215, 13%, 25%, 0.5);
+			transition: all 0.4s;
+		}
 	}
 
 	.logo {
@@ -455,18 +466,9 @@
 			cursor: pointer;
 		}
 
-		.header__overlay {
-			width: 100%;
-			height: 100%;
-			display: none;
-			position: fixed;
-			top: 0;
-			left: 0;
-			z-index: 1;
-
-			@at-root #{&}--show {
-				display: block;
-			}
+		.header__overlay--show {
+			pointer-events: all;
+			opacity: 1;
 		}
 
 		.header__group:first-child {

src/components/NotificationButton.vue

@@ -404,6 +404,7 @@
 			position: relative;
 			height: 2.5rem;
 			width: 2.5rem;
+			transition: border 0.4s, padding 0.4s;
 
 			@at-root #{&}--shake {
 				animation-name: shake;
@@ -452,6 +453,38 @@
 	}
 
 	@media (max-width: 420px) {
+		//Because the notification button is
+		//actually a child of the hamburger menu
+		//it 'pops up' when the overlay is showing
+		//so we cover it with its own overlay
+		//hacky but it works...
+		.notification_button__button::before {
+		 	content: '';
+		 	position: absolute;
+		 	top: 0;
+		 	left: 0;
+		 	pointer-events: none;
+		 	opacity: 0;
+		 	width: 100%;
+		 	border-radius: 0.25rem;
+		 	height: 100%;
+		 	background-color: hsla(215, 13%, 25%, 0.5);
+		 	transition: all 0.4s;
+		}
+		.header__group--show .notification_button {
+			cursor: default;
+			pointer-events: none;
+
+			@at-root #{&}__button {
+				border: none;
+				padding: 1px;
+
+				&::before {
+					opacity: 1;
+				}
+			}
+		}
+
 		.notification_button {
 			position: fixed;
 			right: 0.5rem;