design sidebar & head layout & page dashboard

2024-09-10 02:00:41 +03:30
parent 60749d3b8c
commit dffdab7139
41 changed files with 1350 additions and 170 deletions
@@ -0,0 +1,47 @@
+import CalendarP from "@/components/icons/CalendarP";
+import CategoryP from "@/components/icons/CategoryP";
+import ProfileAddP from "@/components/icons/ProfileAddP";
+import ProfileCircleP from "@/components/icons/ProfileCircleP";
+import { Button } from "@mui/material";
+import { useState } from "react";
+
+function Links() {
+
+    const list = [
+        { name: 'دشبورد', icon: <CategoryP /> },
+        { name: 'حساب کاربری', icon: <ProfileCircleP /> },
+        { name: 'اضافه کردن پزشک', icon: <ProfileAddP /> },
+        { name: 'نوبت ها', icon: <CalendarP /> }
+    ];
+
+    const [value, setValue] = useState(0);
+
+    return (
+        <ul className="flex flex-col gap-[32px] mt-[54px]">
+            {list.map((item, idx) => (
+                <li
+                    key={idx}
+                    className="p-[8px]"
+                >
+                    <Button
+                        fullWidth
+                        variant="text"
+                        onClick={() => setValue(idx)}
+                        className={`
+                            !p-[8px] !flex !items-center !justify-start !gap-[8px] !text-[16px] !rounded-[8px] !transition-all !duration-500
+                            ${idx === value ? '!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}
+                    </Button>
+                </li>
+            ))}
+        </ul>
+    )
+}
+
+export default Links
@@ -0,0 +1,30 @@
+import LogoutOrangeP from "@/components/icons/LogoutOrangeP";
+import LogoPanel from "@/components/icons/LogoPanel";
+import { Button } from "@mui/material";
+import Links from "./Links";
+
+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>
+          <div className="flex justify-center">
+            <LogoPanel />
+          </div>
+          <Links />
+        </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>
+  )
+}
+
+export default Sidebar