Skip to content

Commit e54048b

Browse files
yashksaini-coderyashksaini-coder
authored
Merge pull request #127 from yashksaini-coder/responive-design
✨ Feature: Responive design for Mobile and UI fixes
2 parents e3e22c0 + 06162aa commit e54048b

File tree

11 files changed

+899
-376
lines changed

11 files changed

+899
-376
lines changed

‎app/dashboard/layout.tsx

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,29 @@
1-
import { AppSidebar } from "@/components/dashboardComponents/AppSidebar";
21
import { DashboardNavbar } from "@/components/dashboardComponents/DashboardNavbar";
3-
import MobileSidear from "@/components/dashboardComponents/MobileSidebar";
42
import type { Metadata } from "next";
3+
54
export const metadata: Metadata = {
65
title: "LeetCode Journal",
76
description: "Track your LeetCode progress and boost your coding skills",
87
};
8+
99
export default function RootLayout({
1010
children,
1111
}: {
1212
children: React.ReactNode;
1313
}) {
1414
return (
15-
<main className="min-h-screen max-w-7xl mx-auto px-3">
16-
<DashboardNavbar />
17-
<div className="md:hidden block fixed top-1 left-1 w-full z-50">
18-
<MobileSidear/>
15+
<div className="min-h-screen bg-neutral-50 dark:bg-neutral-900">
16+
<div className="max-w-7xl mx-auto px-3 sm:px-4 md:px-6">
17+
{/* Top navbar */}
18+
<DashboardNavbar />
19+
20+
{/* Main content with minimal spacing */}
21+
<div className="mt-2 sm:mt-3 md:mt-4">
22+
<div className="rounded-lg overflow-hidden shadow-sm">
23+
{children}
24+
</div>
25+
</div>
1926
</div>
20-
<div className="w-full dark:bg-neutral-900 dark: text-white bg-neutral-200 md:rounded-xl rounded-sm">{children}</div>
21-
</main>
27+
</div>
2228
);
2329
}

‎app/dashboard/page.tsx

Lines changed: 152 additions & 140 deletions
Large diffs are not rendered by default.

‎app/dashboard/problems/page.tsx

Lines changed: 141 additions & 107 deletions
Large diffs are not rendered by default.

‎app/not-found.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ export default function NotFound() {
1515
<a href="https://github.com/sponsors/yashksaini-coder" target="_blank" className="relative px-2 py-1">help cover his cloud charges by sponsoring him on GitHub.</a>
1616
</span>
1717
</span>
18-
.
1918
</p>
2019
<Link href="/" className="text-blue-500 hover:text-blue-700 underline">
2120
Return to Home

‎components/DashboardV2/V2Navbar.tsx

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,10 @@ interface FeatureProps {
3838
}
3939

4040
const routeList: RouteProps[] = [
41-
{
42-
href: "#testimonials",
43-
label: "Testimonials",
44-
},
41+
// {
42+
// href: "#testimonials",
43+
// label: "Testimonials",
44+
// },
4545
{
4646
href: "#team",
4747
label: "Team",
@@ -97,12 +97,14 @@ export const NavigationContent = () => {
9797
</Button>
9898
) : (
9999
<>
100-
<Link href="/auth/register">
101-
<Button className="rounded-2xl">Register</Button>
102-
</Link>
103-
<Link href="/auth/signin">
104-
<Button className="rounded-2xl">Login</Button>
105-
</Link>
100+
<div className="justify-between flex gap-2">
101+
<Link href="/auth/register">
102+
<Button className="rounded-xl">Register</Button>
103+
</Link>
104+
<Link href="/auth/signin">
105+
<Button className="rounded-xl">Login</Button>
106+
</Link>
107+
</div>
106108
</>
107109
);
108110
};
@@ -117,6 +119,7 @@ export const NavigationContent = () => {
117119
</Avatar>
118120
Leetcode Journal
119121
</Link>
122+
120123
{/* <!-- Mobile --> */}
121124
<div className="flex items-center lg:hidden">
122125
<Sheet open={isOpen} onOpenChange={setIsOpen}>
@@ -139,13 +142,13 @@ export const NavigationContent = () => {
139142
<AvatarImage src="/logo.png" />
140143
<AvatarFallback>LC</AvatarFallback>
141144
</Avatar>
142-
Leetcode Journal
145+
<p className="text-sm">Leetcode Journal</p>
143146
</Link>
144147
</SheetTitle>
145148
</SheetHeader>
146149

147150
<div className="flex flex-col gap-2">
148-
{routeList.map(({ href, label }) => (
151+
{/* {routeList.map(({ href, label }) => (
149152
<Button
150153
key={href}
151154
onClick={() => setIsOpen(false)}
@@ -155,16 +158,17 @@ export const NavigationContent = () => {
155158
>
156159
<Link href={href}>{label}</Link>
157160
</Button>
158-
))}
161+
))} */}
162+
{renderAuthButtons()}
159163
</div>
160164
</div>
161165

162166
<SheetFooter className="flex-col sm:flex-col justify-start items-start">
163167
<Separator className="mb-2" />
164168

165-
<ToggleTheme />
169+
{/* <ToggleTheme />
166170
<Separator className="mb-2" />
167-
{renderAuthButtons()}
171+
{renderAuthButtons()} */}
168172
</SheetFooter>
169173
</SheetContent>
170174
</Sheet>

‎components/HintCard.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export function HintCard({ hints }: { hints: string[] }) {
1616
return (
1717
<AlertDialog>
1818
<AlertDialogTrigger asChild className="w-36rem rounded-none">
19-
<Button className="py-2 text-black hover:bg-purple-700 bg-white hover:text-white" variant="outline">Hints</Button>
19+
<Button className="text-black hover:bg-purple-700 bg-white hover:text-white" variant="outline">Hints</Button>
2020
</AlertDialogTrigger>
2121
<AlertDialogContent className="max-w-36rem backdrop-blur bg-opacity-100 border border-gray-100 text-white">
2222
<AlertDialogHeader>

‎components/dashboardComponents/DashboardNavbar.tsx

Lines changed: 34 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { SidebarData } from "@/data/SidebarData";
2020
export const DashboardNavbar = () => {
2121
const [isOpen, setIsOpen] = React.useState(false);
2222
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">
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">
2424
<Link href="/" className="flex items-center font-semibold">
2525
<Avatar>
2626
<AvatarImage src="/logo.png" />
@@ -39,50 +39,47 @@ export const DashboardNavbar = () => {
3939
/>
4040
</SheetTrigger>
4141

42-
<SheetContent
42+
<SheetContent
4343
side="left"
4444
className="flex flex-col justify-between rounded-tr-2xl rounded-br-2xl bg-card border-secondary"
45-
>
45+
>
4646
<div>
4747
<SheetHeader className="mb-4 ml-4">
48-
<SheetTitle className="flex items-center">
49-
<Link href="/" className="flex items-center">
50-
<Avatar>
51-
<AvatarImage src="/logo.png" />
52-
<AvatarFallback>LC</AvatarFallback>
53-
</Avatar>
54-
Leetcode Journal
55-
</Link>
56-
</SheetTitle>
48+
<SheetTitle className="flex items-center">
49+
<Link href="/" className="flex items-center">
50+
<Avatar>
51+
<AvatarImage src="/logo.png" />
52+
<AvatarFallback>LC</AvatarFallback>
53+
</Avatar>
54+
Leetcode Journal
55+
</Link>
56+
</SheetTitle>
5757
</SheetHeader>
5858

59-
<div className="flex flex-col gap-2">
60-
{SidebarData.map(({ href, title }) => (
61-
<Button
62-
key={href}
63-
onClick={() => setIsOpen(false)}
64-
asChild
65-
variant="ghost"
66-
className="justify-start text-base"
67-
>
68-
<Link href={href}>{title}</Link>
69-
</Button>
70-
))}
59+
<div className="flex flex-col gap-2 px-2 md:px-4">
60+
{SidebarData.map(({ href, title }) => (
61+
<Button
62+
key={href}
63+
onClick={() => setIsOpen(false)}
64+
asChild
65+
variant="ghost"
66+
className="justify-start text-base w-full md:w-auto"
67+
>
68+
<Link href={href}>{title}</Link>
69+
</Button>
70+
))}
7171
</div>
7272
</div>
73-
74-
<SheetFooter className="flex-col sm:flex-col justify-start items-start">
75-
<Separator className="mb-2" />
76-
77-
<ToggleTheme />
78-
<Logout variant={"destructive"} />
79-
</SheetFooter>
80-
</SheetContent>
73+
<div className="flex gap-2 px-2 md:px-4 mt-2 md:mt-0 w-full md:w-auto justify-between items-center sm:items-start sm:justify-start">
74+
<ToggleTheme />
75+
<Logout variant="destructive" />
76+
</div>
77+
</SheetContent>
8178
</Sheet>
8279
</div>
83-
80+
8481
{/* <!-- Desktop --> */}
85-
<div className="flex gap-2">
82+
<div className="hidden lg:flex gap-2">
8683
{SidebarData.map(({ href, title }) => (
8784
<Button
8885
key={href}
@@ -96,9 +93,9 @@ export const DashboardNavbar = () => {
9693
))}
9794
</div>
9895
<div className="hidden lg:flex gap-2">
99-
<ToggleTheme />
100-
<Logout />
101-
</div>
96+
<ToggleTheme />
97+
<Logout />
98+
</div>
10299
</header>
103100
);
104101
};

‎components/theme-provider.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
"use client"
1+
"use client";
22

3-
import * as React from "react"
4-
import { ThemeProvider as NextThemesProvider } from "next-themes"
5-
import { type ThemeProviderProps } from "next-themes"
3+
import { ThemeProvider as NextThemesProvider } from "next-themes";
4+
import { type ThemeProviderProps } from "next-themes";
65

76
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
8-
return <NextThemesProvider {...props}>{children}</NextThemesProvider>
7+
return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
98
}

‎components/theme-toggle.tsx

Lines changed: 17 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,33 @@
11
"use client";
22

3-
import * as React from "react";
4-
import { Moon, Sun } from "lucide-react";
53
import { useTheme } from "next-themes";
6-
import { Button } from "@/components/ui/button";
4+
import { useState, useEffect } from "react";
5+
import { Sun, Moon } from "lucide-react";
76

87
export function ThemeToggle() {
9-
const { setTheme, resolvedTheme } = useTheme();
10-
const [mounted, setMounted] = React.useState(false);
8+
const { theme, setTheme } = useTheme();
9+
const [mounted, setMounted] = useState(false);
1110

12-
React.useEffect(() => {
11+
// Avoid hydration mismatch by only rendering after component is mounted
12+
useEffect(() => {
1313
setMounted(true);
1414
}, []);
1515

16-
React.useEffect(() => {
17-
if (!resolvedTheme) {
18-
setTheme("dark");
19-
}
20-
}, [resolvedTheme, setTheme]);
21-
22-
if (!mounted || !resolvedTheme) {
16+
if (!mounted) {
2317
return null;
2418
}
2519

2620
return (
27-
<Button
28-
variant="ghost"
29-
size="icon"
30-
onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
31-
className="relative h-9 w-9 rounded-full"
21+
<button
22+
onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
23+
className="p-2 rounded-md bg-transparent border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
24+
aria-label="Toggle theme"
3225
>
33-
<div className="relative h-full w-full">
34-
<Sun
35-
className={`absolute inset-0 h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0 m-auto`}
36-
/>
37-
<Moon
38-
className={`absolute inset-0 h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100 m-auto`}
39-
/>
40-
<span className="sr-only">Toggle theme</span>
41-
</div>
42-
</Button>
26+
{theme === "dark" ? (
27+
<Sun className="h-5 w-5 text-yellow-300" />
28+
) : (
29+
<Moon className="h-5 w-5 text-blue-700" />
30+
)}
31+
</button>
4332
);
4433
}

0 commit comments

Comments
 (0)