improved Navbar

my-appwrite-login-page/src/components/Navbar.js

@@ -3,7 +3,7 @@ import { useTheme } from "@/components/ThemeProvider";
 import { account } from "@/lib/appwrite";
 
 export default function Navbar() {
-  const { darkMode } = useTheme();
+  const { darkMode, toggleDarkMode } = useTheme();
 
   const handleLogout = async () => {
     await account.deleteSession("current");
@@ -13,22 +13,36 @@ export default function Navbar() {
   return (
     <nav className={`
       flex justify-between items-center p-4
-      ${darkMode ? 'bg-white-200' : 'bg-gray-200'}
+      ${darkMode ? 'bg-gray-800' : 'bg-gray-200'}
+      ${darkMode ? 'text-white' : 'text-black'}
     `}>
-      <h1 className={`text-lg font-bold ${darkMode ? 'text-black' : 'text-black'}`}>
-        Navbar
-      </h1>
+      <h1 className="text-lg font-bold">Navbar</h1>
       
-      <button
-        onClick={handleLogout}
-        className={`
-          px-4 py-2 rounded
-          ${darkMode ? 'bg-red-700' : 'bg-red-500'}
-          text-white
-        `}
-      >
-        Logout
-      </button>
+      <div className="flex items-center gap-4">
+        {/* Dark Mode Toggle Button */}
+        <button
+          onClick={toggleDarkMode}
+          className={`
+            p-2 rounded-full
+            ${darkMode ? 'bg-gray-700' : 'bg-gray-300'}
+            ${darkMode ? 'text-yellow-300' : 'text-gray-700'}
+          `}
+        >
+          {darkMode ? "☀️" : "🌙"}
+        </button>
+        
+        {/* Logout Button */}
+        <button
+          onClick={handleLogout}
+          className={`
+            px-4 py-2 rounded
+            ${darkMode ? 'bg-red-700' : 'bg-red-500'}
+            text-white
+          `}
+        >
+          Logout
+        </button>
+      </div>
     </nav>
   );
 }

my-appwrite-login-page/src/components/sidebar.js

@@ -2,23 +2,15 @@
 import { useTheme } from "../components/ThemeProvider";
 
 export default function Sidebar() {
-  const { darkMode, toggleDarkMode } = useTheme();
+  const { darkMode } = useTheme();
 
   return (
-    <div className={`w-64 h-screen p-4 ${darkMode ? 'dark:bg-gray-800' : 'bg-gray-200'}`}>
-      <button
-        onClick={toggleDarkMode}
-        className={`p-2 rounded w-full ${
-          darkMode ? 'dark:bg-gray-700 dark:text-white' : 'bg-gray-300 text-black'
-        }`}
-      >
-        {darkMode ? "☀️ Switch to Light Mode" : "🌙 Switch to Dark Mode"}
-      </button>
-      
-      {/* Debug Info */}
-      <div className="mt-4 p-3 rounded bg-white dark:bg-gray-900">
-        <p>Current Mode: <strong>{darkMode ? "Dark" : "Light"}</strong></p>
-        <p>HTML Class: <strong>{darkMode ? "dark" : "light"}</strong></p>
+    <div className={`w-64 h-screen p-4 ${darkMode ? 'bg-gray-800' : 'bg-gray-200'}`}>
+      {/* Sidebar content - removed the toggle button */}
+      <div className={`mt-4 p-3 rounded ${darkMode ? 'bg-gray-700' : 'bg-white'}`}>
+        <p className={darkMode ? 'text-white' : 'text-black'}>
+          Current Mode: <strong>{darkMode ? "Dark" : "Light"}</strong>
+        </p>
       </div>
     </div>
   );