feat: add user dropdown in navbar

adonisrc.ts

@@ -10,7 +10,10 @@ export default defineConfig({
   | will be scanned automatically from the "./commands" directory.
   |
   */
-  commands: [() => import('@adonisjs/core/commands'), () => import('@adonisjs/lucid/commands')],
+  commands: [
+    () => import('@adonisjs/core/commands'),
+    () => import('@adonisjs/lucid/commands'),
+  ],
 
   /*
   |--------------------------------------------------------------------------

config/inertia.ts

@@ -12,7 +12,7 @@ export default defineConfig({
    */
   sharedData: {
     errors: (ctx) => ctx.session?.flashMessages.get('errors'),
-    preferDarkTheme: (ctx) => ctx.session.get(PREFER_DARK_THEME, true),
+    preferDarkTheme: (ctx) => ctx.session?.get(PREFER_DARK_THEME, true),
     auth: async (ctx) => {
       await ctx.auth?.check();
       return {

inertia/components/common/dropdown/dropdown_item.tsx

@@ -1,16 +1,19 @@
 import styled from '@emotion/styled';
 import { Link } from '@inertiajs/react';
 
-const DropdownItemBase = styled.div(({ theme }) => ({
+const DropdownItemBase = styled.div<{ danger?: boolean }>(
-  fontSize: '14px',
+  ({ theme, danger }) => ({
-  whiteSpace: 'nowrap',
+    fontSize: '14px',
-  padding: '8px 12px',
+    whiteSpace: 'nowrap',
-  borderRadius: theme.border.radius,
+    color: danger ? theme.colors.lightRed : theme.colors.primary,
+    padding: '8px 12px',
+    borderRadius: theme.border.radius,
 
-  '&:hover': {
+    '&:hover': {
-    backgroundColor: theme.colors.background,
+      backgroundColor: theme.colors.background,
-  },
+    },
-}));
+  })
+);
 
 const DropdownItemButton = styled(DropdownItemBase)({
   display: 'flex',

inertia/components/dashboard/collection/collection_controls.tsx

@@ -1,5 +1,4 @@
 import PATHS from '#constants/paths';
-import styled from '@emotion/styled';
 import { BsThreeDotsVertical } from 'react-icons/bs';
 import { HiOutlinePencil } from 'react-icons/hi2';
 import { IoIosAddCircleOutline } from 'react-icons/io';
@@ -7,10 +6,6 @@ import { IoTrashOutline } from 'react-icons/io5';
 import Dropdown from '~/components/common/dropdown/dropdown';
 import { DropdownItemLink } from '~/components/common/dropdown/dropdown_item';
 
-const DeleteItem = styled(DropdownItemLink)(({ theme }) => ({
-  color: theme.colors.lightRed,
-}));
-
 const CollectionControls = () => (
   <Dropdown label={<BsThreeDotsVertical />}>
     <DropdownItemLink href={PATHS.LINK.CREATE}>
@@ -19,9 +14,9 @@ const CollectionControls = () => (
     <DropdownItemLink href={PATHS.COLLECTION.EDIT}>
       <HiOutlinePencil /> Edit
     </DropdownItemLink>
-    <DeleteItem href={PATHS.COLLECTION.REMOVE}>
+    <DropdownItemLink href={PATHS.COLLECTION.REMOVE} danger>
       <IoTrashOutline /> Delete
-    </DeleteItem>
+    </DropdownItemLink>
   </Dropdown>
 );
 

inertia/components/dashboard/link_list/link_controls.tsx

@@ -20,10 +20,6 @@ const StartItem = styled(DropdownItemButton)(({ theme }) => ({
   color: theme.colors.yellow,
 }));
 
-const DeleteItem = styled(DropdownItemLink)(({ theme }) => ({
-  color: theme.colors.lightRed,
-}));
-
 export default function LinkControls({ link }: { link: Link }) {
   const theme = useTheme();
   const { collections, setCollections } = useCollections();
@@ -87,11 +83,12 @@ export default function LinkControls({ link }: { link: Link }) {
       >
         <HiOutlinePencil /> Edit
       </DropdownItemLink>
-      <DeleteItem
+      <DropdownItemLink
         href={appendCollectionId(PATHS.LINK.REMOVE, link.collectionId)}
+        danger
       >
         <IoTrashOutline /> Delete
-      </DeleteItem>
+      </DropdownItemLink>
     </Dropdown>
   );
 }

inertia/components/navbar/navbar.tsx

@@ -1,5 +1,8 @@
 import styled from '@emotion/styled';
 import { Link } from '@inertiajs/react';
+import { IoIosLogOut } from 'react-icons/io';
+import Dropdown from '~/components/common/dropdown/dropdown';
+import { 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';
@@ -25,10 +28,16 @@ const NavList = styled(UnstyledList)<NavbarListDirection>(
     gap: '1.5em',
     justifyContent: right ? 'flex-end' : 'flex-start',
     transition: theme.transition.delay,
+
+    '& li': {
+      display: 'flex',
+      alignItems: 'center',
+    },
   })
 );
 
 const UserCard = styled.div({
+  padding: '0.25em 0.5em',
   display: 'flex',
   gap: '0.35em',
   alignItems: 'center',
@@ -64,16 +73,22 @@ export default function Navbar() {
               <Link href={PATHS.DASHBOARD}>Dashboard</Link>
             </li>
             <li>
-              <a href={PATHS.AUTH.LOGOUT}>
+              <Dropdown
-                <UserCard>
+                label={
-                  <RoundedImage
+                  <UserCard>
-                    src={user.avatarUrl}
+                    <RoundedImage
-                    width={22}
+                      src={user.avatarUrl}
-                    referrerPolicy="no-referrer"
+                      width={22}
-                  />
+                      referrerPolicy="no-referrer"
-                  {user.nickName}
+                    />
-                </UserCard>
+                    {user.nickName}
-              </a>
+                  </UserCard>
+                }
+              >
+                <DropdownItemLink href={PATHS.AUTH.LOGOUT} danger>
+                  <IoIosLogOut /> Logout
+                </DropdownItemLink>
+              </Dropdown>
             </li>
           </>
         ) : (