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

design dashboard comments & messages & modals

Browse Source
This commit is contained in:
Ehsan
2024-09-04 03:00:36 +03:30
parent bc47663002
commit 52a745fcb8
34 changed files with 669 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/layout/index.js
+3 -1
View File
@@ -9,7 +9,7 @@ import "aos/dist/aos.css";
import { useEffect } from "react";
import Sidebar from './sidebar';
function Layout({ children, title, name, disableFooter, isSidebar, user }) {
function Layout({ children, title, name, disableFooter, isSidebar, user, value, setValue }) {
useEffect(() => {
Aos.init({ duration: 1000 });
@@ -31,6 +31,8 @@ function Layout({ children, title, name, disableFooter, isSidebar, user }) {
{isSidebar && (
<Sidebar
user={user}
value={value}
setValue={setValue}
/>
)}
{children}
components/layout/sidebar/List.js
+12 -15
View File
@@ -5,20 +5,17 @@ import MessageD from "@/components/icons/MessageD";
import ProfileD from "@/components/icons/ProfileD";
import NotificationD from "@/components/icons/NotificationD";
import { Button } from "@mui/material";
import { useState } from "react";
const listMenu = [
{ name: 'حساب کاربری', icon: <ProfileD /> },
{ name: 'نوبت های من', icon: <CalndarD /> },
{ name: 'تراکنش های من', icon: <CardD /> },
{ name: 'نظرات من', icon: <MessageD /> },
{ name: 'پیام ها', icon: <NotificationD /> },
{ name: 'خروج', icon: <LogoutD /> },
]
function List({ value, setValue }) {
function List() {
const [active, setActive] = useState(0);
const listMenu = [
{ name: 'حساب کاربری', icon: <ProfileD active={value === 0} /> },
{ name: 'نوبت های من', icon: <CalndarD active={value === 1} /> },
{ name: 'تراکنش های من', icon: <CardD active={value === 2} /> },
{ name: 'نظرات من', icon: <MessageD active={value === 3} /> },
{ name: 'پیام ها', icon: <NotificationD active={value === 4} /> },
{ name: 'خروج', icon: <LogoutD active={value === 5} /> },
];
return (
<ul className="flex flex-col items-start justify-start w-full">
@@ -31,17 +28,17 @@ function List() {
className={`!flex !py-[24px] hover:!bg-transparent !rounded-none !w-full before:!rounded-[100px]
!items-center !justify-start !gap-[8px] !relative before:!absolute before:!right-0
before:!top-1/2 before:!-translate-y-1/2 before:!h-[40px] before:!w-[2px]
${active === idx ?
${value === idx ?
'before:!bg-[#5559CE]' :
'before:!bg-transparent'
}`}
variant=""
onClick={() => setValue(idx)}
>
{item.icon}
<p
className={`
text-[16px]
${active === idx ? 'text-[#5559CE] font-bold' : 'text-[#7E7E7E] font-normal'}
${value === idx ? 'text-[#5559CE] font-bold' : 'text-[#7E7E7E] font-normal'}
`}
>{item.name}</p>
</Button>
components/layout/sidebar/index.js
+29 -10
View File
@@ -1,17 +1,36 @@
import { useState } from "react"
import Head from "./Head"
import List from "./List"
function Sidebar({ user }) {
function Sidebar({ user, value, setValue }) {
const [open, setOpen] = useState(false);
return (
<aside
className="h-fit lg:h-screen w-full lg:w-[39%]"
>
<div className="sticky pt-[10px] pb-[26px] bg-[#FFF] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px]
min-w-[288px] top-[calc(12px_+_58px_+_32px)] sm:top-[calc(21px_+_58px_+_45px)] md:top-[calc(30px_+_58px_+_58px)] lg:top-[calc(40px_+_58px_+_78px)]">
<Head user={user} />
<List user={user} />
</div>
</aside>
// ${open ? 'lg:w-[39%]' : 'min-w-[80px]'}
<div className="flex-1 w-[28%]">
<aside
// className={`
// flex-1 overflow-hidden lg:w-[39%] w-full
// `}
className="
sticky top-[calc(12px_+_58px_+_32px)] sm:top-[calc(21px_+_58px_+_45px)] md:top-[calc(30px_+_58px_+_58px)] lg:top-[calc(40px_+_58px_+_78px)]"
>
<div className="
pt-[10px] pb-[26px] bg-[#FFF] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px]
">
<Head user={user} />
<List
user={user}
value={value}
setValue={setValue}
/>
</div>
</aside>
</div>
)
}