start of sidebar no styling done

public/css/dashboard/index.css

@@ -0,0 +1,77 @@
+body {
+	display: flex;
+	flex-direction: row;
+}
+
+/* sidebar */
+
+/* <div class="sidebar">
+	<div class="actions">
+		<a href="/dashboard" class="action">
+			<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M1 6V15H6V11C6 9.89543 6.89543 9 8 9C9.10457 9 10 9.89543 10 11V15H15V6L8 0L1 6Z" fill=""></path> </g></svg>
+			<span>Dashboard</span>
+		</a>
+	</div>
+	<div class="user-area">
+		<img src="https://cdn5.vectorstock.com/i/1000x1000/08/19/gray-photo-placeholder-icon-design-ui-vector-35850819.jpg" alt="User avatar">
+		<div class="username">John Doe</div>
+	</div>
+</div> */
+
+.sidebar {
+	background-color: var(--background-secondary);
+	width: 220px;
+	height: 100vh;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.sidebar .actions {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	width: 100%;
+}
+
+.sidebar .actions .action {
+	display: flex;
+	align-items: center;
+	padding: 1rem;
+	height: 20px;
+	width: 100%;
+	border-radius: 4px;
+	transition: background-color 0.2s ease;
+}
+
+.sidebar .actions .action svg {
+	width: 25px;
+	height: 25px;
+}
+
+.sidebar .actions .action:hover {
+	background-color: var(--background);
+}
+
+.sidebar .user-area {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	width: 100%;
+	border-top: 1px solid var(--border);
+    background-color: rgba(0 0 0 / 10%);
+}
+
+.sidebar .user-area img {
+	width: 100px;
+	height: 100px;
+	border-radius: 50%;
+	object-fit: cover;
+}
+
+.sidebar .user-area .username {
+	margin-top: 1rem;
+	font-weight: bold;
+	color: var(--text);
+}

public/css/global.css

@@ -3,6 +3,7 @@
 	--background-secondary: rgb(45 45 45);
 	--border: rgb(70 70 70);
 	--text: rgb(255 255 255);
+	--svg-fill: rgb(255 255 255);
 	--text-secondary: rgb(200 200 200);
 	--accent: rgb(88 101 242);
 	--accent-hover: rgb(71 82 196);
@@ -13,16 +14,6 @@
 	--input-background: rgb(55 55 55);
 }
 
-body {
-	font-family: Ubuntu, sans-serif;
-	margin: 0;
-	padding: 0;
-	box-sizing: border-box;
-	font-size: 16px;
-	background-color: var(--background);
-	color: var(--text);
-}
-
 /* Fonts */
 @font-face {
 	font-family: Ubuntu;
@@ -45,14 +36,22 @@ body {
 	font-style: normal;
 }
 
-/* Utility classes */
+body {
+	font-family: Ubuntu, sans-serif;
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+	font-size: 16px;
+	background-color: var(--background);
+	color: var(--text);
+}
+
 .container {
 	max-width: 1200px;
 	margin: 0 auto;
 	padding: 0 1rem;
 }
 
-/* Form elements */
 input, button, textarea, select {
 	font-family: inherit;
 	font-size: 1rem;
@@ -102,11 +101,17 @@ input:focus, textarea:focus, select:focus {
 	color: var(--text-secondary);
 }
 
-/* Card style */
-.card {
-	background-color: var(--background-secondary);
-	border-radius: 8px;
-	box-shadow: var(--card-shadow);
-	padding: 1.5rem;
-	overflow: hidden;
+svg {
+	fill: var(--svg-fill);
+	transition: fill 0.2s ease;
+}
+
+svg.stroke-only {
+	fill: none;
+	stroke: var(--svg-fill);
+	stroke-width: 2;
+}
+
+svg:hover {
+	fill: var(--accent);
 }

public/js/auth.js

@@ -41,7 +41,7 @@ if (loginForm) {
 			const data = await response.json();
 
 			if (data.success) {
-				window.location.href = "/";
+				window.location.href = "/dashboard";
 			} else {
 				if (errorMessage) {
 					errorMessage.style.display = "block";
@@ -92,7 +92,7 @@ if (loginForm) {
 			const data = await response.json();
 
 			if (data.success) {
-				window.location.href = "/";
+				window.location.href = "/dashboard";
 			} else {
 				if (errorMessage) {
 					errorMessage.style.display = "block";