feat: create settings modal

inertia/components/dashboard/side_nav/nav_item.tsx

@@ -2,6 +2,7 @@ import styled from '@emotion/styled';
 import { Link } from '@inertiajs/react';
 
 export const Item = styled.div(({ theme }) => ({
+  cursor: 'pointer',
   userSelect: 'none',
   height: '40px',
   width: '250px',

inertia/components/dashboard/side_nav/open_settings.tsx

@@ -0,0 +1,25 @@
+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 useToggle from '~/hooks/use_modal';
+
+const SettingsButton = styled(Item)(({ theme }) => ({
+  color: theme.colors.grey,
+}));
+
+export default function OpenSettingsButton() {
+  const { isShowing, open, close } = useToggle();
+
+  return (
+    <>
+      <SettingsButton onClick={open}>
+        <BsGear />
+        Settings
+      </SettingsButton>
+      <Modal title="Settings" opened={isShowing} close={close}>
+        Modal settings
+      </Modal>
+    </>
+  );
+}

inertia/components/dashboard/side_nav/side_navigation.tsx

@@ -1,11 +1,11 @@
 import styled from '@emotion/styled';
 import { route } from '@izzyjs/route/client';
 import { AiOutlineFolderAdd } from 'react-icons/ai';
-import { BsGear } from 'react-icons/bs';
 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 useActiveCollection from '~/hooks/use_active_collection';
 import { appendCollectionId } from '~/lib/navigation';
@@ -21,10 +21,6 @@ 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,
 }));
@@ -38,10 +34,7 @@ export default function SideNavigation() {
         <AdminButton>
           <MdOutlineAdminPanelSettings /> Administrator
         </AdminButton>
-        <SettingsButton>
-          <BsGear />
-          Settings
-        </SettingsButton>
+        <OpenSettingsButton />
         <AddButton
           href={appendCollectionId(
             route('link.create-form').url,