sidenav without logo

src/app/admin/layout.tsx

@@ -1,13 +1,14 @@
 import Navigation from "@/components/global/navigation/side";
+import { links } from "@/data/admin/navigation";
 
 type LayoutProps = {
   children: React.ReactNode;
 };
 
 const Layout = ({ children }: LayoutProps) => {
   return (
-    <div className="h-full">
-      <Navigation />
+    <div className="flex h-full">
+      <Navigation links={links} />
       {children}
     </div>
   );

src/app/director/layout.tsx

@@ -1,4 +1,5 @@
 import Navigation from "@/components/global/navigation/side";
+import { links } from "@/data/director/navigation";
 
 type LayoutProps = {
   children: React.ReactNode;
@@ -7,7 +8,7 @@ type LayoutProps = {
 const Layout = ({ children }: LayoutProps) => {
   return (
     <div className="h-full">
-      <Navigation />
+      <Navigation links={links} />
       {children}
     </div>
   );

src/app/user/layout.tsx

@@ -1,13 +1,14 @@
-import Navigation from "@/components/global/navigation";
+import Navigation from "@/components/global/navigation/side";
+import { links } from "@/data/user/navigation";
 
 type LayoutProps = {
   children: React.ReactNode;
 };
 
 const Layout = ({ children }: LayoutProps) => {
   return (
-    <div className="h-full">
-      <Navigation />
+    <div className="flex h-full">
+      <Navigation links={links} />
       {children}
     </div>
   );

src/components/global/navigation/index.tsx

@@ -1,12 +1,5 @@
-import Link from "next/link";
-
 const Navigation = () => {
-  return (
-    <div className="flex gap-4 bg-starlight-blue text-white">
-      <Link href="/user/applications">Applications</Link>
-      <Link href="/user/profile">Profile</Link>
-    </div>
-  );
+  return <div className="flex bg-starlight-blue"></div>;
 };
 
 export default Navigation;

src/components/global/navigation/side.tsx

@@ -1,5 +1,34 @@
-const SideNav = () => {
-  return <div>SideNav</div>;
+import Image from "next/image";
+import Link from "next/link";
+import Logo from "@/public/logo.webp";
+
+interface link {
+  name: string;
+  link: string;
+}
+
+interface props {
+  links: link[];
+}
+
+const SideNav = ({ links }: props) => {
+  return (
+    <nav className="flex h-screen w-[10%] flex-col items-center bg-starlight-blue text-white">
+      <Image src={Logo} alt="Starlight Logo" />
+
+      <div className="w-full text-center">
+        {links.map(({ link, name }, index) => (
+          <Link
+            key={index}
+            href={link}
+            className="!w-full hover:bg-starlight-yellow"
+          >
+            {name}
+          </Link>
+        ))}
+      </div>
+    </nav>
+  );
 };
 
 export default SideNav;

src/data/admin/navigation.tsx

@@ -0,0 +1,6 @@
+export const links = [
+  {
+    name: "Interviews",
+    link: "/admin/interviews",
+  },
+];

src/data/director/navigation.tsx

@@ -0,0 +1,6 @@
+export const links = [
+  {
+    name: "Interviews",
+    link: "/admin/interviews",
+  },
+];

src/data/user/navigation.tsx

@@ -0,0 +1,6 @@
+export const links = [
+  {
+    name: "Interviews",
+    link: "/admin/interviews",
+  },
+];

tailwind.config.ts

@@ -7,6 +7,7 @@ module.exports = {
       colors: {
         starlight: {
           blue: "#173967",
+          yellow: "#FFE899",
         },
         background: "hsl(var(--background))",
         foreground: "hsl(var(--foreground))",