made the admin page

app/(auth)/_components/Card.tsx

@@ -0,0 +1,17 @@
+import { FC } from "react";
+
+interface CardProps {
+  title: string;
+  content: string;
+}
+
+const Card: FC<CardProps> = ({ title, content }) => {
+  return (
+    <div className="bg-white shadow-lg rounded-lg p-6">
+      <h2 className="text-2xl font-bold mb-2">{title}</h2>
+      <p className="">{content}</p>
+    </div>
+  );
+};
+
+export default Card;

app/(auth)/_components/Mobilenav.tsx

@@ -0,0 +1,56 @@
+"use client";
+import React from "react";
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+import Link from "next/link";
+import Image from "next/image";
+import { AdminLinks } from "@/constants";
+import { usePathname } from "next/navigation";
+import { Menu } from "lucide-react";
+
+const MobileNav = () => {
+  const pathname = usePathname();
+  return (
+    <header className="header">
+      <Link href="/" className="flex items-center gap-2 md:py-2">
+        <Image src="/logo.svg" alt="" width={180} height={28} />
+      </Link>
+
+      <nav className="flex gap-2">
+        <Sheet>
+          <SheetTrigger>
+            <Menu className="w-5 h-5" />
+          </SheetTrigger>
+          <SheetContent className="sheet-content sm:w-64">
+            <>
+              <Image src="/logo.svg" alt="" width={152} height={23} />
+              <ul className="header-nav_elements">
+                {AdminLinks.slice(0, 6).map((link) => {
+                  const isActive = link.url === pathname;
+
+                  return (
+                    <li
+                      key={link.url}
+                      className={`${
+                        isActive && "gradient-text"
+                      } p-18 flex whitespace-nowrap text-dark-700`}
+                    >
+                      <Link
+                        className="sidebar-link cursor-pointer"
+                        href={link.url}
+                      >
+                        <link.icon />
+                        {link.name}
+                      </Link>
+                    </li>
+                  );
+                })}
+              </ul>
+            </>
+          </SheetContent>
+        </Sheet>
+      </nav>
+    </header>
+  );
+};
+
+export default MobileNav;

app/(auth)/_components/Sidebar.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import Link from "next/link";
+import Image from "next/image";
+import { usePathname } from "next/navigation";
+import { AdminLinks } from "@/constants";
+
+const Sidebar = () => {
+  const pathname = usePathname();
+  return (
+    <>
+      <aside className="sidebar">
+        <div className="flex size-full flex-col gap-4">
+          <Link href="/" className="sidebar-logo">
+            <Image src="/logo.svg" alt="" width={180} height={28} />
+          </Link>
+
+          <nav className="sidebar-nav">
+            <ul className="sidebar-nav_elements">
+              {AdminLinks.slice(0, 4).map((link) => {
+                const isActive = link.url === pathname;
+
+                return (
+                  <li
+                    key={link.url}
+                    className={`sidebar-nav_element group ${
+                      isActive ? "bg-white/5" : "text-gray-700"
+                    }`}
+                  >
+                    <Link className="sidebar-link" href={link.url}>
+                      <link.icon />
+                      {link.name}
+                    </Link>
+                  </li>
+                );
+              })}
+            </ul>
+
+            <ul className="sidebar-nav_elements">
+              {AdminLinks.slice(4).map((link) => {
+                const isActive = link.url === pathname;
+
+                return (
+                  <li
+                    key={link.url}
+                    className={`sidebar-nav_element group ${
+                      isActive ? "bg-purple-gradient" : "text-gray-700"
+                    }`}
+                  >
+                    <Link className="sidebar-link" href={link.url}>
+                      <link.icon />
+                      {link.name}
+                    </Link>
+                  </li>
+                );
+              })}
+            </ul>
+          </nav>
+        </div>
+      </aside>
+    </>
+  );
+};
+
+export default Sidebar;

app/(auth)/admin/page.tsx

@@ -1,9 +1,8 @@
-import React from 'react'
+import React from "react";
+import Card from "../_components/Card";
 
 const AdminPage = () => {
-  return (
+  return <></>;
-    <div>AdminPage</div>
+};
-  )
-}
 
-export default AdminPage
+export default AdminPage;

app/(auth)/layout.tsx

@@ -1,11 +1,16 @@
+import MobileNav from "./_components/Mobilenav";
+import Sidebar from "./_components/Sidebar";
+
 export default function PageLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   return (
-		<main className="flex flex-col min-h-screen">
+    <main className="flex flex-col min-h-screen root">
-			<div className="flex-grow flex-1">{children}</div>
+      <Sidebar />
+      <MobileNav />
+      <div className="flex-grow flex-1 root-container">{children}</div>
     </main>
   );
 }

app/globals.css

@@ -99,6 +99,54 @@ body {
   .flex-end {
     @apply flex justify-between items-end;
   }
+  .root {
+    @apply flex max-h-screen w-full flex-col lg:flex-row;
+  }
+  .root-container {
+    @apply mt-16 flex-1 overflow-auto py-8 lg:mt-0 lg:max-h-screen lg:py-10;
+  }
+
+  /* .gradient-text {
+    @apply bg-purple-gradient bg-cover bg-clip-text text-transparent;
+  } */
+  .sheet-content button {
+    @apply focus:ring-0 focus-visible:ring-transparent focus:ring-offset-0 focus-visible:ring-offset-0 focus-visible:outline-none focus-visible:border-none !important;
+  }
+
+  .sidebar {
+    @apply hidden h-screen w-72 p-5 shadow-md shadow-purple-200/50 lg:flex;
+  }
+  .header {
+    @apply flex-between fixed h-16 w-full border-b p-5 lg:hidden;
+  }
+
+  .header-nav_elements {
+    @apply mt-8 flex w-full flex-col items-start gap-5;
+  }
+
+  /* Search Component */
+  .search {
+    @apply flex w-full rounded-[16px] border-2 border-purple-200/20 bg-white px-4 shadow-sm shadow-purple-200/15 md:max-w-96;
+  }
+  .sidebar-logo {
+    @apply flex items-center gap-2 md:py-2;
+  }
+
+  .sidebar-nav {
+    @apply h-full flex-col justify-between md:flex md:gap-4;
+  }
+
+  .sidebar-nav_elements {
+    @apply hidden w-full flex-col items-start gap-2 md:flex;
+  }
+
+  .sidebar-nav_element {
+    @apply flex-center p-medium-16 w-full whitespace-nowrap rounded-full bg-cover  transition-all hover:bg-white/10 hover:shadow-inner;
+  }
+
+  .sidebar-link {
+    @apply flex p-medium-16 size-full gap-4 p-4;
+  }
 
   /* TYPOGRAPHY */
   /* 64 */

constants/index.tsx

@@ -1,4 +1,5 @@
 import { BadgeAlert, BarChart4, Cog, ShieldCheck } from "lucide-react";
+import { Download, Home, Settings, User } from "lucide-react";
 
 export const NAVBAR = {
   centerLinks: [
@@ -145,6 +146,34 @@ export const FOOTERLINKS = {
   },
 };
 
+export const AdminLinks = [
+  {
+    name: "Dashboard",
+    url: "/admin",
+    icon: Home,
+  },
+  {
+    name: "Downloads",
+    url: "/admin/downloads",
+    icon: Download,
+  },
+  {
+    name: "Mods",
+    url: "/admin/mods",
+    icon: User,
+  },
+  {
+    name: "Logs",
+    url: "/admin/changelogs",
+    icon: Settings,
+  },
+  {
+    name: "Back Home",
+    url: "/",
+    icon: Home,
+  },
+];
+
 export const TERMS_AND_CONDITIONS = `
 Last updated: 24.04.2024