Skip to content

Commit 91d3513

Browse files
yashksaini-coderyashksaini-coder
authored
Merge pull request #121 from hanuchaudhary/fix
Fixed dashboard navbar
2 parents 09b948c + f467245 commit 91d3513

File tree

7 files changed

+163
-36
lines changed

7 files changed

+163
-36
lines changed

‎app/dashboard/layout.tsx

+4-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { AppSidebar } from "@/components/dashboardComponents/AppSidebar";
2+
import { DashboardNavbar } from "@/components/dashboardComponents/DashboardNavbar";
23
import MobileSidear from "@/components/dashboardComponents/MobileSidebar";
34
import type { Metadata } from "next";
45
export const metadata: Metadata = {
@@ -11,14 +12,12 @@ export default function RootLayout({
1112
children: React.ReactNode;
1213
}) {
1314
return (
14-
<main className="flex min-h-screen overflow-hidden md:gap-3 md:p-3 h-full">
15-
<div className="md:block hidden">
16-
<AppSidebar />
17-
</div>
15+
<main className="min-h-screen max-w-7xl mx-auto px-3">
16+
<DashboardNavbar />
1817
<div className="md:hidden block fixed top-1 left-1 w-full z-50">
1918
<MobileSidear/>
2019
</div>
2120
<div className="w-full dark:bg-neutral-900 bg-neutral-200 md:rounded-xl rounded-sm">{children}</div>
2221
</main>
2322
);
24-
}
23+
}

‎app/layout.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import "./globals.css";
22
import type { Metadata } from "next";
33
import { Inter } from "next/font/google";
44
import { ThemeProvider } from "@/components/theme-provider";
5-
import { V2Navbar } from "@/components/DashboardV2/V2Navbar";
65

76
const inter = Inter({ subsets: ["latin"] });
87

@@ -20,7 +19,6 @@ export default function RootLayout({
2019
<html lang="en" suppressHydrationWarning>
2120
<body className={inter.className}>
2221
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
23-
<V2Navbar />
2422
{children}
2523
</ThemeProvider>
2624
</body>

‎app/page.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { PricingSection } from "@/components/DashboardV2/PricingSection";
99
import { ServicesSection } from "@/components/DashboardV2/ServicesSection";
1010
import { TeamSection } from "@/components/DashboardV2/TeamSection";
1111
import { TestimonialSection } from "@/components/DashboardV2/TestimonialSection";
12+
import { V2Navbar } from "@/components/DashboardV2/V2Navbar";
1213

1314
export const metadata = {
1415
title: "LeetCode Journal - Your Coding Companion",
@@ -41,6 +42,7 @@ export const metadata = {
4142
export default function Home() {
4243
return (
4344
<div className="w-full">
45+
<V2Navbar/>
4446
<HeroSection />
4547
<BenefitsSection />
4648
<FeaturesSection />

‎components/AuthComponent/Logout.tsx

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
"use client";
2+
3+
import React from "react";
4+
import {
5+
AlertDialog,
6+
AlertDialogAction,
7+
AlertDialogCancel,
8+
AlertDialogContent,
9+
AlertDialogDescription,
10+
AlertDialogFooter,
11+
AlertDialogHeader,
12+
AlertDialogTitle,
13+
AlertDialogTrigger,
14+
} from "../ui/alert-dialog";
15+
import { LogOut } from "lucide-react";
16+
import { signout } from "@/app/actions/action";
17+
import { useRouter } from "next/navigation";
18+
import { Button } from "../ui/button";
19+
20+
type buttonVariant =
21+
| "link"
22+
| "default"
23+
| "destructive"
24+
| "outline"
25+
| "secondary"
26+
| "ghost"
27+
| null
28+
| undefined;
29+
30+
export default function Logout({ variant = "default" }: { variant?: buttonVariant }) {
31+
const router = useRouter();
32+
const handleLogout = async () => {
33+
try {
34+
signout();
35+
router.push("/auth/signin");
36+
} catch (error) {
37+
console.error("Sign out error:", error);
38+
}
39+
};
40+
return (
41+
<AlertDialog>
42+
<AlertDialogTrigger>
43+
<Button variant={variant} size={"sm"}>
44+
Logout
45+
<LogOut />
46+
</Button>
47+
</AlertDialogTrigger>
48+
<AlertDialogContent>
49+
<AlertDialogHeader>
50+
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
51+
<AlertDialogDescription>
52+
This action will Logout you from the application.
53+
</AlertDialogDescription>
54+
</AlertDialogHeader>
55+
<AlertDialogFooter>
56+
<AlertDialogCancel>Cancel</AlertDialogCancel>
57+
<AlertDialogAction onClick={handleLogout}>Continue</AlertDialogAction>
58+
</AlertDialogFooter>
59+
</AlertDialogContent>
60+
</AlertDialog>
61+
);
62+
}

‎components/dashboardComponents/AppSidebar.tsx

+3-26
Original file line numberDiff line numberDiff line change
@@ -27,21 +27,14 @@ import {
2727
AlertDialogTitle,
2828
AlertDialogTrigger,
2929
} from "@/components/ui/alert-dialog"
30+
import Logout from "../AuthComponent/Logout";
3031

3132

3233
export function AppSidebar() {
3334
const { setTheme, theme } = useTheme();
3435
const pathname = usePathname();
35-
const router = useRouter();
3636
const [isCollapsed, setIsCollapsed] = React.useState(false);
37-
const handleLogout = async () => {
38-
try {
39-
signout();
40-
router.push('/auth/signin');
41-
} catch (error) {
42-
console.error("Sign out error:", error);
43-
}
44-
};
37+
4538

4639
return (
4740
<aside
@@ -107,23 +100,7 @@ export function AppSidebar() {
107100
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
108101
<span className="sr-only">Toggle theme</span>
109102
</Button>
110-
<AlertDialog>
111-
<AlertDialogTrigger>
112-
<LogOut className="cursor-pointer h-[1.8rem] w-[1.8rem] bg-grey " />
113-
</AlertDialogTrigger>
114-
<AlertDialogContent>
115-
<AlertDialogHeader>
116-
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
117-
<AlertDialogDescription>
118-
This action will Logout you from the application.
119-
</AlertDialogDescription>
120-
</AlertDialogHeader>
121-
<AlertDialogFooter>
122-
<AlertDialogCancel>Cancel</AlertDialogCancel>
123-
<AlertDialogAction onClick={handleLogout}>Continue</AlertDialogAction>
124-
</AlertDialogFooter>
125-
</AlertDialogContent>
126-
</AlertDialog>
103+
<Logout/>
127104
</div>
128105
</div>
129106
</aside>

‎components/dashboardComponents/DashboardNavbar.tsx

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
"use client";
2+
import { Menu } from "lucide-react";
3+
import React from "react";
4+
import {
5+
Sheet,
6+
SheetContent,
7+
SheetFooter,
8+
SheetHeader,
9+
SheetTitle,
10+
SheetTrigger,
11+
} from "../ui/sheet";
12+
import { Separator } from "../ui/separator";
13+
import { Button } from "../ui/button";
14+
import Link from "next/link";
15+
import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
16+
import { ToggleTheme } from "../DashboardV2/ToggleTheme";
17+
import Logout from "../AuthComponent/Logout";
18+
import { SidebarData } from "@/data/SidebarData";
19+
20+
export const DashboardNavbar = () => {
21+
const [isOpen, setIsOpen] = React.useState(false);
22+
return (
23+
<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">
24+
<Link href="/" className="flex items-center font-semibold">
25+
<Avatar>
26+
<AvatarImage src="/logo.png" />
27+
<AvatarFallback>LC</AvatarFallback>
28+
</Avatar>
29+
Leetcode Journal
30+
</Link>
31+
{/* <!-- Mobile --> */}
32+
<div className="flex items-center lg:hidden">
33+
<Sheet open={isOpen} onOpenChange={setIsOpen}>
34+
<SheetTrigger asChild>
35+
<Menu
36+
onClick={() => setIsOpen(!isOpen)}
37+
className="cursor-pointer lg:hidden"
38+
/>
39+
</SheetTrigger>
40+
41+
<SheetContent
42+
side="left"
43+
className="flex flex-col justify-between rounded-tr-2xl rounded-br-2xl bg-card border-secondary"
44+
>
45+
<div>
46+
<SheetHeader className="mb-4 ml-4">
47+
<SheetTitle className="flex items-center">
48+
<Link href="/" className="flex items-center">
49+
<Avatar>
50+
<AvatarImage src="/logo.png" />
51+
<AvatarFallback>LC</AvatarFallback>
52+
</Avatar>
53+
Leetcode Journal
54+
</Link>
55+
</SheetTitle>
56+
</SheetHeader>
57+
58+
<div className="flex flex-col gap-2">
59+
{SidebarData.map(({ href, title }) => (
60+
<Button
61+
key={href}
62+
onClick={() => setIsOpen(false)}
63+
asChild
64+
variant="ghost"
65+
className="justify-start text-base"
66+
>
67+
<Link href={href}>{title}</Link>
68+
</Button>
69+
))}
70+
</div>
71+
</div>
72+
73+
<SheetFooter className="flex-col sm:flex-col justify-start items-start">
74+
<Separator className="mb-2" />
75+
76+
<ToggleTheme />
77+
<Logout variant={"destructive"} />
78+
</SheetFooter>
79+
</SheetContent>
80+
</Sheet>
81+
</div>
82+
83+
<div className="hidden lg:flex gap-2">
84+
<ToggleTheme />
85+
<Logout />
86+
</div>
87+
</header>
88+
);
89+
};

‎components/ui/button.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
55
import { cn } from "@/lib/utils"
66

77
const buttonVariants = cva(
8-
"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",
8+
"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",
99
{
1010
variants: {
1111
variant: {
@@ -21,8 +21,8 @@ const buttonVariants = cva(
2121
},
2222
size: {
2323
default: "h-10 px-4 py-2",
24-
sm: "h-9 rounded-md px-3",
25-
lg: "h-11 rounded-md px-8",
24+
sm: "h-9 rounded-2xl px-3",
25+
lg: "h-11 rounded-2xl px-8",
2626
icon: "h-10 w-10",
2727
},
2828
},

0 commit comments

Comments
 (0)