feat(nav, blog) new ThemeSwitcher, also several updates on ui

frontend/components/ThemeSwitcher.tsx

@@ -2,12 +2,34 @@
 
 import React, { useEffect, useState } from 'react';
 import { useTheme } from 'next-themes';
-import { Switch } from '@nextui-org/react';
-import { MdOutlineDarkMode, MdOutlineLightMode } from 'react-icons/md';
+import { Button, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger } from '@nextui-org/react';
+import { MdOutlineDarkMode, MdOutlineDesktopWindows, MdOutlineLightMode } from 'react-icons/md';
+import { useScreenSizeTrigger } from '@/app/public/screenSizeTrigger';
+
+const switcherElements = new Map(
+    [
+        [ 'dark', {
+            'display_name': 'Dark Mode',
+            'icon': <MdOutlineDarkMode />
+        } ],
+        [ 'light', {
+            'display_name': 'Light Mode',
+            'icon': <MdOutlineLightMode />
+        } ],
+        [ 'system', {
+            'display_name': 'Follow System',
+            'icon': <MdOutlineDesktopWindows />
+        } ]
+    ]
+);
 
 function ThemeSwitcher() {
     const [ mounted, setMounted ] = useState(false);
-    const { setTheme } = useTheme();
+    const { theme, setTheme } = useTheme();
+
+    const [ currTheme, setCurrTheme ] = useState(new Set([ theme as string ]));
+
+    const isMobile = useScreenSizeTrigger('lg');
 
     useEffect(() => {
         setMounted(true);
@@ -19,22 +41,51 @@ function ThemeSwitcher() {
 
     return (
         <div className={ `` }>
-            <div className={ `flex flex-row items-center` }>
-                <Switch
-                    color={ 'default' }
-                    aria-label={ `theme switch` }
-                    startContent={ <MdOutlineLightMode /> }
-                    endContent={ <MdOutlineDarkMode /> }
-                    onValueChange={ (isSelected) => {
-                        if (isSelected) {
-                            setTheme('light');
-                        } else {
-                            setTheme('dark');
-                        }
+            <Dropdown backdrop={ 'blur' }>
+                <DropdownTrigger>
+                    <Button
+                        variant={ 'flat' }
+                        aria-label={ 'Theme Trigger' }
+                        fullWidth
+                        isIconOnly={ isMobile }
+                    >
+                        { switcherElements.get(currTheme.values().next().value)?.icon }
+                        <p className={ 'hidden lg:block' }>
+                            { switcherElements.get(currTheme.values().next().value)?.display_name }
+                        </p>
+                    </Button>
+                </DropdownTrigger>
+
+                <DropdownMenu
+                    aria-label={ 'Toggle Theme' }
+                    variant={ 'flat' }
+                    selectionMode={ 'single' }
+                    selectedKeys={ currTheme }
+                    onSelectionChange={ ({ anchorKey }) => {
+                        setCurrTheme(new Set([ anchorKey as string ]));
+                        setTheme(anchorKey as string);
                     } }
-                ></Switch>
-                <p className={ `font-bold hidden lg:block` }>{ `Toggle Theme` }</p>
-            </div>
+
+                >
+                    <DropdownItem
+                        key={ 'light' }
+                        startContent={ <MdOutlineLightMode /> }>
+                        Light Mode
+                    </DropdownItem>
+                    <DropdownItem
+                        key={ 'dark' }
+                        startContent={ <MdOutlineDarkMode /> }
+                    >
+                        Dark Mode
+                    </DropdownItem>
+                    <DropdownItem
+                        key={ 'system' }
+                        startContent={ <MdOutlineDesktopWindows /> }
+                    >
+                        Follow System
+                    </DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
         </div>
     );
 }