From b72ea763a30095acf07a3fa79733e2a88fbc74d1 Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair31494322@gmail.com>
Date: Fri, 30 Jul 2021 13:48:57 -0400
Subject: [PATCH] feat: change menu into a modal instead of overlay

---
 resources/skins.citizen.styles/Drawer.less | 44 ++++++++++------------
 1 file changed, 19 insertions(+), 25 deletions(-)

diff --git a/resources/skins.citizen.styles/Drawer.less b/resources/skins.citizen.styles/Drawer.less
index 95a286ea..55045345 100644
--- a/resources/skins.citizen.styles/Drawer.less
+++ b/resources/skins.citizen.styles/Drawer.less
@@ -6,12 +6,15 @@
 	bottom: 0;
 	left: 0;
 	display: flex;
+	overflow: auto;
 	flex-direction: column;
 	align-items: center;
-	background-color: var( --background-color-overlay );
-	transform: translate3d( 0, -100%, 0 );
+	margin: var( --margin-header-item ) var( --margin-header-item--corner );
+	overscroll-behavior: contain;
+	transform: translate3d( 0, -110%, 0 );
 	transform-origin: 0 0;
 	user-select: none;
+	.citizen-card();
 
 	&-checkbox {
 		&:checked {
@@ -101,11 +104,9 @@
 
 	&-header {
 		display: flex;
-		width: 100%;
 		flex-direction: column;
 		align-items: center;
-		padding: var( --height-header ) var( --padding-page ) 20px var( --padding-page );
-		border-bottom: 1px solid var( --border-color-base );
+		padding: ~'calc( var( --padding-page ) + 10px )' var( --padding-page ) 20px var( --padding-page );
 	}
 
 	&-logo {
@@ -140,17 +141,13 @@
 	}
 
 	&-menu {
-		display: flex;
-		overflow: auto;
-		max-width: var( --width-layout );
-		flex-wrap: wrap;
-		justify-content: center;
+		display: grid;
+		max-width: ~'calc( 100vw - var( --padding-page ) * 4 )';
+		padding: ~'calc( var(--padding-page) / 2 ) calc( var(--padding-page) / 2 ) var( --padding-page ) calc( var(--padding-page) / 2 )';
+		border-top: 1px solid var( --border-color-base );
 		font-size: @ui-menu-text;
-		overscroll-behavior: contain;
-
-		h3 {
-			font-size: 16px;
-		}
+		gap: ~'calc( var(--padding-page) / 4 )';
+		grid-template-columns: repeat( auto-fit, 240px );
 
 		a {
 			.menu-item-link;
@@ -184,11 +181,6 @@
 				}
 			}
 		}
-
-		.mw-portal {
-			width: 240px;
-			margin-top: 20px;
-		}
 	}
 }
 
@@ -240,15 +232,17 @@
 		}
 	}
 }
-// Portal width (240px) * 2 + Magic (4px)
-@media ( min-width: 484px ) {
-	#mw-drawer-menu {
-		justify-content: left; // Portals won't get center when there is more than one col
+
+@media ( min-width: @width-breakpoint-tablet ) {
+	#mw-drawer {
+		right: unset;
+		bottom: unset;
+		max-height: ~'calc(100vh - var(--margin-header-item) * 2 )';
 	}
 }
 
 @media ( min-width: @width-breakpoint-desktop-wide ) {
 	#mw-drawer-menu {
-		max-width: 1200px; // 240px * 5
+		max-width: 1200px;
 	}
 }