notification

src/pages/notification/Notification.tsx

@@ -14,6 +14,7 @@ import Button from '../../components/Button';
 import { toast } from '../../components/Toast';
 // import { useNavigate } from 'react-router-dom';
 import { ErrorType } from '../../helpers/types';
+import { useSharedStore } from '@/shared/store/sharedStore';
 const Notifications: FC = () => {
     // const navigate = useNavigate()
     const { t } = useTranslation();
@@ -22,6 +23,7 @@ const Notifications: FC = () => {
     const [showModal, setShowModal] = useState<boolean>(false);
     const { data, fetchNextPage, hasNextPage, refetch } = useGetNotification(activeTab);
     const readAll = useReadAll()
+    const { emailWidth } = useSharedStore()
     const posts = data?.pages.flatMap((page) => page.data?.notifications) || [];
 
     const handleAllRead = () => {
@@ -89,7 +91,14 @@ const Notifications: FC = () => {
             </div>
 
             {showModal && (
-                <div id='notificationsContainer' className="xl:h-[calc(100%-110px)] h-[70%] p-6 z-[300] xl:w-[300px] w-full xl:left-7 left-0 xl:top-[90px] top-0 overflow-y-auto xl:rounded-3xl rounded-b-3xl rounded-t-none fixed modalGlass3 ">
+                <div
+                    id='notificationsContainer'
+                    className={clx(
+                        "xl:h-[calc(100%-110px)] h-[70%] p-6 z-[300] xl:w-[300px] w-full xl:left-7 left-0 xl:top-[90px] top-0 overflow-y-auto xl:rounded-3xl rounded-b-3xl rounded-t-none fixed modalGlass3",
+                        emailWidth > 0 ? 'xl:left-auto' : 'w-full'
+                    )}
+                    style={emailWidth > 0 && window.innerWidth > 1280 ? { left: `${emailWidth - 50}px` } : {}}
+                >
                     <div className="flex justify-between items-center">
                         <div>{t('notif.natification')}</div>
                         <div className="size-7 rounded-full bg-white/30 dark:bg-white/10 flex justify-center items-center">

src/shared/Header.tsx

@@ -31,8 +31,9 @@ const Header: FC = () => {
     })
 
     const { t } = useTranslation('global')
-    const { setOpenSidebar, openSidebar, setOpenReportBug } = useSharedStore()
+    const { setOpenSidebar, openSidebar, setOpenReportBug, setEmailWidth } = useSharedStore()
-
+    const [popoverButtonRef, setPopoverButtonRef] = useState<HTMLDivElement | null>(null)
+    const [popoverButtonWidth, setPopoverButtonWidth] = useState<number>(0)
     const handleSearchChange = (value: string) => {
         setSearch(value)
         if (value) {
@@ -124,6 +125,19 @@ const Header: FC = () => {
         setPopoverKey((prevKey) => prevKey + 1)
     }, [pathname])
 
+    useEffect(() => {
+        if (popoverButtonRef) {
+            const rect = popoverButtonRef.getBoundingClientRect();
+            setPopoverButtonWidth(rect.width);
+            console.log('popoverButtonRef width:', rect.width);
+            console.log('popoverButtonRef height:', rect.height);
+            console.log('popoverButtonRef dimensions:', { width: rect.width, height: rect.height });
+            console.log('Stored width in state:', popoverButtonWidth);
+            setEmailWidth(rect.width);
+        }
+    }, [popoverButtonRef])
+
+
     return (
         <div className='fixed z-1 right-4 left-4 xl:right-[285px] top-4 xl:h-16 h-12 flex items-center px-6 bg-surface justify-between rounded-[32px] xl:w-[calc(100%-305px)] border border-surface'>
             {/* Desktop Search */}
@@ -299,19 +313,21 @@ const Header: FC = () => {
                 {
                     data && (
                         <Popover className="relative" key={popoverKey}>
-                            <PopoverButton >
+                            <div ref={setPopoverButtonRef}>
-                                <div className='flex gap-2 items-center mt-2.5'>
+                                <PopoverButton >
-                                    <div className='size-6 rounded-full bg-description overflow-hidden'>
+                                    <div className='flex gap-2 items-center mt-2.5'>
-                                        <img src={data?.data?.user?.profilePic ? data?.data?.user?.profilePic : AvatarImage} className='size-full object-cover' />
+                                        <div className='size-6 rounded-full bg-description overflow-hidden'>
-                                    </div>
+                                            <img src={data?.data?.user?.profilePic ? data?.data?.user?.profilePic : AvatarImage} className='size-full object-cover' />
-                                    <div className='xl:flex hidden gap-1 items-center'>
+                                        </div>
-                                        <div className='text-xs'>
+                                        <div className='xl:flex hidden gap-1 items-center'>
-                                            {data?.data?.user?.emailAddress}
+                                            <div className='text-xs'>
+                                                {data?.data?.user?.emailAddress}
+                                            </div>
+                                            <ArrowDown2 size={14} color={getIconColor('muted')} />
                                         </div>
-                                        <ArrowDown2 size={14} color={getIconColor('muted')} />
                                     </div>
-                                </div>
+                                </PopoverButton>
-                            </PopoverButton>
+                            </div>
 
                             <PopoverPanel style={{ minHeight: window.innerWidth < 1140 ? window.innerHeight : undefined }} anchor="bottom" className="flex xl:ml-6 overflow-auto flex-col gap-3 bg-surface border border-surface boxShadow xl:mt-7  z-30 py-4 text-xs rounded-2.5 xl:w-[300px] -mt-[50px] w-full fixed xl:h-fit h-full shadow-md">
                                 <div className='absolute xl:hidden top-6 left-6'>
@@ -354,7 +370,7 @@ const Header: FC = () => {
                                     <SideBarItem
                                         icon={<Logout color={getIconColor('primary')} size={20} />}
                                         title={t('sidebar.logout')}
-                                        isActive={false}
+                                        isActive
                                         link={'#'}
                                         isWithoutLine
                                         isLogout

src/shared/store/sharedStore.ts

@@ -12,4 +12,6 @@ export const useSharedStore = create<SharedStoreType>((set) => ({
   setDraftData: (draft) => set({ draftData: draft }),
   editingDraftId: null,
   setEditingDraftId: (id) => set({ editingDraftId: id }),
+  emailWidth: 0,
+  setEmailWidth: (width) => set({ emailWidth: width }),
 }));

src/shared/types/SharedTypes.ts

@@ -11,6 +11,8 @@ export type SharedStoreType = {
   setDraftData: (draft: DraftMessage | null) => void;
   editingDraftId: number | null;
   setEditingDraftId: (id: number | null) => void;
+  emailWidth: number;
+  setEmailWidth: (width: number) => void;
 };
 
 export type MailboxCount = {