add open/close to sidebar & responsive sidebar & head & page dashboard and user account

components/layoutPanel/header/Icons.js

@@ -3,25 +3,54 @@ import React from 'react'
 import MoonP from '@/components/icons/MoonP'
 import NotificationP from '@/components/icons/NotificationP'
 import SettingP from '@/components/icons/SettingP'
+import SearchHeaderP from '@/components/icons/SearchHeaderP'
 
 function Icons() {
     return (
         <div className="flex items-center justify-start gap-[12px]">
             <Button
-                className="!p-[8px] !min-w-fit !border-[#EFEFEF] !rounded-[8px]"
+                className="
+                    !p-[8px] !border-[#EFEFEF] !rounded-[8px]
+                    !w-[32px] md:!w-[36px] lg:!w-[40px]
+                    !h-[32px] md:!h-[36px] lg:!h-[40px]
+                    !min-w-[32px] md:!min-w-[36px] lg:!min-w-[40px]
+                    !min-h-[32px] md:!min-h-[36px] lg:!min-h-[40px]
+                "
                 variant="outlined"
             >
                 <MoonP />
             </Button>
             <Button
-                className="!p-[8px] !min-w-fit !border-[#EFEFEF] !rounded-[8px]"
+                className="
+                    !p-[8px] !border-[#EFEFEF] !rounded-[8px]
+                    !w-[32px] md:!w-[36px] lg:!w-[40px]
+                    !h-[32px] md:!h-[36px] lg:!h-[40px]
+                    !min-w-[32px] md:!min-w-[36px] lg:!min-w-[40px]
+                    !min-h-[32px] md:!min-h-[36px] lg:!min-h-[40px]
+                "
+                variant="outlined"
+            >
+                <SearchHeaderP />
+            </Button>
+            <Button
+                className="
+                    !p-[8px] !border-[#EFEFEF] !rounded-[8px]
+                    !w-[32px] md:!w-[36px] lg:!w-[40px]
+                    !h-[32px] md:!h-[36px] lg:!h-[40px]
+                    !min-w-[32px] md:!min-w-[36px] lg:!min-w-[40px]
+                    !min-h-[32px] md:!min-h-[36px] lg:!min-h-[40px]
+                "
                 variant="outlined"
             >
                 <SettingP />
             </Button>
             <Button
                 className='
-                    !p-[8px] !min-w-fit !border-[#EFEFEF] !rounded-[8px] !relative before:!rounded-full
+                    !w-[32px] md:!w-[36px] lg:!w-[40px]
+                    !h-[32px] md:!h-[36px] lg:!h-[40px]
+                    !min-w-[32px] md:!min-w-[36px] lg:!min-w-[40px]
+                    !min-h-[32px] md:!min-h-[36px] lg:!min-h-[40px]
+                    !p-[8px] !border-[#EFEFEF] !rounded-[8px] !relative before:!rounded-full
                     before:!absolute before:!right-[-2px] before:!top-[-2px] before:!w-[6px] before:!h-[6px]
                     before:!bg-[#D32F2F]
                 '

components/layoutPanel/header/MenuProfile.js

@@ -19,10 +19,17 @@ function MenuProfile({ data }) {
 
     return (
         <>
+            <Image
+                className='flex md:hidden w-[32px] h-[32px] rounded-full'
+                src={data.src}
+                alt='profile'
+                height={32}
+                width={32}
+            />
             <Button
                 variant='text'
                 onClick={handleClick}
-                className='!flex !items-start !justify-center !gap-[8px] !p-1'
+                className='!hidden md:!flex !items-start !justify-center !gap-[8px] !p-1'
             >
                 <Image
                     className='w-[48px] h-[48px] rounded-full'
@@ -80,6 +87,7 @@ function MenuProfile({ data }) {
                         fullWidth
                         color='error'
                         variant='contained'
+                        onClick={handleClose}
                         sx={{
                             '&.MuiButtonBase-root': {
                                 paddingTop: '8px !important',

components/layoutPanel/header/Search.js

@@ -4,8 +4,9 @@ import { InputAdornment, TextField } from "@mui/material"
 function Search() {
     return (
         <TextField
-            placeholder="جستجو"
             fullWidth
+            placeholder="جستجو"
+            className="!hidden md:!flex"
             InputProps={{
                 startAdornment: (
                     <InputAdornment position="start">

components/layoutPanel/header/index.js

@@ -1,17 +1,19 @@
-import Icons from "./Icons"
-import MenuProfile from "./MenuProfile"
-import Search from "./Search"
+import Icons from "./Icons";
+import Search from "./Search";
+import SideButton from "./sideButton";
+import MenuProfile from "./MenuProfile";
 
-function Header({ disableProfile, data }) {
+function Header({ disableProfile, data, setActive }) {
     return (
         <div
             className='
-                h-[90px] top-0 right-0 sticky border-0 border-b border-[#EFEFEF] bg-[#FFF]
-                flex items-center justify-between pr-[16px] pl-[18px] z-20 gap-[56px]
+                h-[56px] sm:h-[67px] md:h-[79px] lg:h-[90px] top-0 right-0 sticky border-0 border-b border-[#EFEFEF] bg-[#FFF]
+                flex items-center justify-between pr-[16px] pl-[18px] z-20 gap-[14px] sm:gap-[28px] md:gap-[42px] lg:gap-[56px]
             '
         >
+            <SideButton setActive={setActive} />
             <Search />
-            <div className="flex items-center justify-end gap-[40px] min-w-fit">
+            <div className="flex items-center justify-end gap-[8px] md:gap-[40px] min-w-fit">
                 <Icons />
                 {!disableProfile && (
                     <MenuProfile data={data} />

components/layoutPanel/header/sideButton/ButtonMenu.js

@@ -0,0 +1,22 @@
+import { Button } from "@mui/material"
+
+function ButtonMenu({ setActive }) {
+    return (
+        <Button
+            onClick={() => setActive(true)}
+            className="!py-[6px] !px-[2px] !flex !p-0.5 !w-[24px] !h-[24px] !flex-col !justify-between !items-center"
+        >
+            <span
+                className='min-h-[2px] transition-all duration-500 ease-in-out rounded-[40px] bg-[#6C757D] rotate-0 w-full'
+            ></span>
+            <span
+                className='w-full min-h-[2px] transition-all duration-500 ease-in-out rounded-[40px] bg-[#6C757D] rotate-180'
+            ></span>
+            <span
+                className='min-h-[2px] transition-all duration-500 ease-in-out rounded-[40px] bg-[#6C757D] rotate-0 w-full'
+            ></span>
+        </Button>
+    )
+}
+
+export default ButtonMenu

components/layoutPanel/header/sideButton/index.js

@@ -0,0 +1,15 @@
+import ButtonMenu from "./ButtonMenu"
+import LogoPanelHead from "@/components/icons/LogoPanelHead"
+
+function SideButton({ setActive }) {
+    return (
+        <div className="flex md:hidden items-center justify-start gap-[4px]">
+            <ButtonMenu setActive={setActive} />
+            <div className="w-[100px] h-[24px]">
+                <LogoPanelHead />
+            </div>
+        </div>
+    )
+}
+
+export default SideButton

components/layoutPanel/sidebar/HeadMd.js

@@ -0,0 +1,28 @@
+import DoubleArrowLeftP from '@/components/icons/DoubleArrowLeftP'
+import LogoPanel from '@/components/icons/LogoPanel'
+import { Button } from '@mui/material'
+import Link from 'next/link'
+import React from 'react'
+
+function HeadMd({ open, setOpen }) {
+    return (
+        <div className={`hidden md:flex w-full items-center transition-all duration-500 justify-between`}>
+            <Link
+                href='/panel/dashboard'
+                className={`flex justify-center transition-all duration-500 ${open ? 'max-w-full' : 'max-w-0'}`}
+            >
+                <LogoPanel />
+            </Link>
+            <Button
+                onClick={() => setOpen(!open)}
+                className={`!p-1 !grid !place-items-center !rounded-full !border !border-solid !border-[#EFEFEF]
+                    !transition-all !duration-500 !bg-[#FFF] !w-[28px] !h-[28px] !z-[320] 
+                ${open ? '!rotate-180' : '!rotate-0 !ml-[7px]'}`}
+            >
+                <DoubleArrowLeftP />
+            </Button>
+        </div>
+    )
+}
+
+export default HeadMd

components/layoutPanel/sidebar/HeadSm.js

@@ -0,0 +1,22 @@
+import { Button } from "@mui/material";
+import ArrowRightP from "@/components/icons/ArrowRightP";
+import LogoPanelHead from "@/components/icons/LogoPanelHead";
+
+function HeadSm({ setActive }) {
+    return (
+        <div className="flex md:hidden items-center justify-start gap-[8px]">
+            <Button
+                variant="text"
+                className="!min-w-0 !p-1"
+                onClick={() => setActive(false)}
+            >
+                <ArrowRightP />
+            </Button>
+            <div className="w-[100px] h-[23px]">
+                <LogoPanelHead />
+            </div>
+        </div>
+    )
+}
+
+export default HeadSm

components/layoutPanel/sidebar/Links.js

@@ -8,7 +8,7 @@ import CategoryP from "@/components/icons/CategoryP";
 import ProfileAddP from "@/components/icons/ProfileAddP";
 import ProfileCircleP from "@/components/icons/ProfileCircleP";
 
-function Links() {
+function Links({ open }) {
 
     const list = [
         { name: 'دشبورد', src: '/panel/dashboard', icon: <CategoryP /> },
@@ -20,25 +20,26 @@ function Links() {
     const pathname = usePathname();
 
     return (
-        <ul className="flex flex-col gap-[32px] mt-[54px]">
+        <ul className={`flex flex-col gap-[32px] mt-[36px] md:mt-[54px] transition-all duration-500`}>
             {list.map((item, idx) => (
-                <li
-                    key={idx}
-                >
+                <li key={idx}>
                     <Link href={item.src}>
                         <Button
                             fullWidth
                             variant="text"
                             className={`
-                            !p-[8px] !flex !items-center !justify-start !gap-[8px] !text-[16px] !rounded-[8px] !transition-all !duration-500
-                            ${item.src === pathname ? '!bg-[#5559CE] !text-[#FAFAFA] !font-bold' : '!text-[#525252] !font-medium'}
+                                !p-[8px] !flex !items-center !justify-start !gap-[8px] !text-[16px] !rounded-[8px] !transition-all !duration-500
+                                ${item.src === pathname ? '!bg-[#5559CE] !text-[#FAFAFA] !font-bold' : '!text-[#525252] !font-medium'}
                             `}
                         >
 
                             <div className="p-[4px] bg-[#E5E9FF] rounded-[4px] w-fit">
                                 {item.icon}
                             </div>
-                            {item.name}
+                            <p className={`
+                                transition-all duration-500
+                                ${open ? 'opacity-100' : 'md:opacity-0'}
+                            `}>{item.name}</p>
                         </Button>
                     </Link>
                 </li>

components/layoutPanel/sidebar/index.js

@@ -1,30 +1,53 @@
+import { useState } from "react";
+
+import Links from "./Links";
+import HeadMd from "./HeadMd";
+import HeadSm from "./HeadSm";
+import { Button } from "@mui/material";
 import LogoutOrangeP from "@/components/icons/LogoutOrangeP";
-import LogoPanel from "@/components/icons/LogoPanel";
-import { Button } from "@mui/material";
-import Links from "./Links";
-import Link from "next/link";
+
+function Sidebar({ active, setActive }) {
+
+  const [open, setOpen] = useState(false);
 
-function Sidebar() {
   return (
-    <aside className="min-w-[243px] h-full">
-      <div className="min-w-[243px] p-[24px] h-full flex flex-col justify-between items-start fixed top-0 right-0 border-0 border-l border-l-[#EFEFEF] bg-[#FFF]">
-        <div>
-          <Link href='/panel/dashboard' className="flex justify-center">
-            <LogoPanel />
-          </Link>
-          <Links />
+    <div className={`
+        transition-all duration-500 md:flex fixed md:relative z-30 w-[85%] md:w-fit
+        ${active ? ' right-0' : 'right-[-85%]'}
+        ${open ? 'min-w-[243px]' : 'min-w-[96px]'}
+    `}>
+      <aside className={`
+        relative h-screen overflow-hidden 
+        transition-all duration-500 w-[85%] md:w-fit
+        ${active ? ' right-0' : 'right-[-85%]'}
+        ${open ? 'w-[243px]' : 'w-[96px]'}
+      `}>
+        <div className={`
+           z-30
+          md:top-0 md:right-0 w-[85%] md:w-fit
+        ${active ? ' right-0' : 'right-[-85%]'}
+          overflow-hidden p-[24px] h-full flex flex-col justify-between items-start fixed 
+          border-0 border-l border-l-[#EFEFEF] bg-[#FFF]
+          transition-all duration-700
+          ${open ? 'md:w-[243px]' : 'md:w-[96px]'}
+        `}>
+          <div className="w-full">
+            <HeadMd open={open} setOpen={setOpen} />
+            <HeadSm setActive={setActive} />
+            <Links open={open} />
+          </div>
+          <div className={`w-full justify-center overflow-hidden transition-all duration-500 ${open ? '!max-w-full' : '!max-w-0'}`}>
+            <Button
+              variant="text"
+              className="!flex !w-fit !items-center !justify-center !gap-[10px] !py-[8px] !px-[16px] !text-[#F17732] !text-[16px] !font-medium"
+            >
+              <LogoutOrangeP />
+              خروج از حساب
+            </Button>
+          </div>
         </div>
-        <div className="w-full flex justify-center">
-          <Button
-            variant="text"
-            className="!flex !w-fit !items-center !justify-center !gap-[10px] !py-[8px] !px-[16px] !text-[#F17732] !text-[16px] !font-medium"
-          >
-            <LogoutOrangeP />
-            خروج از حساب
-          </Button>
-        </div>
-      </div>
-    </aside>
+      </aside>
+    </div>
   )
 }
 

components/layoutPanel/userDetail/Activities.js

@@ -2,8 +2,8 @@ import WarnP from "@/components/icons/WarnP"
 
 function Activities({ data }) {
     return (
-        <div className="w-full mt-[40px]">
-            <p className="text-[#525252] text-[16px] font-bold">فعالیت های امروز</p>
+        <div className="w-full mt-[16px] sm:mt-[24px] md:mt-[32px] lg:mt-[40px]">
+            <p className="text-[#525252] text-[14px] md:text-[16px] font-bold">فعالیت های امروز</p>
             <ul className="flex flex-col justify-start w-full mt-[24px]">
                 {data.todays_activities.map((item, idx) => (
                     <li
@@ -20,7 +20,7 @@ function Activities({ data }) {
                             <p className="text-[#7E7E7E] text-[12px] font-normal">{item.time}</p>
                         </div>
                         {data.todays_activities.length > idx + 1 && (
-                            <span className="block h-px w-full bg-[#EFEFEF] px-[13px] my-[24px]"></span>
+                            <span className="block h-px w-full bg-transparent md:bg-[#EFEFEF] px-[13px] my-[16px] md:my-[20px] lg:my-[24px]"></span>
                         )}
                     </li>
                 ))}

components/layoutPanel/userDetail/index.js

@@ -4,9 +4,9 @@ import Activities from "./Activities";
 
 function UserDetail({ data }) {
     return (
-        <div className="min-w-[360px] h-full opacity-page">
+        <div className="hidden xl:flex min-w-[332px] h-full opacity-page">
             <div
-                className="min-w-[360px] p-[24px] border-0 border-r border-r-[#EFEFEF] h-full items-start fixed top-0 left-0
+                className="min-w-[332px] p-[24px] border-0 border-r border-r-[#EFEFEF] h-full items-start fixed top-0 left-0
                 bg-[#FFF] py-[40px] px-[16px]"
             >
                 <Head data={data} />