feat: create 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,