feat: create basic settings modal

inertia/components/common/modal/_modal_wrapper.tsx

@@ -9,7 +9,7 @@ const ModalWrapper = styled.div(({ theme }) => ({
   height: '100%',
   width: '100%',
   background: rgba(theme.colors.black, 0.35),
-  backdropFilter: 'blur(0.25em)',
+  backdropFilter: 'blur(0.1em)',
   display: 'flex',
   alignItems: 'center',
   flexDirection: 'column',

inertia/components/dashboard/side_nav/side_navigation.tsx

@@ -5,8 +5,8 @@ import { IoAdd } from 'react-icons/io5';
 import { MdOutlineAdminPanelSettings } from 'react-icons/md';
 import FavoriteList from '~/components/dashboard/side_nav/favorite/favorite_list';
 import { Item, ItemLink } from '~/components/dashboard/side_nav/nav_item';
-import OpenSettingsButton from '~/components/dashboard/side_nav/open_settings';
 import UserCard from '~/components/dashboard/side_nav/user_card';
+import ModalSettings from '~/components/settings/modal';
 import useActiveCollection from '~/hooks/use_active_collection';
 import { appendCollectionId } from '~/lib/navigation';
 
@@ -21,6 +21,10 @@ const AdminButton = styled(Item)(({ theme }) => ({
   color: theme.colors.lightRed,
 }));
 
+const SettingsButton = styled(Item)(({ theme }) => ({
+  color: theme.colors.grey,
+}));
+
 const AddButton = styled(ItemLink)(({ theme }) => ({
   color: theme.colors.primary,
 }));
@@ -34,7 +38,7 @@ export default function SideNavigation() {
         <AdminButton>
           <MdOutlineAdminPanelSettings /> Administrator
         </AdminButton>
-        <OpenSettingsButton />
+        <ModalSettings openItem={SettingsButton} />
         <AddButton
           href={appendCollectionId(
             route('link.create-form').url,

inertia/components/navbar/navbar.tsx

@@ -3,11 +3,14 @@ import { Link } from '@inertiajs/react';
 import { route } from '@izzyjs/route/client';
 import { IoIosLogOut } from 'react-icons/io';
 import Dropdown from '~/components/common/dropdown/dropdown';
-import { DropdownItemLink } from '~/components/common/dropdown/dropdown_item';
+import {
+  DropdownItemButton,
+  DropdownItemLink,
+} from '~/components/common/dropdown/dropdown_item';
 import ExternalLink from '~/components/common/external_link';
 import RoundedImage from '~/components/common/rounded_image';
 import UnstyledList from '~/components/common/unstyled/unstyled_list';
-import useDarkTheme from '~/hooks/use_dark_theme';
+import ModalSettings from '~/components/settings/modal';
 import useUser from '~/hooks/use_user';
 import PATHS from '../../../app/constants/paths';
 
@@ -57,14 +60,6 @@ export default function Navbar() {
         </li>
       </NavList>
       <NavList right>
-        <li>
-          <select>
-            <option>EN</option>
-          </select>
-        </li>
-        <li>
-          <ThemeSwitch />
-        </li>
         <li>
           <ExternalLink href={PATHS.REPO_GITHUB}>GitHub</ExternalLink>
         </li>
@@ -74,22 +69,7 @@ export default function Navbar() {
               <Link href={route('dashboard').url}>Dashboard</Link>
             </li>
             <li>
-              <Dropdown
-                label={
-                  <UserCard>
-                    <RoundedImage
-                      src={user.avatarUrl}
-                      width={22}
-                      referrerPolicy="no-referrer"
-                    />
-                    {user.nickName}
-                  </UserCard>
-                }
-              >
-                <DropdownItemLink href={route('auth.logout').url} danger>
-                  <IoIosLogOut /> Logout
-                </DropdownItemLink>
-              </Dropdown>
+              <ProfileDropdown />
             </li>
           </>
         ) : (
@@ -102,13 +82,25 @@ export default function Navbar() {
   );
 }
 
-function ThemeSwitch() {
-  const { isDarkTheme, toggleDarkTheme } = useDarkTheme();
+function ProfileDropdown() {
+  const { user } = useUser();
   return (
-    <input
-      type="checkbox"
-      onChange={({ target }) => toggleDarkTheme(target.checked)}
-      checked={isDarkTheme}
-    />
+    <Dropdown
+      label={
+        <UserCard>
+          <RoundedImage
+            src={user!.avatarUrl}
+            width={22}
+            referrerPolicy="no-referrer"
+          />
+          {user!.nickName}
+        </UserCard>
+      }
+    >
+      <ModalSettings openItem={DropdownItemButton} />
+      <DropdownItemLink href={route('auth.logout').url} danger>
+        <IoIosLogOut /> Logout
+      </DropdownItemLink>
+    </Dropdown>
   );
 }

inertia/components/settings/modal.tsx

@@ -1,24 +1,29 @@
-import styled from '@emotion/styled';
 import { BsGear } from 'react-icons/bs';
 import Modal from '~/components/common/modal/modal';
-import { Item } from '~/components/dashboard/side_nav/nav_item';
+import ThemeSwitcher from '~/components/theme_switcher';
 import useToggle from '~/hooks/use_modal';
 
-const SettingsButton = styled(Item)(({ theme }) => ({
-  color: theme.colors.grey,
-}));
-
-export default function OpenSettingsButton() {
+export default function ModalSettings({
+  openItem: OpenItem,
+}: {
+  // TODO: fix this :()
+  openItem: any;
+}) {
   const { isShowing, open, close } = useToggle();
-
   return (
     <>
-      <SettingsButton onClick={open}>
+      <OpenItem onClick={open}>
         <BsGear />
         Settings
-      </SettingsButton>
+      </OpenItem>
       <Modal title="Settings" opened={isShowing} close={close}>
         Modal settings
+        <hr />
+        <select>
+          <option>EN</option>
+        </select>
+        <hr />
+        <ThemeSwitcher />
       </Modal>
     </>
   );

inertia/components/theme_switcher.tsx

@@ -0,0 +1,25 @@
+import { Fragment } from 'react';
+import Toggle from 'react-toggle';
+import 'react-toggle/style.css';
+import useDarkTheme from '~/hooks/use_dark_theme';
+
+export default function ThemeSwitcher() {
+  const { isDarkTheme, toggleDarkTheme } = useDarkTheme();
+
+  if (typeof window === 'undefined') {
+    return <Fragment />;
+  }
+
+  return (
+    <Toggle
+      onChange={({ target }) => toggleDarkTheme(target.checked)}
+      checked={isDarkTheme}
+      name="theme-switcher"
+      id="theme-switcher"
+      icons={{
+        checked: '☀️',
+        unchecked: '🌑',
+      }}
+    />
+  );
+}