fix some bug design

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

@@ -1,12 +1,22 @@
 'use client';
 
 import ClientSideWrapper from '@/components/wrapper/ClientSideWrapper';
-import React from 'react'
+import React from 'react';
+import { usePathname } from 'next/navigation';
+import clsx from 'clsx';
 
 function DialogsLayout({ children }: { children: React.ReactNode }) {
+    const pathname = usePathname();
+    const isCheckoutPage = pathname?.includes('/checkout/');
+
     return (
         <ClientSideWrapper>
-            <main className='h-full w-full overflow-y-auto noscrollbar bg-container lg:bg-background pt-4 pb-6 px-6'>
+            <main className={clsx(
+                'h-full w-full overflow-y-auto noscrollbar pt-4 pb-6 px-6',
+                isCheckoutPage
+                    ? 'bg-background dark:bg-background'
+                    : 'bg-container lg:bg-background'
+            )}>
                 {children}
             </main>
         </ClientSideWrapper>

src/app/[name]/(Main)/[id]/page.tsx

@@ -192,8 +192,8 @@ function FoodPage({ }: Props) {
                 </div>
 
                 <div className="mt-4 text-xs">
-                    <p>محتویات:</p>
-                    <p>{content || '-'}</p>
+                    <p className='font-bold'>محتویات:</p>
+                    <p className='mt-2 leading-6'>{content || '-'}</p>
                 </div>
 
                 <div className='mt-12 flex justify-between items-center'>

src/components/menu/SideMenu.tsx

@@ -7,7 +7,7 @@ import NoteBoardIcon from '../icons/NoteBoardIcon';
 import BlurredOverlayContainer from '../overlays/BlurredOverlayContainer';
 import NightModeSwitch from '../button/NightModeSwitch';
 import Button from '../button/PrimaryButton';
-import { useParams, usePathname } from 'next/navigation';
+import { useParams, usePathname, useRouter } from 'next/navigation';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { CalendarSearch, Cup, DirectboxReceive, DirectInbox, DocumentCopy, Game, Icon, Instagram, Like1, Login, LogoutCurve, Notification, Receipt1, Setting2, Share, TicketDiscount, Whatsapp } from 'iconsax-react';
@@ -83,8 +83,11 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
     const [isIOSDevice, setIsIOSDevice] = useState(false);
     const [isPWAInstalled, setIsPWAInstalled] = useState(false);
     const { data: aboutData } = useGetAbout();
-    const { isSuccess } = useGetProfile();
+    const { data: profile, isSuccess } = useGetProfile();
+    const profileData = profile?.data;
+    const isLoggedIn = isSuccess && profileData;
     const isPremium = aboutData?.data?.plan === 'premium';
+    const router = useRouter();
 
 
     const params = useParams();
@@ -183,19 +186,29 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
         }
     };
 
+    const handleNotificationClick = (e: React.MouseEvent) => {
+        e.preventDefault();
+        if (!isLoggedIn) {
+            toast('ابتدا لاگین کنید', 'info');
+        } else {
+            router.push(`/${name}/notifications`);
+        }
+    };
+
     const hrefOnClicks = [
         { href: '?logout', handler: toggleLogoutModal },
         { href: '?share', handler: toggleShareModal },
-        { href: '?installpwa', handler: toggleInstallPwaModal }
+        { href: '?installpwa', handler: toggleInstallPwaModal },
+        { href: 'notifications', handler: handleNotificationClick }
     ];
 
     const renderMenu = () => {
         return (
-            <section className="flex-1 overflow-y-scroll noscrollbar pt-20 pb-10 flex flex-col justify-between md:w-[160px] xl:w-[285px]">
+            <section className="flex-1 overflow-y-scroll noscrollbar py-10 flex flex-col justify-between md:w-[160px] xl:w-[285px]">
                 {
                     aboutData?.data?.logo && (
                         <div className='px-5'>
-                            <Image src={aboutData?.data?.logo} alt='logo' width={110} height={100} unoptimized />
+                            <Image className='mx-auto' src={aboutData?.data?.logo} alt='logo' width={110} height={100} unoptimized />
                         </div>
                     )
                 }