Side Nav - Copy this React, Tailwind Component to your project

'use-client'-import-{-useEffect-}-from-'react';-import-{-useRouter-}-from-'next/navigation';-import-{-useTranslation-}-from-'react-i18next';-import-useAccordionStore-from-'@/useDirectoryStore';-interface-DirectoryLink-{-name:-string;-href:-string;-hasChildren:-boolean;-children?:-DirectoryLink[];-id:-string;-order:-number;-}-export-default-function-SideNav()-{-const-{-accordionStates,-accordionChildren,-activeLink,-toggleAccordionState,-setAccordionChildren,-setActiveLink,-reRenderFlag,-//-리렌더링-플래그-가져오기-}-=-useAccordionStore();-const-router-=-useRouter();-const-{-t,-ready-}-=-useTranslation('common');-//-reRenderFlag가-변경될-때마다-리렌더링을-강제로-트리거합니다.-useEffect(()-=>-{},-[reRenderFlag]);-const-toggleAccordion-=-async-(-acc1Name:-string,-acc2Name:-string,-acc3Name:-string,-accKey:-string-)-=>-{-try-{-//-Toggle-the-state-of-the-current-accordion-toggleAccordionState(accKey);-//-If-the-current-accordion-is-being-opened,-fetch-children-data-if-(!accordionStates[accKey])-{-const-response-=-await-fetch(-`/api/fetch-directory?acc1=${acc1Name}&acc2=${acc2Name}&acc3=${acc3Name}`-);-if-(response.ok)-{-const-data:-DirectoryLink[]-=-await-response.json();-console.log('DATA:-',-data);-//-Set-the-children-of-the-current-accordion-in-the-store-setAccordionChildren(accKey,-data);-//-상태-변경-후-리렌더링을-유도합니다.-useAccordionStore.getState().triggerReRender();-}-else-{-console.error(`Failed-to-fetch-children.-Status:-${response.status}`);-}-}-}-catch-(error)-{-console.error('Error-fetching-accordion:',-error);-}-};-const-linkRedirection-=-(href:-string)-=>-{-setActiveLink(href);-router.push(href);-};-return-(-<div-className="relative-h-full-flex">-{!ready-?-(-<div>Loading-translations...</div>-)-:-(-<div-className="fixed-left-0-top-0-w-64-h-full-flex-flex-col-p-3-bg-gray-900">-<div-className={`flex-items-center-justify-between-rounded-md-p-2-cursor-pointer-${-activeLink-===-'/updateservices'-?-'bg-blue-500-text-white'-:-'bg-gray-800-text-white-hover:bg-gray-900'-}`}->-<button-className="flex-items-center-w-full-text-left"-onClick={()-=>-linkRedirection('/updateservices')}->-<p-className="ml-2">Update-Services</p>-</button>-<button-className="text-white-ml-2"-onClick={()-=>-toggleAccordion('',-'',-'',-'WSUS')}->-{accordionStates['WSUS']-?-(-<i-className="ri-arrow-down-s-fill"></i>-)-:-(-<i-className="ri-arrow-left-s-fill"></i>-)}-</button>-</div>-{accordionStates['WSUS']-&&-(-<div-className="ml-1">-{accordionChildren['WSUS']?.map((acc1)-=>-{-const-acc1Key-=-acc1.name;-return-(-<div-key={acc1Key}-className="flex-flex-col">-<div-className={`flex-items-center-justify-between-rounded-md-p-2-cursor-pointer-${-activeLink-===-acc1.href-?-'bg-blue-500-text-white'-:-'bg-gray-800-text-white-hover:bg-gray-900'-}`}->-<button-className="flex-items-center-w-full-text-left"-onClick={()-=>-linkRedirection(acc1.href)}->-<p-className="ml-2">{acc1.name}</p>-</button>-{acc1.hasChildren-&&-(-<button-className="text-white-ml-2"-onClick={()-=>-toggleAccordion(acc1.name,-'',-'',-acc1Key)-}->-{accordionStates[acc1Key]-?-(-<i-className="ri-arrow-down-s-fill"></i>-)-:-(-<i-className="ri-arrow-left-s-fill"></i>-)}-</button>-)}-</div>-{accordionStates[acc1Key]-&&-(-<div-className="ml-2">-{accordionChildren[acc1Key]?.map((acc2)-=>-{-const-acc2Key-=-`${acc1.name}-${acc2.name}`;-return-(-<div-key={acc2Key}-className="flex-flex-col">-<div-className={`flex-items-center-justify-between-rounded-md-p-2-cursor-pointer-${-activeLink-===-acc2.href-?-'bg-blue-500-text-white'-:-'bg-gray-800-text-white-hover:bg-gray-900'-}`}->-<button-className="flex-items-center-w-full-text-left"-onClick={()-=>-linkRedirection(acc2.href)-}->-<p-className="ml-2">-{t(-`SideNav.${acc2.name}`-)}-</p>-</button>-{acc2.hasChildren-&&-(-<button-className="text-white-ml-2"-onClick={()-=>-toggleAccordion(-acc1.name,-acc2.name,-'',-acc2Key-)-}->-{accordionStates[acc2Key]-?-(-<i-className="ri-arrow-down-s-fill"></i>-)-:-(-<i-className="ri-arrow-left-s-fill"></i>-)}-</button>-)}-</div>-{accordionStates[acc2Key]-&&-(-<div-className="ml-3">-{accordionChildren[-acc2Key-]?.map((acc3)-=>-{-const-acc3Key-=-`${acc2Key}-${acc3.name}`;-return-(-<div-key={acc3Key}-className="flex-flex-col"->-<div-className={`flex-items-center-justify-between-rounded-md-p-2-cursor-pointer-${-activeLink-===-acc3.href-?-'bg-blue-500-text-white'-:-'bg-gray-800-text-white-hover:bg-gray-900'-}`}->-<button-className="flex-items-center-w-full-text-left"-onClick={()-=>-linkRedirection(-acc3.href-)-}->-<p-className="ml-2">-{acc3.name}-</p>-</button>-</div>-</div>-);-})}-</div>-)}-</div>-);-})}-</div>-)}-</div>-);-})}-</div>-)}-</div>-)}-</div>-);-}-지금-아코디언이-자동으로-업데이트가-안되는데