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 */
+svg {
-.card {
+	fill: var(--svg-fill);
-	background-color: var(--background-secondary);
+	transition: fill 0.2s ease;
-	border-radius: 8px;
+}
-	box-shadow: var(--card-shadow);
+
-	padding: 1.5rem;
+svg.stroke-only {
-	overflow: hidden;
+	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";

src/routes/dashboard/index.ts

@@ -0,0 +1,21 @@
+import { renderEjsTemplate } from "@helpers/ejs";
+
+const routeDef: RouteDef = {
+	method: "GET",
+	accepts: "*/*",
+	returns: "text/html",
+};
+
+async function handler(request: ExtendedRequest): Promise<Response> {
+	// if (!request.session) {
+	// 	return Response.redirect("/auth/login");
+	// }
+
+	const ejsTemplateData: EjsTemplateData = {
+		title: "Hello, World!",
+	};
+
+	return await renderEjsTemplate("dashboard/index.ejs", ejsTemplateData);
+}
+
+export { handler, routeDef };

src/views/dashboard/index.ejs

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<%- include("../global", { styles: ["dashboard/index"], scripts: [] }) %>
+</head>
+<body>
+	<%- include("../partials/sidebar") %>
+	<div class="content">
+		<h1>Dashboard</h1>
+		<p>Welcome to the dashboard!</p>
+	</div>
+</body>
+</html>

src/views/partials/sidebar.ejs

@@ -0,0 +1,12 @@
+<div class="sidebar">
+	<div class="actions">
+		<a href="/dashboard" class="action">
+			<svg class="stroke-only" viewBox="0 0 24 24" 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="M5 9.77746V16.2C5 17.8802 5 18.7203 5.32698 19.362C5.6146 19.9265 6.07354 20.3854 6.63803 20.673C6.78894 20.7499 6.95082 20.8087 7.13202 20.8537M21 12L15.5668 5.96399C14.3311 4.59122 13.7133 3.90484 12.9856 3.65144C12.3466 3.42888 11.651 3.42893 11.0119 3.65159C10.2843 3.90509 9.66661 4.59157 8.43114 5.96452L3 12M19 5.00002V16.2C19 17.8802 19 18.7203 18.673 19.362C18.3854 19.9265 17.9265 20.3854 17.362 20.673C17.2111 20.7499 17.0492 20.8087 16.868 20.8537M7.13202 20.8537C7.65017 18.6448 9.63301 17 12 17C14.367 17 16.3498 18.6448 16.868 20.8537M7.13202 20.8537C7.72133 21 8.51495 21 9.8 21H14.2C15.485 21 16.2787 21 16.868 20.8537M14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12Z" stroke="" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></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>