From 529b928e07a1cfa5abfb1cc87a5745f19a247784 Mon Sep 17 00:00:00 2001 From: Atul Gunjal Date: Sat, 24 May 2025 11:33:31 +0530 Subject: [PATCH] Dark mode applied --- src/app/components/Navbar.js | 52 +++++++++------- src/app/components/Sidebar.js | 103 ++++++++++++++++++++------------ src/app/context/ThemeContext.js | 40 +++++++++++++ src/app/globals.css | 3 +- src/app/layout.js | 35 +++++++---- 5 files changed, 162 insertions(+), 71 deletions(-) create mode 100644 src/app/context/ThemeContext.js diff --git a/src/app/components/Navbar.js b/src/app/components/Navbar.js index 4ee4000..4eaefed 100644 --- a/src/app/components/Navbar.js +++ b/src/app/components/Navbar.js @@ -1,9 +1,10 @@ "use client"; import { useState, useEffect, useRef } from "react"; -import { client,account } from "../lib/appwrite"; +import { account } from "../lib/appwrite"; +import { useTheme } from "../context/ThemeContext"; - -const Sidebar = () => { +const Navbar = () => { +const { darkMode, toggleDarkMode } = useTheme(); const dropdownRef = useRef(null); const [isMenuOpen, setMenuOpen] = useState(false); const inputRef = useRef(null); @@ -71,9 +72,10 @@ useEffect(() => { return () => document.removeEventListener("mousedown", handleClickOutside); }, []); } - // ---------------------------------------------- - return ( -
+ + + return ( +
{/* Left side - Menu Button */}
@@ -160,41 +162,47 @@ useEffect(() => { {/* Right side - Icons and User */}
+ )} + + + - {showFormsSubmenu && ( -
    -
  • - - Basic Form - -
    • -
- )} -
+ register employee + register employee + + {/* --------------register employee--------- */} + + temporary + temporary + + {/* ----------------------- */}
diff --git a/src/app/context/ThemeContext.js b/src/app/context/ThemeContext.js new file mode 100644 index 0000000..ab90bc0 --- /dev/null +++ b/src/app/context/ThemeContext.js @@ -0,0 +1,40 @@ +// context/ThemeContext.js +"use client"; + +import { createContext, useContext, useEffect, useState } from "react"; + +const ThemeContext = createContext(); + +export function ThemeProvider({ children }) { + const [darkMode, setDarkMode] = useState(false); + + useEffect(() => { + // Check for saved theme in localStorage + const savedTheme = localStorage.getItem("theme"); + const initialDarkMode = savedTheme === "dark" || + (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches); + setDarkMode(initialDarkMode); + document.documentElement.classList.toggle("dark", initialDarkMode); + }, []); + + const toggleDarkMode = () => { + const newDarkMode = !darkMode; + setDarkMode(newDarkMode); + localStorage.setItem("theme", newDarkMode ? "dark" : "light"); + document.documentElement.classList.toggle("dark", newDarkMode); + }; + + return ( + + {children} + + ); +} + +export function useTheme() { + const context = useContext(ThemeContext); + if (!context) { + throw new Error("useTheme must be used within a ThemeProvider"); + } + return context; +} \ No newline at end of file diff --git a/src/app/globals.css b/src/app/globals.css index a461c50..3d552a6 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1 +1,2 @@ -@import "tailwindcss"; \ No newline at end of file +@import "tailwindcss"; + diff --git a/src/app/layout.js b/src/app/layout.js index 0e69e48..44f030f 100644 --- a/src/app/layout.js +++ b/src/app/layout.js @@ -1,23 +1,38 @@ -// app/layout.js or app/page.js if that's where RootLayout is "use client"; import "./globals.css"; +import { usePathname } from "next/navigation"; import Navbar from "./components/Navbar"; import Sidebar from "./components/Sidebar"; -import { AuthProvider } from "./context/AuthContext"; // adjust path if needed - +import { AuthProvider } from "./context/AuthContext"; +import { ThemeProvider } from "./context/ThemeContext"; export default function RootLayout({ children }) { + const pathname = usePathname(); + const isAuthPage = pathname === '/' || pathname.startsWith('/login'); + return ( - + + Employee Portal + + + + - -
- -
{children}
-
+ {!isAuthPage ? ( + <> + +
+ +
{children}
+
+ + ) : ( + children + )} + ); -} +} \ No newline at end of file