Disable selection depending on theme & adj footer

src/components/Footer.tsx

@@ -94,7 +94,9 @@ const Footer = () => (
           <div>
             <p className="text-[#aaa]">
               Registrikood:{" "}
-              <span className="font-semibold text-white">80391807</span>
+              <span className="font-semibold text-[#007CAB] dark:text-[#00A3E0]">
+                80391807
+              </span>
             </p>
             <p className="text-[#aaa]">
               ICO-210, Raja tn 4c, Tallinn, Harjumaa, 12616

src/components/Header.tsx

@@ -1,57 +1,86 @@
-'use client';
+"use client";
 
 // Icons
-import { MdClose, MdMenu, MdSunny, MdModeNight } from "react-icons/md";
+import {
+  MdClose,
+  MdMenu,
+  MdSunny,
+  MdModeNight,
+  MdComputer,
+} from "react-icons/md";
 
 // Theme Provider
-import { useTheme } from "next-themes"
+import { useTheme } from "next-themes";
 
 // Shadcn UI
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+} from "@/components/ui/dropdown-menu";
 
 // Fonts
 // import { vipnagorgialla } from "@/components/Vipnagorgialla";
 
-const Header = ({ isOpen, toggleSidebar }: { isOpen: boolean; toggleSidebar: () => void }) => {
+const Header = ({
-    const { setTheme } = useTheme();
+  isOpen,
+  toggleSidebar,
+}: {
+  isOpen: boolean;
+  toggleSidebar: () => void;
+}) => {
+  const { theme, setTheme } = useTheme();
 
-    return (
+  return (
-        <header className="px-8 py-2 md:px-12 flex items-center bg-[#EEE5E5] dark:bg-[#0E0F19] border-b-3 border-[#1F5673] justify-between text-[#2A2C3F] dark:text-[#EEE5E5]">
+    <header className="px-8 py-2 md:px-12 flex items-center bg-[#EEE5E5] dark:bg-[#0E0F19] border-b-3 border-[#1F5673] justify-between text-[#2A2C3F] dark:text-[#EEE5E5]">
-            <button onClick={toggleSidebar}>
+      <button onClick={toggleSidebar}>
-                {isOpen ? (
+        {isOpen ? (
-                    <MdClose className="h-12 w-12 text-[#2A2C3F] dark:text-[#EEE5E5] cursor-pointer" />
+          <MdClose className="h-12 w-12 text-[#2A2C3F] dark:text-[#EEE5E5] cursor-pointer" />
-                ) : (
+        ) : (
-                    <MdMenu className="h-12 w-12 text-[#2A2C3F] dark:text-[#EEE5E5] cursor-pointer" />
+          <MdMenu className="h-12 w-12 text-[#2A2C3F] dark:text-[#EEE5E5] cursor-pointer" />
-                )}
+        )}
-            </button>
+      </button>
-            <DropdownMenu>
+      <DropdownMenu>
-                <DropdownMenuTrigger asChild>
+        <DropdownMenuTrigger asChild>
-                    <Button variant="ghost" size="icon">
+          <Button variant="ghost" size="icon">
-                        <MdSunny className="scale-150 text-[#2A2C3F] dark:hidden"/>
+            <MdSunny className="scale-150 text-[#2A2C3F] dark:hidden" />
-                        <MdModeNight className="scale-150 dark:text-[#EEE5E5] not-dark:hidden"/>
+            <MdModeNight className="scale-150 dark:text-[#EEE5E5] not-dark:hidden" />
-                        <span className="sr-only">Toggle theme</span>
+            <span className="sr-only">Toggle theme</span>
-                    </Button>
+          </Button>
-                </DropdownMenuTrigger>
+        </DropdownMenuTrigger>
-                <DropdownMenuContent align="end" className="w-48 translate-y-4">
+        <DropdownMenuContent align="end" className="w-48 translate-y-4">
-                    <DropdownMenuItem className="text-xl" onClick={() => setTheme('light')}>
+          <DropdownMenuItem
-                        Light
+            className={`text-lg ${theme === "light" ? "bg-accent/50 font-medium" : ""}`}
-                    </DropdownMenuItem>
+            onClick={() => setTheme("light")}
-                    <DropdownMenuItem className="text-xl" onClick={() => setTheme('dark')}>
+            disabled={theme === "light"}
-                        Dark
+          >
-                    </DropdownMenuItem>
+            <MdSunny className={theme === "light" ? "text-amber-500" : ""} />
-                    <DropdownMenuItem className="text-xl" onClick={() => setTheme('system')}>
+            <span>Hele</span>
-                        System
+          </DropdownMenuItem>
-                    </DropdownMenuItem>
+          <DropdownMenuItem
-                </DropdownMenuContent>
+            className={`text-lg ${theme === "dark" ? "bg-accent/50 font-medium" : ""}`}
-            </DropdownMenu>
+            onClick={() => setTheme("dark")}
-        </header>
+            disabled={theme === "dark"}
-    );
+          >
+            <MdModeNight className={theme === "dark" ? "text-blue-500" : ""} />
+            <span>Tume</span>
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            className={`text-lg ${theme === "system" ? "bg-accent/50 font-medium" : ""}`}
+            onClick={() => setTheme("system")}
+            disabled={theme === "system"}
+          >
+            <MdComputer
+              className={theme === "system" ? "text-green-500" : ""}
+            />
+            <span>Süsteemipõhine</span>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </header>
+  );
 };
 
 export default Header;