add: side menu dark theme

src/app/[name]/(Main)/layout.tsx

@@ -1,4 +1,4 @@
-import ClientMenuRouteWrapper from "@/components/wrapper/ClientMenuRouteWrapper.tsx";
+import ClientMenuRouteWrapper from "@/components/wrapper/ClientMenuRouteWrapper";
 import ClientSideWrapper from "@/components/wrapper/ClientSideWrapper";
 
 export const metadata = {

src/components/icons/TelegramIcon.tsx

@@ -6,19 +6,20 @@ const TelegramIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
         height="24"
         viewBox="0 0 24 24"
         fill="none"
+        stroke='currentcolor'
         xmlns="http://www.w3.org/2000/svg"
         {...props} // This allows passing additional props like className, style, etc.
     >
         <path
             d="M16.1502 12.8299L14.4202 13.4099C13.9402 13.5699 13.5702 13.9399 13.4102 14.4199L12.8302 16.1499C12.3402 17.6399 10.2402 17.6099 9.78018 16.1199L7.83019 9.83988C7.45019 8.58988 8.60019 7.43989 9.83019 7.81989L16.1202 9.76987C17.6102 10.2399 17.6302 12.3399 16.1502 12.8299Z"
-            stroke="#333333"
+            stroke="currentColor"
             strokeWidth="1.5"
             strokeLinecap="round"
             strokeLinejoin="round"
         />
         <path
             d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
-            stroke="#333333"
+            stroke="currentColor"
             strokeWidth="1.5"
             strokeLinecap="round"
             strokeLinejoin="round"

src/components/menu/SideMenu.tsx

@@ -99,7 +99,7 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
                                     return (
                                         <li key={index} className="mt-4 h-6">
                                             <SideMenuItem
-                                                className={clsx(isActive && 'text-primary! border-primary!', 'border-r-4!')}
+                                                className={clsx(isActive && 'text-primary! border-primary! dark:text-neutral-200! dark:border-neutral-200!', 'border-r-4!')}
                                                 href={href ?? ''}
                                                 title={tMenu(item.title)}
                                                 onClick={
@@ -111,7 +111,7 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
                                                     <Icon
                                                         variant={isActive ? 'Bold' : 'Linear'}
                                                         className={clsx(
-                                                            isActive ? 'text-primary fill-primary ' : 'stroke-icon-deactive text-icon-deactive'
+                                                            isActive ? 'text-primary fill-primary dark:text-neutral-200 dark:fill-neutral-200' : 'stroke-icon-deactive text-icon-deactive'
                                                         )}
                                                         size={20} width={20} height={20} />
                                                 }
@@ -134,7 +134,7 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
                                     <li key={index} className="mt-4 h-6 w-full">
                                         <SideMenuItem
                                             key={index}
-                                            href={item.href ?? ''}
+                                            href={href ?? ''}
                                             className={clsx(isActive && 'text-primary! border-primary!', 'border-r-4!')}
                                             onClick={
                                                 typeof item.href === 'string'
@@ -186,13 +186,13 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
                             data-visible={menuState}
                             data-isvisible={menuStateMemo}
                             onClick={(e) => { e.stopPropagation(); }}
-                            className="fixed top-0 bottom-0 right-0 bg-white w-[200px] h-dvh flex flex-col z-40 overflow-clip not-xl:!rounded-s-none"
+                            className="fixed top-0 bottom-0 right-0 bg-container w-[200px] h-dvh flex flex-col z-40 overflow-clip not-xl:!rounded-s-none"
                         >
                             {renderMenu()}
                         </motion.nav>
                     </BlurredOverlayContainer>
                     <nav
-                        className="hidden fixed top-4 bottom-4 right-4 bg-white xl:w-[250px] xl:flex flex-col z-40 overflow-clip xl:rounded-4xl"
+                        className="hidden fixed top-4 bottom-4 right-4 bg-container xl:w-[250px] xl:flex flex-col z-40 overflow-clip xl:rounded-4xl"
                     >
                         {renderMenu()}
                     </nav>
@@ -211,7 +211,7 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
                 onClick={toggleShareModal}
             >
                 <h2 className="text-base font-medium">
-                    <Share className="inline-block ml-2 mb-1.5 stroke-primary" size={24} />
+                    <Share className="inline-block ml-2 mb-1.5 stroke-primary dark:stroke-foreground" size={24} />
                     {tShareModal('Heading')}
                 </h2>
                 <p className="text-xs font-medium mt-6">
@@ -219,21 +219,21 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
                 </p>
 
                 <Button onClick={() => { }} className="text-sm mt-8">
-                    <DocumentCopy className="inline-block ml-2 mb-0.5 stroke-white" size={20} />
+                    <DocumentCopy className="inline-block ml-2 mb-0.5 stroke-container dark:stroke-foreground" size={20} />
                     <span className="font-light">{tShareModal('ButtonCopy')}</span>
                 </Button>
 
                 <div className="grid grid-cols-3 gap-5.5 mt-6 px-12">
                     <div className="place-items-center">
-                        <TelegramIcon width={24} height={24} className="mb-1.5 stroke-primary" />
+                        <TelegramIcon width={24} height={24} className="mb-1.5 text-primary dark:text-foreground" />
                         <span className='text-xs2 font-medium'>Telegram</span>
                     </div>
                     <div className="place-items-center">
-                        <Whatsapp size={24} className="mb-1.5 stroke-primary" />
+                        <Whatsapp size={24} className="mb-1.5 stroke-primary dark:stroke-foreground" />
                         <span className='text-xs2 font-medium'>WhatsApp</span>
                     </div>
                     <div className="place-items-center">
-                        <Instagram size={24} className="mb-1.5 stroke-primary" />
+                        <Instagram size={24} className="mb-1.5 stroke-primary dark:stroke-foreground" />
                         <span className='text-xs2 font-medium'>Instagram</span>
                     </div>
                 </div>
@@ -245,7 +245,7 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
                 onClick={toggleInstallPwaModal}
             >
                 <h2 className="text-base font-medium">
-                    <DirectInbox className="inline-block ml-2 mb-1.5 stroke-primary" size={24} />
+                    <DirectInbox className="inline-block ml-2 mb-1.5 stroke-primary dark:stroke-foreground" size={24} />
                     {tInstallPwaModal('Heading')}
                 </h2>
                 <p className="text-xs font-medium mt-6">

src/components/menu/SideMenuItem.tsx

@@ -17,12 +17,13 @@ export default function SideMenuItem({ href, title, icon, className, children, .
                 inline-flex gap-3 ps-6 xl:ps-9 h-full w-full items-center overflow-hidden text-nowrap
                 text-xs font-light text-disabled-text border-transparent
                 data-[active]:border-s-6 data-[active]:border-black data-[active]:text-black
+                dark:data-[active]:border-foreground dark:data-[active]:text-foreground
                 ${className}
             `}
         >
             {children}
             <span className="flex-shrink-0">{icon}</span>
-            <span>{title}</span>
+            <span className='mt-0.5'>{title}</span>
         </Link>
     )
 }

src/components/utils/Modal.tsx

@@ -22,7 +22,7 @@ function Modal({ visible, onClick, children, ...rest }: Props) {
                 <motion.div
                     animate={{ y: visible ? [10, 0] : [0, 10] }}
                     transition={{ duration: 0.1, ease: 'easeInOut' }}
-                    className="top-1/2 absolute left-1/2 min-w-xs w-full max-w-sm text-center -translate-1/2 px-6 pt-8 pb-9 drop-shadow-container bg-white/63 rounded-4xl"
+                    className="top-1/2 absolute left-1/2 min-w-xs w-full max-w-sm text-center -translate-1/2 px-6 pt-8 pb-9 drop-shadow-container bg-container/63 dark:bg-container/93 rounded-4xl"
                 >
                     {children}
                 </motion.div>

src/components/utils/Prompt.tsx

@@ -38,7 +38,7 @@ function Prompt({ title, description, textConfirm, textCancel, onConfirm, onCanc
                 <Button onClick={onConfirm} className="text-sm h-11 font-normal cursor-pointer">
                     {textConfirm ?? t('ButtonOk')}
                 </Button>
-                <Button onClick={onCancel} className="bg-disabled! h-11 cursor-pointer text-disabled2! active:brightness-95 hover:brightness-105 text-sm font-normal">
+                <Button onClick={onCancel} className="bg-disabled! h-11 cursor-pointer text-disabled2! dark:text-disabled-text! active:brightness-95 hover:brightness-105 text-sm font-normal">
                     {textCancel ?? t('ButtonCancel')}
                 </Button>
             </div>