fixed mobile layout

app/static/styles.css

@@ -59,31 +59,6 @@ body {
 	padding: 20px;
 }
 
-/* Navigation Bar */
-.navbar {
-	background-color: var(--nav-bg);
-	color: var(--nav-text);
-	padding: 1rem;
-	margin-bottom: 2rem;
-	border-radius: 6px;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-}
-
-.navbar a {
-	color: var(--nav-text);
-	text-decoration: none;
-	margin-right: 1.5rem;
-	font-weight: bold;
-	transition: color 0.3s;
-}
-
-.navbar a:hover {
-	color: var(--accent-color);
-}
-
 /* Forms and Inputs */
 .form-group {
 	margin-bottom: 1.5rem;
@@ -341,22 +316,98 @@ button:hover,
 	.file-grid {
 		grid-template-columns: repeat(2, 1fr);
 	}
+}
 
-	.container {
-		padding: 10px;
+/* navbar */
+.navbar {
+	background-color: var(--nav-bg);
+	color: var(--nav-text);
+	padding: 1rem;
+	margin-bottom: 2rem;
+	border-radius: 6px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+	position: relative;
+}
+
+.navbar .container {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	width: 100%;
+	position: relative;
+}
+
+.navbar-links {
+	display: flex;
+	align-items: center;
+	gap: 1.5rem;
+}
+
+.navbar a {
+	color: var(--nav-text);
+	text-decoration: none;
+	font-weight: bold;
+	transition: all 0.3s ease;
+	padding: 0.5rem;
+	border-radius: 4px;
+}
+
+.navbar a:hover {
+	color: var(--accent-color);
+	background-color: rgba(255, 255, 255, 0.1);
+}
+
+/* mobile navbar */
+@media (max-width: 768px) {
+	.navbar {
+		padding: 0.75rem;
 	}
 
-	.navbar {
+	.navbar-links {
+		position: absolute;
+		top: 100%;
+		left: 0;
+		right: 0;
+		background-color: var(--nav-bg);
 		flex-direction: column;
-		align-items: flex-start;
+		gap: 0;
+		max-height: 0;
+		opacity: 0;
+		overflow: hidden;
+		padding: 0;
+		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+		z-index: 1000;
+		transition: max-height 0.4s ease-out, opacity 0.3s ease-out, padding 0.3s ease-out;
+	}
+
+	.navbar-links.active {
+		max-height: 500px;
+		opacity: 1;
+		padding: 1rem;
 	}
 
 	.navbar a {
-		margin: 5px 0;
+		width: 100%;
+		margin: 0.25rem 0;
+		padding: 0.75rem;
 	}
 
-	.site-card {
-		padding: 15px;
-		margin-bottom: 10px;
+	.navbar-toggle {
+		display: block;
+		background: none;
+		border: none;
+		color: var(--nav-text);
+		font-size: 1.5rem;
+		cursor: pointer;
+		padding: 0.5rem;
+	}
+
+	#theme-toggle {
+		width: 100%;
+		margin: 0.25rem 0;
+		text-align: left;
 	}
 }

app/templates/base.html

@@ -30,52 +30,30 @@
 			const themeToggle = document.querySelector('#theme-toggle');
 			const body = document.body;
 
-			// Get saved theme from localStorage
+			// get saved theme from localStorage
 			const savedTheme = localStorage.getItem('theme') || 'dark';
 			body.setAttribute('data-theme', savedTheme);
 
 			if (!savedTheme) localStorage.setItem('theme', savedTheme);
 
-			// Set initial button text
-			themeToggle.textContent = savedTheme === 'dark' ? 'Light Mode' : 'Dark Mode';
+			// set initial button text
+			themeToggle.textContent = savedTheme === 'dark' ? 'light mode' : 'dark mode';
 
 			themeToggle.addEventListener('click', () => {
 				const isDark = body.getAttribute('data-theme') === 'dark';
 				body.setAttribute('data-theme', isDark ? 'light' : 'dark');
 				localStorage.setItem('theme', isDark ? 'light' : 'dark');
-				themeToggle.textContent = isDark ? 'Dark Mode' : 'Light Mode';
+				themeToggle.textContent = isDark ? 'dark mode' : 'light mode';
 			});
 		});
 	</script>
 
 	<style>
-		/* collapsible navbar */
-		.navbar-links {
-			display: flex;
-			align-items: center;
-			gap: 1rem;
-		}
-
 		.navbar-toggle {
 			display: none;
-			font-size: 1.5rem;
-			background: none;
-			border: none;
-			color: var(--nav-text);
-			cursor: pointer;
 		}
 
 		@media (max-width: 768px) {
-			.navbar-links {
-				display: none;
-				flex-direction: column;
-				width: 100%;
-			}
-
-			.navbar-links.active {
-				display: flex;
-			}
-
 			.navbar-toggle {
 				display: block;
 			}
@@ -87,7 +65,7 @@
 	<nav class="navbar">
 		<div class="container">
 			<a href="{{ url_for('main.home', _external=True) }}">Home</a>
-			<button id="nav-toggle" class="navbar-toggle">&#9776;</button>
+			<button id="nav-toggle" class="navbar-toggle" aria-label="menu">&#9776;</button>
 			<div id="navbar-links" class="navbar-links">
 				{% if current_user.is_authenticated %}
 				<a href="{{ url_for('main.dashboard', _external=True) }}">Dashboard</a>
@@ -96,7 +74,7 @@
 				<a href="{{ url_for('main.login', _external=True) }}">Login</a>
 				<a href="{{ url_for('main.register', _external=True) }}">Register</a>
 				{% endif %}
-				<button id="theme-toggle" class="btn">Toggle Dark Mode</button>
+				<button id="theme-toggle" class="btn">toggle dark mode</button>
 			</div>
 		</div>
 	</nav>
@@ -114,6 +92,26 @@
 
 		{% block content %}{% endblock %}
 	</div>
+
+	<script>
+		document.addEventListener('DOMContentLoaded', () => {
+			const navToggle = document.querySelector('#nav-toggle');
+			const navbarLinks = document.querySelector('#navbar-links');
+			const navbar = document.querySelector('.navbar');
+
+			navToggle.addEventListener('click', () => {
+				navbarLinks.classList.toggle('active');
+				navToggle.classList.toggle('active');
+			});
+
+			document.addEventListener('click', (e) => {
+				if (!navbar.contains(e.target)) {
+					navbarLinks.classList.remove('active');
+					navToggle.classList.remove('active');
+				}
+			});
+		});
+	</script>
 </body>
 
-</html>
+</html>m