From 4b2b2322dc465c291441358db8e920f5181b79f9 Mon Sep 17 00:00:00 2001
From: Don Alfons Nisnoni <donnisnoni@outlook.com>
Date: Fri, 19 Feb 2021 16:52:21 +0800
Subject: [PATCH] Handle NavigationDrawer &  container spacing; Minor cleanup

Signed-off-by: Don Alfons Nisnoni <donnisnoni@outlook.com>
---
 .../src/components/SiteNavigation.svelte       |  2 +-
 src/main/frontend/src/routes/_layout.svelte    | 18 ++++++++++++++++--
 src/main/frontend/static/global.css            | 15 ++++++++++++++-
 3 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/main/frontend/src/components/SiteNavigation.svelte b/src/main/frontend/src/components/SiteNavigation.svelte
index 4df128a0..848e22a5 100644
--- a/src/main/frontend/src/components/SiteNavigation.svelte
+++ b/src/main/frontend/src/components/SiteNavigation.svelte
@@ -7,7 +7,7 @@
 	export let segment;
 </script>
 
-<NavigationDrawer active={sidenav} borderless class="h-screen show-after-200ms" clipped fixed>
+<NavigationDrawer active={sidenav} borderless class="h-screen" clipped fixed>
 	<List dense nav>
 		{#each routes as item}
 			<NavItem {item} {segment} />
diff --git a/src/main/frontend/src/routes/_layout.svelte b/src/main/frontend/src/routes/_layout.svelte
index f4035121..16deca24 100644
--- a/src/main/frontend/src/routes/_layout.svelte
+++ b/src/main/frontend/src/routes/_layout.svelte
@@ -18,7 +18,7 @@
 
 <MaterialApp theme={$theme}>
 	{#if $isLoggedIn}
-		<AppBar>
+		<AppBar fixed style="width:100%">
 			<div slot="icon">
 				<Button
 					aria-label="Open Menu"
@@ -54,7 +54,21 @@
 
 		<SiteNavigation {segment} bind:sidenav />
 	{/if}
-	<Container>
+
+	<Container class="main">
 		<slot />
 	</Container>
 </MaterialApp>
+
+<style lang="scss" global>
+	.main {
+		padding-top: 5rem;
+	}
+
+	// medium screens and up
+	@media (min-width: 768px) {
+		.s-navigation-drawer.active ~ .main {
+			padding: 5rem 7rem 0 13rem !important;
+		}
+	}
+</style>
diff --git a/src/main/frontend/static/global.css b/src/main/frontend/static/global.css
index c1a48014..f99d505a 100644
--- a/src/main/frontend/static/global.css
+++ b/src/main/frontend/static/global.css
@@ -49,7 +49,7 @@ body {
 }
 
 .h-screen {
-	height: 100vh;
+	height: 100vh !important;
 }
 
 .m-0 {
@@ -62,6 +62,7 @@ body {
 	}
 }
 
+/* medium screens and up */
 @media (min-width: 768px) {
 	.md\:flex-row {
 		flex-direction: row !important;
@@ -70,10 +71,22 @@ body {
 	.md\:max-width-initial {
 		max-width: initial;
 	}
+
+	.md\:d-none {
+		display: none !important;
+	}
 }
 
+/* large screens and up */
 @media (min-width: 1024px) {
 	.lg\:flex-row {
 		flex-direction: row !important;
 	}
 }
+
+/* medium screens and down */
+@media (max-width: 768px) {
+	.md-and-down\:d-none {
+		display: none !important;
+	}
+}