design page general and office information & head panel

components/layoutPanel/header/MenuProfile.js

@@ -0,0 +1,100 @@
+import { useState } from 'react';
+import { Button, Popover } from '@mui/material';
+import ArrowBottomHD from '@/components/icons/ArrowBottomHD';
+import ProfilePA from '@/components/icons/ProfilePA';
+import LogoutP from '@/components/icons/LogoutP';
+import SettingPA from '@/components/icons/SettingPA';
+import CardDA from '@/components/icons/CardDA';
+import Image from 'next/image';
+
+function MenuProfile({ data }) {
+
+    const [anchorEl, setAnchorEl] = useState(null);
+
+    const handleClick = (event) => setAnchorEl(event.currentTarget);
+    const handleClose = () => setAnchorEl(null);
+
+    const open = Boolean(anchorEl);
+    const id = open ? 'simple-popover' : undefined;
+
+    return (
+        <>
+            <Button
+                variant='text'
+                onClick={handleClick}
+                className='!flex !items-start !justify-center !gap-[8px] !p-1'
+            >
+                <Image
+                    className='w-[48px] h-[48px] rounded-full'
+                    src={data.src}
+                    alt='profile'
+                    height={48}
+                    width={48}
+                />
+                <div className='flex flex-col items-start justify-between gap-[3px]'>
+                    <p className='text-[#3B3B3B] text-[14px] font-semibold'>{data.name}</p>
+                    <p className='text-[#7E7E7E] text-[12px] font-normal'>{data.expertise}</p>
+                </div>
+                <div className='mr-[4px]'>
+                    <ArrowBottomHD />
+                </div>
+            </Button>
+            <Popover
+                id={id}
+                open={open}
+                anchorEl={anchorEl}
+                onClose={handleClose}
+                anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'left',
+                }}
+            >
+                <div
+                    className='flex pt-[11px] pb-[14px] flex-col items-start gap-[8px] min-w-[185px]'
+                >
+                    <Button
+                        fullWidth
+                        variant='text'
+                        className='!text-[#7E7E7E] !text-[14px] !font-medium !flex !justify-start !p-[8px] !gap-[5px]'
+                    >
+                        <ProfilePA />
+                        پروفایل من
+                    </Button>
+                    <Button
+                        fullWidth
+                        variant='text'
+                        className='!text-[#7E7E7E] !text-[14px] !font-medium !flex !justify-start !p-[8px] !gap-[5px]'
+                    >
+                        <CardDA />
+                        پرداخت ها
+                    </Button>
+                    <Button
+                        fullWidth
+                        variant='text'
+                        className='!text-[#7E7E7E] !text-[14px] !font-medium !flex !justify-start !p-[8px] !gap-[5px]'
+                    >
+                        <SettingPA />
+                        تنظیمات
+                    </Button>
+                    <Button
+                        fullWidth
+                        color='error'
+                        variant='contained'
+                        sx={{
+                            '&.MuiButtonBase-root': {
+                                paddingTop: '8px !important',
+                                paddingBottom: '8px !important'
+                            },
+                        }}
+                        className='!flex !w-[calc(100%-16px)] !mx-auto !text-[#FAFAFA] !text-[14px] !font-medium !items-center !justify-center !gap-[5px]'
+                    >
+                        <LogoutP />
+                        خروج
+                    </Button>
+                </div>
+            </Popover>
+        </>
+    )
+}
+
+export default MenuProfile

components/layoutPanel/header/index.js

@@ -1,7 +1,8 @@
 import Icons from "./Icons"
+import MenuProfile from "./MenuProfile"
 import Search from "./Search"
 
-function Header() {
+function Header({ disableProfile, data }) {
     return (
         <div
             className='
@@ -10,7 +11,12 @@ function Header() {
             '
         >
             <Search />
-            <Icons />
+            <div className="flex items-center justify-end gap-[40px] min-w-fit">
+                <Icons />
+                {!disableProfile && (
+                    <MenuProfile data={data} />
+                )}
+            </div>
         </div>
     )
 }

components/layoutPanel/sidebar/Links.js

@@ -13,7 +13,7 @@ function Links() {
     const list = [
         { name: 'دشبورد', src: '/panel/dashboard', icon: <CategoryP /> },
         { name: 'حساب کاربری', src: '/panel/user-account', icon: <ProfileCircleP /> },
-        { name: 'اضافه کردن پزشک', src: '/', icon: <ProfileAddP /> },
+        { name: 'اضافه کردن پزشک', src: '/panel/add-doctor', icon: <ProfileAddP /> },
         { name: 'نوبت ها', src: '/', icon: <CalendarP /> }
     ];
 
@@ -24,7 +24,6 @@ function Links() {
             {list.map((item, idx) => (
                 <li
                     key={idx}
-                    className="p-[8px]"
                 >
                     <Link href={item.src}>
                         <Button