feat/auth-pages

Adds proper styling to sign-in, and sign-out pages. Adds dashboard layout and basic pages.
rikhall1515 · Apr 28, 2024 · 8a51a1d · 8a51a1d
2 parents 6ffb91d + 2331fd8
commit 8a51a1d
Show file tree

Hide file tree

Showing 30 changed files with 836 additions and 206 deletions.
diff --git a/app/(private)/_components/sidebar/botItems.tsx b/app/(private)/_components/sidebar/botItems.tsx
@@ -0,0 +1,39 @@
+"use client";
+import { FaCircleQuestion, FaGear, FaUser } from "react-icons/fa6";
+
+import { useDashboardContext } from "@/context/dashboard";
+import { cn } from "@/lib/utils";
+
+import ItemWrapper from "./itemWrapper";
+
+export default function BottomItems() {
+  const dashboardCtx = useDashboardContext();
+  return (
+    <>
+      <ul
+        className={cn(
+          "relative mb-24 box-border",
+          dashboardCtx.isExpanded ? "w-full" : "w-16",
+          "after:absolute after:top-[-0.125rem] after:h-[0.125rem] after:w-full",
+          "after:via-spacer after:bg-gradient-to-r after:from-card after:via-primary after:via-50% after:to-card"
+        )}
+      >
+        <ItemWrapper name="settings" alert={false}>
+          <div className="w-6">
+            <FaGear />
+          </div>
+        </ItemWrapper>{" "}
+        <ItemWrapper name="help" alert={false}>
+          <div className="w-6">
+            <FaCircleQuestion />
+          </div>
+        </ItemWrapper>
+        <ItemWrapper name="account" alert={false}>
+          <div className="w-6">
+            <FaUser />
+          </div>
+        </ItemWrapper>
+      </ul>
+    </>
+  );
+}
diff --git a/app/(private)/_components/sidebar/expand.tsx b/app/(private)/_components/sidebar/expand.tsx
@@ -0,0 +1,37 @@
+"use client";
+import { FaArrowLeft } from "react-icons/fa6";
+
+import { Button } from "@/components/ui/button";
+import { useDashboardContext } from "@/context/dashboard";
+import { cn } from "@/lib/utils";
+
+export default function ExpandDashboardSidebar() {
+  const dashboardCtx = useDashboardContext();
+  return (
+    <>
+      <Button
+        variant="ghost"
+        size="icon"
+        className={cn(
+          "group/item",
+          "relative flex h-[3.75rem] w-full items-center rounded-none transition-all",
+          "text-xl",
+          dashboardCtx.isExpanded ? "gap-2 pl-0 pr-4" : "gap-0 px-6",
+          "bg-card text-card-foreground hover:bg-primary hover:text-primary-foreground"
+        )}
+        onClick={dashboardCtx.toggle}
+      >
+        <FaArrowLeft
+          className={cn(dashboardCtx.isExpanded ? "rotate-0" : "rotate-180")}
+        />
+        <span
+          className={cn(
+            dashboardCtx.isExpanded ? "w-auto opacity-100" : "w-0 opacity-0"
+          )}
+        >
+          Collapse
+        </span>
+      </Button>
+    </>
+  );
+}
diff --git a/app/(private)/_components/sidebar/index.tsx b/app/(private)/_components/sidebar/index.tsx
@@ -0,0 +1,32 @@
+import { cn } from "@/lib/utils";
+
+import BottomItems from "./botItems";
+import ExpandDashboardSidebar from "./expand";
+import Items from "./items";
+import SidebarWrapper from "./wrapper";
+
+export default function Sidebar() {
+  return (
+    <>
+      <SidebarWrapper>
+        <nav className="mt-12 box-border flex h-full w-full flex-col align-baseline">
+          <Items />
+        </nav>
+        <nav className="mt-auto grid w-full">
+          <BottomItems />
+        </nav>
+        <ExpandDashboardSidebar />
+      </SidebarWrapper>
+      <div
+        className={cn(
+          "fixed left-0 top-0 z-[10] h-full w-full bg-[#000000] bg-opacity-50 transition-opacity duration-300",
+          "pointer-events-none opacity-0 peer-hover/sidebar:opacity-100"
+          // isExpanded
+          // ? "pointer-events-auto opacity-100"
+          // : "pointer-events-none opacity-0",
+        )}
+        //   onClick$={() => sidebar.toggle()}
+      ></div>
+    </>
+  );
+}
diff --git a/app/(private)/_components/sidebar/itemWrapper.tsx b/app/(private)/_components/sidebar/itemWrapper.tsx
@@ -0,0 +1,126 @@
+"use client";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from "@/components/ui/tooltip";
+import { useDashboardContext } from "@/context/dashboard";
+import { cn } from "@/lib/utils";
+
+type ItemWrapperProps = {
+  children: React.ReactNode;
+  alert: boolean;
+  name: string;
+};
+
+export default function ItemWrapper({
+  children,
+  alert,
+  name,
+}: ItemWrapperProps) {
+  const dashboardCtx = useDashboardContext();
+  const pathname = usePathname();
+  return (
+    <li className="w-full">
+      {dashboardCtx.isExpanded ? (
+        <Button
+          variant="ghost"
+          size="icon"
+          className={cn(
+            "group/item",
+            "relative flex h-[3.75rem] w-full items-center justify-between rounded-none transition-all",
+            "text-xl",
+            `/dashboard/${name}` === pathname
+              ? "bg-primary text-primary-foreground"
+              : "bg-card text-card-foreground hover:bg-primary hover:text-primary-foreground",
+            dashboardCtx.isExpanded ? "pl-10 pr-4" : "px-6"
+          )}
+          aria-label={name}
+          asChild
+        >
+          <Link href={`/dashboard/${name}`}>
+            <div
+              className={cn(
+                "flex items-center",
+                dashboardCtx.isExpanded ? "gap-3" : "gap-0"
+              )}
+            >
+              {children}{" "}
+              <span
+                className={cn(
+                  "capitalize",
+                  dashboardCtx.isExpanded
+                    ? "w-[100%] opacity-100"
+                    : "w-[0%] opacity-0"
+                )}
+              >
+                {name}
+              </span>
+            </div>
+
+            <div
+              className={cn(alert ? "bg-primary" : "", "h-2 w-2 rounded-full")}
+              aria-hidden="true"
+            ></div>
+          </Link>
+        </Button>
+      ) : (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className={cn(
+                "group/item",
+                "relative flex h-[3.75rem] w-full items-center justify-between rounded-none transition-all",
+                "text-xl",
+                `/dashboard/${name}` === pathname
+                  ? "bg-primary text-primary-foreground"
+                  : "bg-card text-card-foreground hover:bg-primary hover:text-primary-foreground",
+                dashboardCtx.isExpanded ? "pl-10 pr-4" : "px-6"
+              )}
+              aria-label={name}
+              asChild
+            >
+              <Link href={`/dashboard/${name}`}>
+                <div
+                  className={cn(
+                    "flex items-center",
+                    dashboardCtx.isExpanded ? "gap-3" : "gap-0"
+                  )}
+                >
+                  {children}
+                  <span
+                    className={cn(
+                      "capitalize",
+                      dashboardCtx.isExpanded
+                        ? "w-[100%] opacity-100"
+                        : "w-[0%] opacity-0"
+                    )}
+                  >
+                    {name}
+                  </span>
+                </div>
+
+                <div
+                  className={cn(
+                    alert ? "bg-primary" : "",
+                    "absolute right-2 top-1/2 h-2 w-2 rounded-full"
+                  )}
+                  aria-hidden="true"
+                ></div>
+              </Link>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="right" sideOffset={5} className="capitalize">
+            {name}
+          </TooltipContent>
+        </Tooltip>
+      )}
+    </li>
+  );
+}
diff --git a/app/(private)/_components/sidebar/items.tsx b/app/(private)/_components/sidebar/items.tsx
@@ -0,0 +1,28 @@
+import { FaChartLine, FaTable } from "react-icons/fa6";
+import { MdDashboard } from "react-icons/md";
+
+import ItemWrapper from "./itemWrapper";
+
+export default function Items() {
+  return (
+    <>
+      <ul className="relative mb-24 box-border w-full">
+        <ItemWrapper name="overview" alert={false}>
+          <div className="w-6">
+            <MdDashboard />
+          </div>
+        </ItemWrapper>
+        <ItemWrapper name="items" alert={false}>
+          <div className="w-6">
+            <FaTable />
+          </div>
+        </ItemWrapper>
+        <ItemWrapper name="analytics" alert={false}>
+          <div className="w-6">
+            <FaChartLine />
+          </div>
+        </ItemWrapper>
+      </ul>
+    </>
+  );
+}
diff --git a/app/(private)/_components/sidebar/wrapper.tsx b/app/(private)/_components/sidebar/wrapper.tsx
@@ -0,0 +1,23 @@
+"use client";
+import { useDashboardContext } from "@/context/dashboard";
+import { cn } from "@/lib/utils";
+
+export default function SidebarWrapper({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const dashboardCtx = useDashboardContext();
+  return (
+    <aside
+      className={cn(
+        "peer/sidebar transition-all",
+        "fixed z-[11] box-border hidden h-[100svh] flex-col bg-card md:flex",
+        "shadow",
+        dashboardCtx.isExpanded ? "w-[13.75rem]" : "w-16"
+      )}
+    >
+      {children}
+    </aside>
+  );
+}
diff --git a/app/(private)/dashboard/account/page.tsx b/app/(private)/dashboard/account/page.tsx
@@ -0,0 +1,7 @@
+export default function Overview() {
+  return (
+    <>
+      <section></section>
+    </>
+  );
+}
diff --git a/app/(private)/dashboard/analytics/page.tsx b/app/(private)/dashboard/analytics/page.tsx
@@ -0,0 +1,7 @@
+export default function Overview() {
+  return (
+    <>
+      <section></section>
+    </>
+  );
+}
diff --git a/app/(private)/dashboard/help/page.tsx b/app/(private)/dashboard/help/page.tsx
@@ -0,0 +1,7 @@
+export default function Overview() {
+  return (
+    <>
+      <section></section>
+    </>
+  );
+}
diff --git a/app/(private)/dashboard/items/page.tsx b/app/(private)/dashboard/items/page.tsx
@@ -0,0 +1,7 @@
+export default function Overview() {
+  return (
+    <>
+      <section></section>
+    </>
+  );
+}
diff --git a/app/(private)/dashboard/layout.tsx b/app/(private)/dashboard/layout.tsx
@@ -0,0 +1,27 @@
+"use client";
+import Sidebar from "@/app/(private)/_components/sidebar";
+import CookieBanner from "@/components/cookies";
+import { useDashboardContext } from "@/context/dashboard";
+import { cn } from "@/lib/utils";
+export default function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const dashboardCtx = useDashboardContext();
+  return (
+    <>
+      <Sidebar />
+      <main
+        id="content"
+        className={cn(
+          "min-h-[100svh] w-full bg-background p-12 pt-[10rem] transition-all md:pt-12",
+          dashboardCtx.isExpanded ? "md:pl-[16.75rem]" : "md:pl-28"
+        )}
+      >
+        {children}
+      </main>
+      <CookieBanner />
+    </>
+  );
+}
diff --git a/app/(private)/dashboard/overview/page.tsx b/app/(private)/dashboard/overview/page.tsx
@@ -0,0 +1,7 @@
+export default function Overview() {
+  return (
+    <>
+      <section></section>
+    </>
+  );
+}
diff --git a/app/(private)/dashboard/settings/page.tsx b/app/(private)/dashboard/settings/page.tsx
@@ -0,0 +1,7 @@
+export default function Overview() {
+  return (
+    <>
+      <section></section>
+    </>
+  );
+}
diff --git a/app/(private)/layout.tsx b/app/(private)/layout.tsx
@@ -0,0 +1,16 @@
+import { TooltipProvider } from "@/components/ui/tooltip";
+import DashboardContextProvider from "@/context/dashboard";
+
+export default function PrivateLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <TooltipProvider>
+        <DashboardContextProvider>{children}</DashboardContextProvider>
+      </TooltipProvider>
+    </>
+  );
+}