From c95766af5fd13c8639c4dcafb0abb095f1d9d139 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sat, 1 Mar 2025 00:14:03 -0600
Subject: [PATCH] Change admin menu animation

---
 src/admin/AdminAppMenu.tsx       | 20 +++++++++++++++-----
 src/components/SwitcherItem.tsx  |  5 ++++-
 src/components/more/MoreMenu.tsx |  2 +-
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/admin/AdminAppMenu.tsx b/src/admin/AdminAppMenu.tsx
index 4a865119..f18baf70 100644
--- a/src/admin/AdminAppMenu.tsx
+++ b/src/admin/AdminAppMenu.tsx
@@ -11,7 +11,7 @@ import {
 } from '@/app/paths';
 import { useAppState } from '@/state/AppState';
 import { ImCheckboxUnchecked } from 'react-icons/im';
-import { IoArrowUp, IoCloseSharp } from 'react-icons/io5';
+import { IoArrowDown, IoArrowUp, IoCloseSharp } from 'react-icons/io5';
 import { clsx } from 'clsx/lite';
 import { TbPhoto } from 'react-icons/tb';
 import { FiTag } from 'react-icons/fi';
@@ -138,7 +138,19 @@ export default function AdminAppMenu({
         <BiLockAlt size={17} className="inline-block w-5 mr-2" />
         <span className="grow">Admin menu</span>
       </div>}
-      icon={<IoArrowUp size={16} />}
+      icon={<div className={clsx(
+        'w-[28px] h-[28px]',
+        'overflow-hidden',
+      )}>
+        <div className={clsx(
+          'flex flex-col items-center justify-center gap-2',
+          'relative transition-transform duration-300',
+          'translate-y-[-18px]',
+        )}>
+          <IoArrowDown size={16} className="shrink-0" />
+          <IoArrowUp size={16} className="shrink-0" />
+        </div>
+      </div>}
       align="start"
       sideOffset={12}
       alignOffset={-85}
@@ -156,13 +168,11 @@ export default function AdminAppMenu({
         active
           ? 'text-black dark:text-white'
           : 'text-gray-400 dark:text-gray-600',
-        // Icon animation setup
-        '*:relative *:transition-transform *:duration-300',
       )}
       buttonClassNameOpen={clsx(
         'bg-dim',
         'text-main!',
-        '*:rotate-180',
+        '[&>*>*]:translate-y-[6px]',
       )}
       items={items}
       ariaLabel="Admin Menu"
diff --git a/src/components/SwitcherItem.tsx b/src/components/SwitcherItem.tsx
index 38eabe07..1f3ef7f6 100644
--- a/src/components/SwitcherItem.tsx
+++ b/src/components/SwitcherItem.tsx
@@ -43,7 +43,10 @@ export default function SwitcherItem({
 
   const renderIcon = () => noPadding
     ? icon
-    : <div className="w-[28px] h-[24px] flex items-center justify-center">
+    : <div className={clsx(
+      'w-[28px] h-[24px]',
+      'flex items-center justify-center',
+    )}>
       {icon}
     </div>;
 
diff --git a/src/components/more/MoreMenu.tsx b/src/components/more/MoreMenu.tsx
index e921e844..807e7267 100644
--- a/src/components/more/MoreMenu.tsx
+++ b/src/components/more/MoreMenu.tsx
@@ -46,7 +46,7 @@ export default function MoreMenu({
       <DropdownMenu.Trigger asChild>
         <button
           className={clsx(
-            'p-1 min-h-0 border-none shadow-none hover:outline-hidden',
+            'p-0 min-h-0 border-none shadow-none hover:outline-hidden',
             'hover:bg-gray-100 active:bg-gray-100',
             'dark:hover:bg-gray-800/75 dark:active:bg-gray-900',
             'text-dim',