feat: settings layout

src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx

@@ -42,7 +42,7 @@ const UserNavbar = () => {
   const currentPath = pathname?.split("/")[2];
   return (
     <nav
-      className="sticky left-0 right-0 top-0 z-50 border-b-[0.5px] border-border bg-background px-5 py-2.5 md:left-[220px] lg:left-[252px]"
+      className="border-b-[0.5px] border-border bg-background px-5 py-2.5 md:left-[220px] lg:left-[252px]"
       role="navbar"
     >
       <div className="flex items-center justify-between gap-2">

src/app/dashboard/(user-dashboard)/layout.tsx

@@ -8,7 +8,7 @@ export default function AdminLayout({
   children: React.ReactNode;
 }) {
   return (
-    <div className="md:grid-cols-[252px_1fr]x lg:grid-cols-[252px_1fr]x grid min-h-[100dvh] grid-rows-[auto_1fr]">
+    <div className="grid grid-rows-[auto_1fr]">
       <UserNavbar />
       <div className="relative w-full bg-white px-2 max-lg:overflow-hidden xl:px-4">
         <Suspense>{children}</Suspense>

src/app/dashboard/(user-dashboard)/settings/_components/layout/sidebar/index.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import {
+  Banknote,
+  Bell,
+  ChevronLeft,
+  ChevronRight,
+  Database,
+  Globe,
+  LucideProps,
+  User,
+  UserRoundCog,
+  UsersIcon,
+} from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { FC, ForwardRefExoticComponent, RefAttributes } from "react";
+
+const sideItems = [
+  {
+    route: "General",
+    link: "/dashboard/settings",
+    icon: User,
+    id: "general",
+  },
+  {
+    route: "Account",
+    link: "/dashboard/settings/account",
+    icon: UserRoundCog,
+    id: "account",
+  },
+  {
+    route: "Notification",
+    link: "/dashboard/settings/notification",
+    icon: Bell,
+    id: "notification",
+  },
+  {
+    route: "Payment Information",
+    link: "/dashboard/settings/payment-information",
+    icon: Banknote,
+    id: "payment-information",
+  },
+  {
+    route: "Data and Privacy",
+    link: "/dashboard/settings/data-and-privacy",
+    icon: Database,
+    id: "data-and-privacy",
+  },
+  {
+    route: "Language and Region",
+    link: "/dashboard/settings/language-and-region",
+    icon: Globe,
+    id: "language-and-region",
+  },
+];
+
+const organizationLinks = [
+  {
+    route: "Members",
+    link: "/dashboard/settings/organization/members",
+    icon: UsersIcon,
+    id: "members",
+  },
+  {
+    route: "Roles and permissions",
+    link: "/dashboard/settings/organization/roles-and-permissions",
+    icon: Bell,
+    id: "roles-and-permissions",
+  },
+  {
+    route: "Integrations",
+    link: "/dashboard/settings/organization/integrations",
+    icon: Banknote,
+    id: "integrations",
+  },
+];
+
+interface Iproperties {
+  sideNavitems?: {
+    route: string;
+    link: string;
+    icon: ForwardRefExoticComponent<
+      Omit<LucideProps, "ref"> & RefAttributes<SVGSVGElement>
+    >;
+    id: string;
+  }[];
+  currenPathName?: string;
+}
+const SettingsSidebar: FC<Iproperties> = ({ sideNavitems = sideItems }) => {
+  const pathname = usePathname();
+  const currentPath =
+    pathname?.split("/").length == 2 ? "general" : pathname?.split("/")[3];
+  const organizationPath = pathname?.split("/")[4];
+
+  return (
+    <div className="h-screen w-[50px] flex-col items-center justify-center bg-[#FDFDFD] pt-6 md:block md:w-[260px] md:justify-start md:px-4">
+      <div className="mb-6 flex items-center justify-center md:justify-start md:gap-2">
+        <ChevronLeft className="h-5 w-5 text-neutral-dark-2" />
+        <h2 className="hidden text-xl text-neutral-dark-2 md:block">
+          Settings
+        </h2>
+      </div>
+      <h3 className="hidden p-2.5 text-lg text-neutral-dark-2 md:block">
+        Profile
+      </h3>
+      <section className="mb-2 flex flex-col items-center gap-y-3 border-b-[1px] border-border pb-2 pt-2 md:items-stretch">
+        {sideNavitems.map((item, index) => (
+          <Link
+            key={index}
+            href={item.link}
+            data-testid={item.id}
+            role="sidebar-link"
+            className={`${currentPath === item.id ? "bg-primary text-white" : "bg-transparent text-neutral-dark-2 hover:bg-gray-200"} flex items-center justify-center gap-2.5 rounded-full px-2.5 py-3 text-sm transition-all duration-300 ease-in md:h-auto md:w-auto md:justify-start md:rounded-sm`}
+          >
+            <item.icon className="h-5 w-5" role="sidebar-icon" />
+            <span className="hidden md:block">{item.route}</span>
+          </Link>
+        ))}
+      </section>
+      <h3 className="hidden p-2.5 text-lg text-neutral-dark-2 md:block">
+        Organization
+      </h3>
+      <section className="flex flex-col items-center gap-y-3 pt-2 md:items-stretch">
+        {organizationLinks.map((item, index) => (
+          <Link
+            key={index}
+            href={item.link}
+            data-testid={item.id}
+            role="sidebar-link"
+            className={`${organizationPath === item.id ? "bg-primary text-white" : "bg-transparent text-neutral-dark-2 hover:bg-gray-200"} flex items-center justify-center gap-2.5 rounded-full px-2.5 py-3 text-sm transition-all duration-300 ease-in md:h-auto md:w-auto md:justify-between md:rounded-sm`}
+          >
+            <div className="flex items-center justify-start gap-2.5">
+              <item.icon className="h-5 w-5" role="sidebar-icon" />
+              <span className="hidden md:block">{item.route}</span>
+            </div>
+            <ChevronRight className="hidden h-5 w-5 md:block" />
+          </Link>
+        ))}
+      </section>
+    </div>
+  );
+};
+
+export default SettingsSidebar;

src/app/dashboard/(user-dashboard)/settings/account/page.tsx

@@ -0,0 +1,5 @@
+const page = () => {
+  return <div>page</div>;
+};
+
+export default page;

src/app/dashboard/(user-dashboard)/settings/data-and-privacy/page.tsx

@@ -0,0 +1,5 @@
+const page = () => {
+  return <div>page</div>;
+};
+
+export default page;

src/app/dashboard/(user-dashboard)/settings/language-and-region/page.tsx

@@ -0,0 +1,5 @@
+const page = () => {
+  return <div>page</div>;
+};
+
+export default page;

src/app/dashboard/(user-dashboard)/settings/layout.tsx

@@ -0,0 +1,17 @@
+import { FC, ReactNode } from "react";
+
+import SettingsSidebar from "./_components/layout/sidebar";
+
+interface Iproperties {
+  children: ReactNode;
+}
+const layout: FC<Iproperties> = ({ children }) => {
+  return (
+    <div className="grid grid-cols-[auto_1fr]">
+      <SettingsSidebar />
+      <div className="">{children}</div>
+    </div>
+  );
+};
+
+export default layout;

src/app/dashboard/(user-dashboard)/settings/notification/page.tsx

@@ -0,0 +1,5 @@
+const page = () => {
+  return <div>page</div>;
+};
+
+export default page;

src/app/dashboard/(user-dashboard)/settings/organization/integrations/page.tsx

@@ -0,0 +1,5 @@
+const page = () => {
+  return <div>page</div>;
+};
+
+export default page;

src/app/dashboard/(user-dashboard)/settings/organization/members/page.tsx

@@ -0,0 +1,5 @@
+const page = () => {
+  return <div>page</div>;
+};
+
+export default page;

src/app/dashboard/(user-dashboard)/settings/organization/roles-and-permissions/page.tsx

@@ -0,0 +1,5 @@
+const page = () => {
+  return <div>page</div>;
+};
+
+export default page;

src/app/dashboard/(user-dashboard)/settings/payment-information/page.tsx

@@ -0,0 +1,5 @@
+const page = () => {
+  return <div>page</div>;
+};
+
+export default page;