diff --git a/src/admin/AdminAppMenu.tsx b/src/admin/AdminAppMenu.tsx
index 8a19e63d..201b77c4 100644
--- a/src/admin/AdminAppMenu.tsx
+++ b/src/admin/AdminAppMenu.tsx
@@ -34,10 +34,14 @@ import MoreMenuItem from '@/components/more/MoreMenuItem';
export default function AdminAppMenu({
active,
animateMenuClose,
+ isOpen,
+ setIsOpen,
className,
}: {
active?: boolean
animateMenuClose?: boolean
+ isOpen?: boolean
+ setIsOpen?: (isOpen: boolean) => void
className?: string
}) {
const {
@@ -80,7 +84,7 @@ export default function AdminAppMenu({
annotation: `${uploadsCount}`,
icon: ,
href: PATH_ADMIN_UPLOADS,
});
@@ -93,13 +97,13 @@ export default function AdminAppMenu({
{photosCountNeedSync}
>,
icon: ,
href: PATH_ADMIN_PHOTOS_UPDATES,
});
@@ -112,7 +116,7 @@ export default function AdminAppMenu({
},
icon: ,
href: PATH_ADMIN_PHOTOS,
});
@@ -123,7 +127,7 @@ export default function AdminAppMenu({
annotation: `${tagsCount}`,
icon: ,
href: PATH_ADMIN_TAGS,
});
@@ -134,7 +138,7 @@ export default function AdminAppMenu({
annotation: `${recipesCount}`,
icon: ,
href: PATH_ADMIN_RECIPES,
});
@@ -147,7 +151,7 @@ export default function AdminAppMenu({
icon: isSelecting
?
: ,
href: showAppInsightsLink
? PATH_ADMIN_INSIGHTS
@@ -189,6 +193,7 @@ export default function AdminAppMenu({
return (
{!hasAdminData && isLoadingAdminData
@@ -226,7 +231,7 @@ export default function AdminAppMenu({
'border-medium',
className,
)}
- buttonClassName={clsx(
+ classNameButton={clsx(
'p-0!',
'w-full h-full',
'flex items-center justify-center',
@@ -237,7 +242,7 @@ export default function AdminAppMenu({
? 'text-black dark:text-white'
: 'text-gray-400 dark:text-gray-600',
)}
- buttonClassNameOpen={clsx(
+ classNameButtonOpen={clsx(
'bg-dim text-main!',
'[&>*>*]:translate-y-[6px]',
!animateMenuClose && '[&>*>*]:duration-300',
diff --git a/src/admin/AdminPhotoMenu.tsx b/src/admin/AdminPhotoMenu.tsx
index 3d3b7822..feeead60 100644
--- a/src/admin/AdminPhotoMenu.tsx
+++ b/src/admin/AdminPhotoMenu.tsx
@@ -48,7 +48,7 @@ export default function AdminPhotoMenu({
label: 'Edit',
icon: ,
href: pathForAdminPhotoEdit(photo.id),
}];
@@ -57,7 +57,7 @@ export default function AdminPhotoMenu({
label: isFav ? 'Unfavorite' : 'Favorite',
icon: ,
action: () => toggleFavoritePhotoAction(
@@ -70,7 +70,7 @@ export default function AdminPhotoMenu({
label: 'Download',
icon: ,
href: photo.url,
hrefDownloadName: downloadFileNameForPhoto(photo),
@@ -86,7 +86,9 @@ export default function AdminPhotoMenu({
size="small"
/>}
,
- icon: ,
+ icon: ,
action: () => syncPhotoAction(photo.id)
.then(() => revalidatePhoto?.(photo.id)),
});
diff --git a/src/app/ViewSwitcher.tsx b/src/app/ViewSwitcher.tsx
index 1d8db547..052c0225 100644
--- a/src/app/ViewSwitcher.tsx
+++ b/src/app/ViewSwitcher.tsx
@@ -12,6 +12,7 @@ import { GRID_HOMEPAGE_ENABLED } from './config';
import AdminAppMenu from '@/admin/AdminAppMenu';
import Spinner from '@/components/Spinner';
import clsx from 'clsx/lite';
+import { useState } from 'react';
export type SwitcherSelection = 'feed' | 'grid' | 'admin';
@@ -28,6 +29,8 @@ export default function ViewSwitcher({
setIsCommandKOpen,
} = useAppState();
+ const [isAdminMenuOpen, setIsAdminMenuOpen] = useState(false);
+
const renderItemFeed =
}
@@ -70,9 +73,12 @@ export default function ViewSwitcher({
/>}
{isUserSignedIn &&
}
- noPadding
+ icon={}
tooltip={{ content: 'Admin Menu' }}
+ noPadding
/>}
diff --git a/src/components/SwitcherItem.tsx b/src/components/SwitcherItem.tsx
index 3770cadc..702a4c51 100644
--- a/src/components/SwitcherItem.tsx
+++ b/src/components/SwitcherItem.tsx
@@ -30,8 +30,7 @@ export default function SwitcherItem({
}) {
const className = clsx(
'flex items-center justify-center',
- 'w-[42px] h-full',
- 'py-0.5 px-1.5',
+ 'w-[42px] h-[28px]',
isInteractive && 'cursor-pointer',
isInteractive && 'hover:bg-gray-100/60 active:bg-gray-100',
isInteractive && 'dark:hover:bg-gray-900/75 dark:active:bg-gray-900',
@@ -68,7 +67,10 @@ export default function SwitcherItem({
return (
tooltip
- ?
+ ?
{content}
: content
diff --git a/src/components/more/MoreMenu.tsx b/src/components/more/MoreMenu.tsx
index 0afded48..4cb4c4f9 100644
--- a/src/components/more/MoreMenu.tsx
+++ b/src/components/more/MoreMenu.tsx
@@ -15,12 +15,14 @@ export default function MoreMenu({
icon,
header,
className,
- buttonClassName,
- buttonClassNameOpen,
+ classNameButton,
+ classNameButtonOpen,
ariaLabel,
align = 'end',
// Prevent errant clicks from trigger being too close to menu
sideOffset = 6,
+ isOpen: isOpenProp,
+ setIsOpen: setIsOpenProp,
onOpen,
...props
}: {
@@ -28,12 +30,17 @@ export default function MoreMenu({
icon?: ReactNode
header?: ReactNode
className?: string
- buttonClassName?: string
- buttonClassNameOpen?: string
+ classNameButton?: string
+ classNameButtonOpen?: string
ariaLabel: string
+ isOpen?: boolean
+ setIsOpen?: (isOpen: boolean) => void
onOpen?: () => void
} & ComponentProps){
- const [isOpen, setIsOpen] = useState(false);
+ const [isOpenInternal, setIsOpenInternal] = useState(isOpenProp ?? false);
+
+ const isOpen = isOpenProp ?? isOpenInternal;
+ const setIsOpen = setIsOpenProp ?? setIsOpenInternal;
const dismissMenu = useCallback(() => {
setIsOpen(false);
@@ -44,7 +51,10 @@ export default function MoreMenu({
}, [isOpen, onOpen]);
return (
-
+