From db5b9106539d56fcc36f3743337a94fca7068b22 Mon Sep 17 00:00:00 2001 From: Laux Dev <2201104208@student.buksu.edu.ph> Date: Mon, 23 Feb 2026 17:00:04 +0800 Subject: [PATCH] sidebar --- frontend/public/organization.svg | 8 + .../src/app/components/sidebar/Sidebar.jsx | 279 ++++++++++-------- .../app/components/sidebar/styles.module.css | 12 + frontend/src/app/layout.js | 12 +- frontend/src/app/page.js | 62 +--- frontend/src/app/page.module.css | 1 - 6 files changed, 185 insertions(+), 189 deletions(-) create mode 100644 frontend/public/organization.svg diff --git a/frontend/public/organization.svg b/frontend/public/organization.svg new file mode 100644 index 0000000..93fa58f --- /dev/null +++ b/frontend/public/organization.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/frontend/src/app/components/sidebar/Sidebar.jsx b/frontend/src/app/components/sidebar/Sidebar.jsx index d01819d..5e6ca0e 100644 --- a/frontend/src/app/components/sidebar/Sidebar.jsx +++ b/frontend/src/app/components/sidebar/Sidebar.jsx @@ -4,6 +4,7 @@ const Sidebar = () => { return (
+ {/* Logo Container */}
{
@@ -50,6 +55,7 @@ const Sidebar = () => {

By Project Moonshot Inc.

+ {/* Navigations */}
{

Home

@@ -86,54 +92,54 @@ const Sidebar = () => { viewBox="0 0 20 20" fill="none" > - + @@ -142,7 +148,7 @@ const Sidebar = () => { width="20" height="20" fill="white" - style="fill:white;fill-opacity:1;" + style={{ fillOpacity: 1 }} /> @@ -157,22 +163,22 @@ const Sidebar = () => { viewBox="0 0 20 20" fill="none" > - + @@ -181,7 +187,7 @@ const Sidebar = () => { width="20" height="20" fill="white" - style="fill:white;fill-opacity:1;" + style={{ fillOpacity: 1 }} /> @@ -191,18 +197,38 @@ const Sidebar = () => {
+ + +

Users

@@ -215,30 +241,30 @@ const Sidebar = () => { viewBox="0 0 20 20" fill="none" > - + @@ -247,7 +273,7 @@ const Sidebar = () => { width="20" height="20" fill="white" - style="fill:white;fill-opacity:1;" + style={{ fillOpacity: 1 }} /> @@ -265,42 +291,42 @@ const Sidebar = () => {

Credentials

@@ -313,22 +339,22 @@ const Sidebar = () => { viewBox="0 0 20 20" fill="none" > - + @@ -337,7 +363,7 @@ const Sidebar = () => { width="20" height="20" fill="white" - style="fill:white;fill-opacity:1;" + style={{ fillOpacity: 1 }} /> @@ -346,6 +372,7 @@ const Sidebar = () => {
+ {/* Footers */}

Download ICTL v3

@@ -356,30 +383,30 @@ const Sidebar = () => { viewBox="0 0 24 24" fill="none" > - + @@ -388,7 +415,7 @@ const Sidebar = () => { width="24" height="24" fill="white" - style="fill:white;fill-opacity:1;" + style={{ fillOpacity: 1 }} /> diff --git a/frontend/src/app/components/sidebar/styles.module.css b/frontend/src/app/components/sidebar/styles.module.css index e69de29..7657e2e 100644 --- a/frontend/src/app/components/sidebar/styles.module.css +++ b/frontend/src/app/components/sidebar/styles.module.css @@ -0,0 +1,12 @@ +.navContainer > div > svg > path { + stroke: #858699; +} +.navContainer > div:hover > svg > path { + stroke: #969af9; +} +.navContainer > div > svg > g > path { + stroke: #858699; +} +.navContainer > div:hover > svg > g > path { + stroke: #969af9; +} diff --git a/frontend/src/app/layout.js b/frontend/src/app/layout.js index a0f6e5e..55ba8f4 100644 --- a/frontend/src/app/layout.js +++ b/frontend/src/app/layout.js @@ -1,5 +1,7 @@ import { Geist, Geist_Mono, Inter } from "next/font/google"; +import Sidebar from "./components/sidebar/Sidebar"; import "./globals.css"; +import styles from "./page.module.css"; const inter = Inter({ variable: "--font-inter", @@ -14,7 +16,15 @@ export const metadata = { export default function RootLayout({ children }) { return ( - {children} + +
+ +
+ {/* Header here */} + {children} +
+
+ ); } diff --git a/frontend/src/app/page.js b/frontend/src/app/page.js index 290b6c3..cc811a5 100644 --- a/frontend/src/app/page.js +++ b/frontend/src/app/page.js @@ -2,65 +2,5 @@ import Image from "next/image"; import styles from "./page.module.css"; export default function Home() { - return ( -
-
- Next.js logo -
-

To get started, edit the page.js file.

-

- Looking for a starting point or more instructions? Head over to{" "} - - Templates - {" "} - or the{" "} - - Learning - {" "} - center. -

-
- -
-
- ); + return
; } diff --git a/frontend/src/app/page.module.css b/frontend/src/app/page.module.css index 233b220..d32a1e6 100644 --- a/frontend/src/app/page.module.css +++ b/frontend/src/app/page.module.css @@ -10,7 +10,6 @@ --button-secondary-border: #ebebeb; display: flex; - min-height: 100vh; align-items: center; justify-content: center; }