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/sidebar/HeadMd.js
+28
View File
@@ -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
+22
View File
@@ -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
+9 -8
View File
@@ -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
+46 -23
View File
@@ -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>
)
}