Handle NavigationDrawer & container spacing;

Minor cleanup

Signed-off-by: Don Alfons Nisnoni <[email protected]>

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} />

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>

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;
+	}
+}