Skip to content

Commit 2e57e9a

Browse files
hanuchaudharyhanuchaudhary
committed
changes
1 parent 2462b0c commit 2e57e9a

File tree

4 files changed

+131
-29
lines changed

4 files changed

+131
-29
lines changed

‎app/dashboard/layout.tsx

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { AppSidebar } from "@/components/dashboardComponents/AppSidebar";
2+
import MobileSidear from "@/components/dashboardComponents/MobileSidebar";
23
import type { Metadata } from "next";
34

45
export const metadata: Metadata = {
@@ -14,10 +15,13 @@ export default function RootLayout({
1415

1516
return (
1617
<body>
17-
<main className="flex min-h-screen overflow-hidden md:gap-3 gap-1 md:p-3 p-1 h-full">
18-
<div>
18+
<main className="flex min-h-screen overflow-hidden md:gap-3 md:p-3 h-full">
19+
<div className="md:block hidden">
1920
<AppSidebar />
2021
</div>
22+
<div className="md:hidden block fixed top-1 left-1 w-full z-50">
23+
<MobileSidear/>
24+
</div>
2125
<div className="w-full dark:bg-neutral-900 md:p-6 p-3 bg-neutral-200 md:rounded-xl rounded-sm">{children}</div>
2226
</main>
2327
</body>

‎components/dashboardComponents/AppSidebar.tsx

+1-27
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,6 @@ import {
55
Moon,
66
Sun,
77
LogOut,
8-
User,
9-
Settings,
10-
BookA,
11-
FileQuestion,
128
ChevronRight,
139
ChevronLeft,
1410
} from "lucide-react";
@@ -18,29 +14,7 @@ import Link from "next/link";
1814

1915
import { Button } from "@/components/ui/button";
2016
import { cn } from "@/lib/utils";
21-
22-
const SidebarData = [
23-
{
24-
title: "Profile",
25-
icon: User,
26-
href: "/dashboard/profile",
27-
},
28-
{
29-
title: "Problems",
30-
icon: FileQuestion,
31-
href: "/dashboard/problems",
32-
},
33-
{
34-
title: "Journal",
35-
icon: BookA,
36-
href: "/dashboard/journal",
37-
},
38-
{
39-
title: "Settings",
40-
icon: Settings,
41-
href: "/dashboard/settings",
42-
},
43-
];
17+
import { SidebarData } from "@/data/SidebarData";
4418

4519
export function AppSidebar() {
4620
const { setTheme, theme } = useTheme();

‎components/dashboardComponents/MobileSidebar.tsx

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
"use client";
2+
3+
import React from "react";
4+
import {
5+
Sheet,
6+
SheetContent,
7+
SheetDescription,
8+
SheetFooter,
9+
SheetHeader,
10+
SheetTitle,
11+
SheetTrigger,
12+
} from "../ui/sheet";
13+
import { Button } from "../ui/button";
14+
import {
15+
BookA,
16+
FileQuestion,
17+
Github,
18+
Menu,
19+
Settings,
20+
User,
21+
} from "lucide-react";
22+
import { useTheme } from "next-themes";
23+
import { usePathname } from "next/navigation";
24+
import Link from "next/link";
25+
import { cn } from "@/lib/utils";
26+
import { SidebarData } from "@/data/SidebarData";
27+
import { signout } from "@/app/actions/action";
28+
29+
export default function MobileSidear() {
30+
const { setTheme, theme } = useTheme();
31+
const pathname = usePathname();
32+
33+
const toggleTheme = () => {
34+
setTheme(theme === "dark" ? "light" : "dark");
35+
};
36+
return (
37+
<Sheet>
38+
<SheetTrigger asChild>
39+
<button className="p-2 rounded-lg bg-secondary/50 dark:bg-secondary/60 backdrop-blur-sm">
40+
<Menu />
41+
</button>
42+
</SheetTrigger>
43+
<SheetContent side={"left"}>
44+
<SheetHeader>
45+
<SheetTitle>
46+
<h1 className="font-ClashDisplayMedium text-xl">
47+
LeetCode Journal.
48+
</h1>
49+
<SheetDescription className="text-neutral-500 dark:text-neutral-400">
50+
Your personal coding companion.
51+
</SheetDescription>
52+
</SheetTitle>
53+
</SheetHeader>
54+
<nav className="flex-grow overflow-y-auto py-4">
55+
<ul className="space-y-2">
56+
{SidebarData.map((item, index) => {
57+
const isActive = pathname === item.href;
58+
return (
59+
<li key={index}>
60+
<Link
61+
href={item.href}
62+
className={cn(
63+
"flex items-center p-2 rounded-lg transition-colors duration-200",
64+
isActive
65+
? "bg-primary text-primary-foreground"
66+
: "hover:bg-primary/10 dark:hover:bg-primary/20"
67+
)}
68+
>
69+
<item.icon className={cn("h-6 w-6 mr-2")} />
70+
<span>{item.title}</span>
71+
</Link>
72+
</li>
73+
);
74+
})}
75+
</ul>
76+
</nav>
77+
{/* <NavItems /> */}
78+
<SheetFooter className="absolute p-2 gap-1 bg-secondary/50 rounded-t-xl flex-col text-neutral-500 dark:text-neutral-400 flex items-center justify-center bottom-0 left-0 w-full">
79+
<Button
80+
onClick={toggleTheme}
81+
size={"sm"}
82+
variant={"outline"}
83+
className="font-semibold w-full"
84+
>
85+
{theme === "dark" ? "Light Mode" : "Dark Mode"}
86+
</Button>
87+
<Button
88+
onClick={signout}
89+
variant={"outline"}
90+
size={"sm"}
91+
className="font-semibold w-full text-red-500"
92+
>
93+
Sign Out
94+
</Button>
95+
</SheetFooter>
96+
</SheetContent>
97+
</Sheet>
98+
);
99+
}

‎data/SidebarData.ts

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { BookA, FileQuestion, Settings, User } from "lucide-react";
2+
3+
export const SidebarData = [
4+
{
5+
title: "Profile",
6+
icon: User,
7+
href: "/dashboard/profile",
8+
},
9+
{
10+
title: "Problems",
11+
icon: FileQuestion,
12+
href: "/dashboard/problems",
13+
},
14+
{
15+
title: "Journal",
16+
icon: BookA,
17+
href: "/dashboard/journal",
18+
},
19+
{
20+
title: "Settings",
21+
icon: Settings,
22+
href: "/dashboard/settings",
23+
},
24+
];
25+

0 commit comments

Comments
 (0)