✨ Feature: Responive design for Mobile and UI fixes

app/dashboard/layout.tsx

@@ -1,23 +1,29 @@
-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 = {
   title: "LeetCode Journal",
   description: "Track your LeetCode progress and boost your coding skills",
 };
+
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   return (
-    <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 className="min-h-screen bg-neutral-50 dark:bg-neutral-900">
+      <div className="max-w-7xl mx-auto px-3 sm:px-4 md:px-6">
+        {/* Top navbar */}
+        <DashboardNavbar />
+
+        {/* Main content with minimal spacing */}
+        <div className="mt-2 sm:mt-3 md:mt-4">
+          <div className="rounded-lg overflow-hidden shadow-sm">
+            {children}
+          </div>
+        </div>
       </div>
-      <div className="w-full dark:bg-neutral-900 dark: text-white bg-neutral-200 md:rounded-xl rounded-sm">{children}</div>
-    </main>
+    </div>
   );
 }

app/not-found.tsx

@@ -15,7 +15,6 @@ export default function NotFound() {
                 <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>
               </span>
             </span>
-            .
           </p>
           <Link href="/" className="text-blue-500 hover:text-blue-700 underline">
             Return to Home

components/DashboardV2/V2Navbar.tsx

@@ -38,10 +38,10 @@ interface FeatureProps {
 }
 
 const routeList: RouteProps[] = [
-  {
-    href: "#testimonials",
-    label: "Testimonials",
-  },
+  // {
+  //   href: "#testimonials",
+  //   label: "Testimonials",
+  // },
   {
     href: "#team",
     label: "Team",
@@ -97,12 +97,14 @@ export const NavigationContent  = () => {
       </Button>
     ) : (
       <>
-        <Link href="/auth/register">
-          <Button className="rounded-2xl">Register</Button>
-        </Link>
-        <Link href="/auth/signin">
-          <Button className="rounded-2xl">Login</Button>
-        </Link>
+        <div className="justify-between flex gap-2">
+          <Link href="/auth/register">
+            <Button className="rounded-xl">Register</Button>
+          </Link>
+          <Link href="/auth/signin">
+            <Button className="rounded-xl">Login</Button>
+          </Link>
+        </div>
       </>
     );
   };
@@ -117,6 +119,7 @@ export const NavigationContent  = () => {
         </Avatar>
         Leetcode Journal
       </Link>
+
       {/* <!-- Mobile --> */}
       <div className="flex items-center lg:hidden">
         <Sheet open={isOpen} onOpenChange={setIsOpen}>
@@ -139,13 +142,13 @@ export const NavigationContent  = () => {
                       <AvatarImage src="/logo.png" />
                       <AvatarFallback>LC</AvatarFallback>
                     </Avatar>
-                    Leetcode Journal
+                    <p className="text-sm">Leetcode Journal</p>
                   </Link>
                 </SheetTitle>
               </SheetHeader>
 
               <div className="flex flex-col gap-2">
-                {routeList.map(({ href, label }) => (
+                {/* {routeList.map(({ href, label }) => (
                   <Button
                     key={href}
                     onClick={() => setIsOpen(false)}
@@ -155,16 +158,17 @@ export const NavigationContent  = () => {
                   >
                     <Link href={href}>{label}</Link>
                   </Button>
-                ))}
+                ))} */}
+                {renderAuthButtons()}
               </div>
             </div>
 
             <SheetFooter className="flex-col sm:flex-col justify-start items-start">
               <Separator className="mb-2" />
 
-              <ToggleTheme />
+              {/* <ToggleTheme />
               <Separator className="mb-2" />
-              {renderAuthButtons()}
+              {renderAuthButtons()} */}
             </SheetFooter>
           </SheetContent>
         </Sheet>

components/HintCard.tsx

@@ -16,7 +16,7 @@ export function HintCard({ hints }: { hints: string[] }) {
   return (
     <AlertDialog>
       <AlertDialogTrigger asChild className="w-36rem rounded-none">
-        <Button className="py-2 text-black hover:bg-purple-700 bg-white hover:text-white" variant="outline">Hints</Button>
+        <Button className="text-black hover:bg-purple-700 bg-white hover:text-white" variant="outline">Hints</Button>
       </AlertDialogTrigger>
       <AlertDialogContent className="max-w-36rem backdrop-blur bg-opacity-100 border border-gray-100 text-white">
         <AlertDialogHeader>

components/dashboardComponents/DashboardNavbar.tsx

@@ -20,7 +20,7 @@ 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">
+    <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" />
@@ -39,50 +39,47 @@ export const DashboardNavbar = () => {
             />
           </SheetTrigger>
 
-          <SheetContent
+            <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>
+              <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 className="flex flex-col gap-2 px-2 md:px-4">
+              {SidebarData.map(({ href, title }) => (
+                <Button
+                key={href}
+                onClick={() => setIsOpen(false)}
+                asChild
+                variant="ghost"
+                className="justify-start text-base w-full md:w-auto"
+                >
+                <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>
+            <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">
+                <ToggleTheme />
+                <Logout variant="destructive" />
+              </div>
+            </SheetContent>
         </Sheet>
       </div>
-                
+
       {/* <!-- Desktop --> */}
-      <div className="flex gap-2">
+      <div className="hidden lg:flex gap-2">
         {SidebarData.map(({ href, title }) => (
           <Button
             key={href}
@@ -96,9 +93,9 @@ export const DashboardNavbar = () => {
         ))}
       </div>
       <div className="hidden lg:flex gap-2">
-          <ToggleTheme />
-          <Logout />
-        </div>
+        <ToggleTheme />
+        <Logout />
+      </div>
     </header>
   );
 };

components/theme-provider.tsx

@@ -1,9 +1,8 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { ThemeProvider as NextThemesProvider } from "next-themes"
-import { type ThemeProviderProps } from "next-themes"
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { type ThemeProviderProps } from "next-themes";
 
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
-  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
 }

components/theme-toggle.tsx

@@ -1,44 +1,33 @@
 "use client";
 
-import * as React from "react";
-import { Moon, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
-import { Button } from "@/components/ui/button";
+import { useState, useEffect } from "react";
+import { Sun, Moon } from "lucide-react";
 
 export function ThemeToggle() {
-  const { setTheme, resolvedTheme } = useTheme();
-  const [mounted, setMounted] = React.useState(false);
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
 
-  React.useEffect(() => {
+  // Avoid hydration mismatch by only rendering after component is mounted
+  useEffect(() => {
     setMounted(true);
   }, []);
 
-  React.useEffect(() => {
-    if (!resolvedTheme) {
-      setTheme("dark");
-    }
-  }, [resolvedTheme, setTheme]);
-
-  if (!mounted || !resolvedTheme) {
+  if (!mounted) {
     return null;
   }
 
   return (
-    <Button
-      variant="ghost"
-      size="icon"
-      onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
-      className="relative h-9 w-9 rounded-full"
+    <button
+      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+      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"
+      aria-label="Toggle theme"
     >
-      <div className="relative h-full w-full">
-        <Sun
-          className={`absolute inset-0 h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0 m-auto`}
-        />
-        <Moon
-          className={`absolute inset-0 h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100 m-auto`}
-        />
-        <span className="sr-only">Toggle theme</span>
-      </div>
-    </Button>
+      {theme === "dark" ? (
+        <Sun className="h-5 w-5 text-yellow-300" />
+      ) : (
+        <Moon className="h-5 w-5 text-blue-700" />
+      )}
+    </button>
   );
 }