harini

2026-05-26 19:26:33 +00:00 · 2025-07-25 23:58:20 +05:30
parent b70e81d201
commit 4d8061616d
112 changed files with 14445 additions and 59 deletions
@@ -0,0 +1,130 @@
+"use client"
+
+import Link from "next/link"
+import { AuthButtons } from "@/components/auth-buttons" // Renamed from MetaMaskConnect
+import { useAuth } from "@/context/auth-context"
+import { Button } from "@/components/ui/button"
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
+import { Menu, Sun, Moon } from "lucide-react"
+import { useTheme } from "next-themes"
+import { useState, useEffect } from "react"
+
+export function Navbar() {
+  const { user, firebaseUser, authMethod } = useAuth() // Use authMethod to determine display
+  const { theme, setTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  return (
+    <header className="sticky top-0 z-40 w-full border-b bg-white/80 backdrop-blur-md dark:bg-gray-950/80">
+      <div className="container flex h-16 items-center justify-between">
+        <Link href="/" className="text-2xl font-bold text-primary-purple">
+          OpenLearnX
+        </Link>
+        <nav className="hidden md:flex items-center space-x-6">
+          <Link
+            href="/"
+            className="text-sm font-medium text-gray-600 hover:text-primary-blue dark:text-gray-300 dark:hover:text-primary-blue"
+          >
+            Home
+          </Link>
+          <Link
+            href="/courses"
+            className="text-sm font-medium text-gray-600 hover:text-primary-blue dark:text-gray-300 dark:hover:text-primary-blue"
+          >
+            Courses
+          </Link>
+          <Link
+            href="/coding"
+            className="text-sm font-medium text-gray-600 hover:text-primary-blue dark:text-gray-300 dark:hover:text-primary-blue"
+          >
+            Coding Practice
+          </Link>
+          <Link
+            href="/quizzes"
+            className="text-sm font-medium text-gray-600 hover:text-primary-blue dark:text-gray-300 dark:hover:text-primary-blue"
+          >
+            Quizzes
+          </Link>
+          <Link
+            href="/dashboard"
+            className="text-sm font-medium text-gray-600 hover:text-primary-blue dark:text-gray-300 dark:hover:text-primary-blue"
+          >
+            Dashboard
+          </Link>
+          <AuthButtons /> {/* Use the new AuthButtons component */}
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+            className="ml-2"
+          >
+            {mounted && (theme === "dark" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />)}
+            {!mounted && <div className="h-5 w-5" />} {/* Render a placeholder div to maintain layout */}
+            <span className="sr-only">Toggle theme</span>
+          </Button>
+        </nav>
+        <div className="md:hidden flex items-center">
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+            className="mr-2"
+          >
+            {mounted && (theme === "dark" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />)}
+            {!mounted && <div className="h-5 w-5" />} {/* Render a placeholder div to maintain layout */}
+            <span className="sr-only">Toggle theme</span>
+          </Button>
+          <Sheet>
+            <SheetTrigger asChild>
+              <Button variant="outline" size="icon">
+                <Menu className="h-6 w-6" />
+                <span className="sr-only">Toggle navigation</span>
+              </Button>
+            </SheetTrigger>
+            <SheetContent side="right" className="w-[250px] sm:w-[300px] p-4 dark:bg-gray-900">
+              <nav className="flex flex-col gap-4">
+                <Link
+                  href="/"
+                  className="text-lg font-medium text-gray-800 hover:text-primary-blue dark:text-gray-200 dark:hover:text-primary-blue"
+                >
+                  Home
+                </Link>
+                <Link
+                  href="/courses"
+                  className="text-lg font-medium text-gray-800 hover:text-primary-blue dark:text-gray-200 dark:hover:text-primary-blue"
+                >
+                  Courses
+                </Link>
+                <Link
+                  href="/coding"
+                  className="text-lg font-medium text-gray-800 hover:text-primary-blue dark:text-gray-200 dark:hover:text-primary-blue"
+                >
+                  Coding Practice
+                </Link>
+                <Link
+                  href="/quizzes"
+                  className="text-lg font-medium text-gray-800 hover:text-primary-blue dark:text-gray-200 dark:hover:text-primary-blue"
+                >
+                  Quizzes
+                </Link>
+                <Link
+                  href="/dashboard"
+                  className="text-lg font-medium text-gray-800 hover:text-primary-blue dark:text-gray-200 dark:hover:text-primary-blue"
+                >
+                  Dashboard
+                </Link>
+                <div className="mt-4">
+                  <AuthButtons />
+                </div>
+              </nav>
+            </SheetContent>
+          </Sheet>
+        </div>
+      </div>
+    </header>
+  )
+}