feat: add dropdown for links and collection header

inertia/components/common/dropdown/dropdown.tsx

@@ -32,9 +32,11 @@ const DropdownStyle = styled.div<{ opened: boolean }>(({ opened, theme }) => ({
 export default function Dropdown({
   children,
   label,
+  className,
 }: {
   children: ReactNode;
   label: ReactNode | string;
+  className?: string;
 }) {
   const dropdownRef = useRef<HTMLDivElement>(null);
   const { isShowing, toggle, close } = useToggle();
@@ -48,7 +50,12 @@ export default function Dropdown({
   });
 
   return (
-    <DropdownStyle opened={isShowing} onClick={toggle} ref={dropdownRef}>
+    <DropdownStyle
+      opened={isShowing}
+      onClick={toggle}
+      ref={dropdownRef}
+      className={className}
+    >
       <DropdownLabel>{label}</DropdownLabel>
       <DropdownContainer show={isShowing}>{children}</DropdownContainer>
     </DropdownStyle>

inertia/components/common/dropdown/dropdown_container.tsx

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 
 const DropdownContainer = styled.div<{ show: boolean }>(({ show, theme }) => ({
+  zIndex: 99,
   position: 'absolute',
   top: 'calc(100% + 0.5em)',
   right: 0,

inertia/components/common/dropdown/dropdown_item.tsx

@@ -1,11 +1,10 @@
 import styled from '@emotion/styled';
+import { Link } from '@inertiajs/react';
 
-const DropdownItem = styled.div(({ theme }) => ({
+const DropdownItemBase = styled.div(({ theme }) => ({
   fontSize: '14px',
+  whiteSpace: 'nowrap',
   padding: '8px 12px',
-  display: 'flex',
-  gap: '0.35em',
-  alignItems: 'center',
   borderRadius: theme.border.radius,
 
   '&:hover': {
@@ -13,4 +12,17 @@ const DropdownItem = styled.div(({ theme }) => ({
   },
 }));
 
-export default DropdownItem;
+const DropdownItemButton = styled(DropdownItemBase)({
+  display: 'flex',
+  gap: '0.75em',
+  alignItems: 'center',
+});
+
+const DropdownItemLink = styled(DropdownItemBase.withComponent(Link))({
+  width: '100%',
+  display: 'flex',
+  gap: '0.75em',
+  alignItems: 'center',
+});
+
+export { DropdownItemButton, DropdownItemLink };