yashksaini-coder · yashksaini-coder · Feb 10, 2025 · Feb 10, 2025 · Feb 10, 2025 · Feb 10, 2025
diff --git a/app/dashboard/layout.tsx b/app/dashboard/layout.tsx
@@ -1,4 +1,5 @@
 import { AppSidebar } from "@/components/dashboardComponents/AppSidebar";
+import { DashboardNavbar } from "@/components/dashboardComponents/DashboardNavbar";
 import MobileSidear from "@/components/dashboardComponents/MobileSidebar";
 import type { Metadata } from "next";
 export const metadata: Metadata = {
@@ -11,14 +12,12 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <main className="flex min-h-screen overflow-hidden md:gap-3 md:p-3 h-full">
-      <div className="md:block hidden">
-        <AppSidebar />
-      </div>
+    <main className="min-h-screen max-w-7xl mx-auto px-3">
+      <DashboardNavbar />
       <div className="md:hidden block fixed top-1 left-1 w-full z-50">
         <MobileSidear/>
       </div>
-      <div className="w-full dark:bg-neutral-900 md:p-6 p-3 bg-neutral-200 md:rounded-xl rounded-sm">{children}</div>
+      <div className="w-full dark:bg-neutral-900 bg-neutral-200 md:rounded-xl rounded-sm">{children}</div>
     </main>
   );
-}
+}
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
@@ -17,8 +17,6 @@ import {
   Trophy,
   TrendingUp,
   CheckCircle,
-  XCircle,
-  Calendar
 } from "lucide-react";
 
 export default function Dashboard() {

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -2,7 +2,6 @@ import "./globals.css";
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import { ThemeProvider } from "@/components/theme-provider";
-import { V2Navbar } from "@/components/DashboardV2/V2Navbar";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -20,7 +19,6 @@ export default function RootLayout({
     <html lang="en" suppressHydrationWarning>
       <body className={inter.className}>
         <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-          <V2Navbar />
           {children}
         </ThemeProvider>
       </body>

diff --git a/app/page.tsx b/app/page.tsx
@@ -9,6 +9,7 @@ import { PricingSection } from "@/components/DashboardV2/PricingSection";
 import { ServicesSection } from "@/components/DashboardV2/ServicesSection";
 import { TeamSection } from "@/components/DashboardV2/TeamSection";
 import { TestimonialSection } from "@/components/DashboardV2/TestimonialSection";
+import { V2Navbar } from "@/components/DashboardV2/V2Navbar";
 
 export const metadata = {
   title: "LeetCode Journal - Your Coding Companion",
@@ -41,6 +42,7 @@ export const metadata = {
 export default function Home() {
   return (
     <div className="w-full">
+      <V2Navbar/>
       <HeroSection />
       <BenefitsSection />
       <FeaturesSection />

diff --git a/components/AuthComponent/Logout.tsx b/components/AuthComponent/Logout.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import React from "react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "../ui/alert-dialog";
+import { LogOut } from "lucide-react";
+import { signout } from "@/app/actions/action";
+import { useRouter } from "next/navigation";
+import { Button } from "../ui/button";
+
+type buttonVariant =
+  | "link"
+  | "default"
+  | "destructive"
+  | "outline"
+  | "secondary"
+  | "ghost"
+  | null
+  | undefined;
+
+export default function Logout({ variant = "default" }: { variant?: buttonVariant }) {
+  const router = useRouter();
+  const handleLogout = async () => {
+    try {
+      signout();
+      router.push("/auth/signin");
+    } catch (error) {
+      console.error("Sign out error:", error);
+    }
+  };
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger>
+        <Button variant={variant} size={"sm"}>
+          Logout
+          <LogOut />
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This action will Logout you from the application.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={handleLogout}>Continue</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
diff --git a/components/dashboardComponents/AppSidebar.tsx b/components/dashboardComponents/AppSidebar.tsx
@@ -27,21 +27,14 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from "@/components/ui/alert-dialog"
+import Logout from "../AuthComponent/Logout";
 
 
 export function AppSidebar() {
   const { setTheme, theme } = useTheme();
   const pathname = usePathname();
-  const router = useRouter();
   const [isCollapsed, setIsCollapsed] = React.useState(false);
-  const handleLogout = async () => {
-    try {
-      signout();
-      router.push('/auth/signin');
-    } catch (error) {
-      console.error("Sign out error:", error);
-    }
-  };
+
 
   return (
     <aside
@@ -107,23 +100,7 @@ export function AppSidebar() {
             <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
             <span className="sr-only">Toggle theme</span>
           </Button>
-          <AlertDialog>
-            <AlertDialogTrigger>
-              <LogOut className="cursor-pointer h-[1.8rem] w-[1.8rem] bg-grey " />
-            </AlertDialogTrigger>
-            <AlertDialogContent>
-              <AlertDialogHeader>
-                <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-                <AlertDialogDescription>
-                  This action will Logout you from the application.
-                </AlertDialogDescription>
-              </AlertDialogHeader>
-              <AlertDialogFooter>
-                <AlertDialogCancel>Cancel</AlertDialogCancel>
-                <AlertDialogAction onClick={handleLogout}>Continue</AlertDialogAction>
-              </AlertDialogFooter>
-            </AlertDialogContent>
-          </AlertDialog>
+          <Logout/>
         </div>
       </div>
     </aside>

diff --git a/components/dashboardComponents/DashboardNavbar.tsx b/components/dashboardComponents/DashboardNavbar.tsx
@@ -0,0 +1,89 @@
+"use client";
+import { Menu } from "lucide-react";
+import React from "react";
+import {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "../ui/sheet";
+import { Separator } from "../ui/separator";
+import { Button } from "../ui/button";
+import Link from "next/link";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
+import { ToggleTheme } from "../DashboardV2/ToggleTheme";
+import Logout from "../AuthComponent/Logout";
+import { SidebarData } from "@/data/SidebarData";
+
+export const DashboardNavbar = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  return (
+    <header className="shadow-inner w-full my-3 lg:max-w-screen-xl top-5 mx-auto  border border-secondary z-40 rounded-2xl flex justify-between items-center p-2 bg-secondary/30 backdrop-blur-md">
+      <Link href="/" className="flex items-center font-semibold">
+        <Avatar>
+          <AvatarImage src="/logo.png" />
+          <AvatarFallback>LC</AvatarFallback>
+        </Avatar>
+        Leetcode Journal
+      </Link>
+      {/* <!-- Mobile --> */}
+      <div className="flex items-center lg:hidden">
+        <Sheet open={isOpen} onOpenChange={setIsOpen}>
+          <SheetTrigger asChild>
+            <Menu
+              onClick={() => setIsOpen(!isOpen)}
+              className="cursor-pointer lg:hidden"
+            />
+          </SheetTrigger>
+
+          <SheetContent
+            side="left"
+            className="flex flex-col justify-between rounded-tr-2xl rounded-br-2xl bg-card border-secondary"
+          >
+            <div>
+              <SheetHeader className="mb-4 ml-4">
+                <SheetTitle className="flex items-center">
+                  <Link href="/" className="flex items-center">
+                    <Avatar>
+                      <AvatarImage src="/logo.png" />
+                      <AvatarFallback>LC</AvatarFallback>
+                    </Avatar>
+                    Leetcode Journal
+                  </Link>
+                </SheetTitle>
+              </SheetHeader>
+
+              <div className="flex flex-col gap-2">
+                {SidebarData.map(({ href, title }) => (
+                  <Button
+                    key={href}
+                    onClick={() => setIsOpen(false)}
+                    asChild
+                    variant="ghost"
+                    className="justify-start text-base"
+                  >
+                    <Link href={href}>{title}</Link>
+                  </Button>
+                ))}
+              </div>
+            </div>
+
+            <SheetFooter className="flex-col sm:flex-col justify-start items-start">
+              <Separator className="mb-2" />
+
+              <ToggleTheme />
+              <Logout variant={"destructive"} />
+            </SheetFooter>
+          </SheetContent>
+        </Sheet>
+      </div>
+
+      <div className="hidden lg:flex gap-2">
+        <ToggleTheme />
+        <Logout />
+      </div>
+    </header>
+  );
+};
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-2xl text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -21,8 +21,8 @@ const buttonVariants = cva(
       },
       size: {
         default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
+        sm: "h-9 rounded-2xl px-3",
+        lg: "h-11 rounded-2xl px-8",
         icon: "h-10 w-10",
       },
     },