hamed/nobat724_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Ehsan
2024-09-13 02:19:47 +03:30
parent a1571bbb62
commit d1f289bdca
40 changed files with 481 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/layoutPanel/header/Icons.js
+32 -3
View File
@@ -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
+9 -1
View File
@@ -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
+2 -1
View File
@@ -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
+9 -7
View File
@@ -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
+22
View File
@@ -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
+15
View File
@@ -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