diff --git a/public/css/dashboard/index.css b/public/css/dashboard/index.css new file mode 100644 index 0000000..3a829ff --- /dev/null +++ b/public/css/dashboard/index.css @@ -0,0 +1,77 @@ +body { + display: flex; + flex-direction: row; +} + +/* sidebar */ + +/*
+
+ + + Dashboard + +
+
+ User avatar +
John Doe
+
+
*/ + +.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); +} diff --git a/public/css/global.css b/public/css/global.css index f2df698..0c841f5 100644 --- a/public/css/global.css +++ b/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); } diff --git a/public/js/auth.js b/public/js/auth.js index e66989f..0f70264 100644 --- a/public/js/auth.js +++ b/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"; diff --git a/public/js/dashboard/index.js b/public/js/dashboard/index.js new file mode 100644 index 0000000..e69de29 diff --git a/src/routes/dashboard/index.ts b/src/routes/dashboard/index.ts new file mode 100644 index 0000000..c1f2614 --- /dev/null +++ b/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 { + // if (!request.session) { + // return Response.redirect("/auth/login"); + // } + + const ejsTemplateData: EjsTemplateData = { + title: "Hello, World!", + }; + + return await renderEjsTemplate("dashboard/index.ejs", ejsTemplateData); +} + +export { handler, routeDef }; diff --git a/src/views/dashboard/index.ejs b/src/views/dashboard/index.ejs new file mode 100644 index 0000000..3f2b203 --- /dev/null +++ b/src/views/dashboard/index.ejs @@ -0,0 +1,13 @@ + + + + <%- include("../global", { styles: ["dashboard/index"], scripts: [] }) %> + + + <%- include("../partials/sidebar") %> +
+

Dashboard

+

Welcome to the dashboard!

+
+ + diff --git a/src/views/partials/sidebar.ejs b/src/views/partials/sidebar.ejs new file mode 100644 index 0000000..5a5a64d --- /dev/null +++ b/src/views/partials/sidebar.ejs @@ -0,0 +1,12 @@ +
+
+ + + Dashboard + +
+
+ User avatar +
John Doe
+
+