refactor: change collapsible arrow direction when opening or closing …

…menu
hackerspace-ntnu · Oct 28, 2024 · fb846a8 · fb846a8
1 parent f660846
commit fb846a8
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 10 deletions.
diff --git a/src/app/[locale]/(default)/shift-schedule/page.tsx b/src/app/[locale]/(default)/shift-schedule/page.tsx
@@ -24,10 +24,16 @@ export default async function ShiftSchedulePage({
   const { locale } = await params;
 
   setRequestLocale(locale);
+  const t = await getTranslations('shiftSchedule');
 
   return (
     <>
-      <AdministratorMenu />
+      <AdministratorMenu
+        messages = {{
+          administratorMenu: t('administratorMenu.administratorMenu'),
+          clearShiftSchedule: t('administratorMenu.clearShiftSchedule')
+        }}
+      />
       <ScheduleTable week={shiftScheduleMockData} />
     </>
   );

diff --git a/src/components/shift-schedule/AdministratorMenu.tsx b/src/components/shift-schedule/AdministratorMenu.tsx
@@ -1,31 +1,49 @@
+'use client';
+
 import { Button } from '@/components/ui/Button';
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
 } from '@/components/ui/Collapsible';
-import { ChevronDownIcon, Trash2Icon } from 'lucide-react';
-import { useTranslations } from 'next-intl';
+import { Separator } from '@/components/ui/Separator';
+import { ChevronDownIcon, ChevronUpIcon, Trash2Icon } from 'lucide-react';
+import { useState } from 'react';
+
+type AdministratorMenuProps = {
+  messages: {
+    administratorMenu: string;
+    clearShiftSchedule: string;
+  };
+};
 
-function AdministratorMenu() {
-  const t = useTranslations('shiftSchedule.administratorMenu');
+function AdministratorMenu({ messages }: AdministratorMenuProps) {
+  const [isOpen, setIsOpen] = useState(false);
 
   return (
-    <Collapsible className='mx-auto xs:mx-8 my-8 rounded border p-3'>
+    <Collapsible
+      open={isOpen}
+      onOpenChange={setIsOpen}
+      className='data-[state] mx-auto xs:mx-8 my-8 rounded border p-3'
+    >
       <section className='mx-1 flex justify-between'>
         <span className='my-auto font-semibold text-xl'>
-          {t('administratorMenu')}
+          {messages.administratorMenu}
         </span>
         <CollapsibleTrigger asChild>
           <Button variant='ghost'>
-            <ChevronDownIcon className='size-4' />
+            {isOpen ? (
+              <ChevronUpIcon className='size-4' />
+            ) : (
+              <ChevronDownIcon className='size-4' />
+            )}
           </Button>
         </CollapsibleTrigger>
       </section>
       <CollapsibleContent className='mt-2'>
-        <Button variant='link' className='flex gap-3'>
+        <Button variant='link' className='flex gap-3 text-destructive'>
           <Trash2Icon />
-          <span>{t('clearShiftSchedule')}</span>
+          <span>{messages.clearShiftSchedule}</span>
         </Button>
       </CollapsibleContent>
     </Collapsible>