refactor layout and navigation components; improve styling and structure

saaqi · saaqi · commit 727431d3f542 · 2025-05-23T17:17:43.000+05:00
diff --git a/src/app.html b/src/app.html
@@ -1,15 +1,15 @@
 <!doctype html>
 <html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%sveltekit.head%
-	</head>
 
-	<body data-sveltekit-preload-data="hover" data-bs-theme="dark">
-		<div style="display: contents">
-			<main>%sveltekit.body%</main>
-		</div>
-	</body>
-</html>
+<head>
+	<meta charset="utf-8" />
+	<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	%sveltekit.head%
+</head>
+
+<body data-sveltekit-preload-data="hover" data-bs-theme="dark">
+	<div style="display: contents" class="mainContainer">%sveltekit.body%</div>
+</body>
+
+</html>
diff --git a/src/lib/components/Navigation.svelte b/src/lib/components/Navigation.svelte
@@ -55,7 +55,10 @@
 {/snippet}
 
 <header>
-	<nav class="navbar navbar-expand-sm bg-body-tertiary shadow-sm fixed-top">
+	<nav
+		class="navbar navbar-expand-sm shadow-sm fixed-top"
+		style="background-color: rgba(var(--bs-tertiary-bg-rgb), 0.95)"
+	>
 		<div class="container px-3 py-2">
 			<a
 				onclick={collapseBootstrapMenu}
@@ -77,24 +80,8 @@
 				<span class="navbar-toggler-icon"></span>
 			</button>
 			<div class="collapse navbar-collapse" id="navbarNavDropdown">
-				<ul class="navbar-nav gap-3 pt-lg-0 pt-3">
+				<ul class="navbar-nav gap-3">
 					{@render navigationLinks(navLinks)}
-					<!-- <li class="nav-item dropdown">
-					<a
-						class="nav-link dropdown-toggle"
-						href="#top"
-						role="button"
-						data-bs-toggle="dropdown"
-						aria-expanded="false"
-					>
-						Dropdown link
-					</a>
-					<ul class="dropdown-menu">
-						<li><a class="dropdown-item" href="#top">Action</a></li>
-						<li><a class="dropdown-item" href="#top">Another action</a></li>
-						<li><a class="dropdown-item" href="#top">Something else here</a></li>
-					</ul>
-					</li> -->
 				</ul>
 			</div>
 		</div>
diff --git a/src/lib/styles/style.scss b/src/lib/styles/style.scss
@@ -1,5 +1,19 @@
-.svh-100 {
-	align-items: center;
+body {
+	min-height: 100svh;
 	display: flex;
-	min-height: calc(100svh - 80px - 56px);
+	flex-direction: column;
+	header {
+		width: 100%;
+	}
+	main {
+		width: 100%;
+	}
+	footer {
+		width: 100%;
+		margin-top: auto;
+	}
 }
+
+// .svh-100 {
+// 	min-height: 100svh;
+// }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -9,9 +9,9 @@
 </script>
 
 <LoadingAnimation />
-<Navigation />
 
-<div class="svh-100">
+<Navigation />
+<main>
 	{@render children()}
-</div>
+</main>
 <Footer />
