From d1f289bdca79baa21716bcb21302eb275c2e407b Mon Sep 17 00:00:00 2001 From: Ehsan Date: Fri, 13 Sep 2024 02:19:47 +0330 Subject: [PATCH] add open/close to sidebar & responsive sidebar & head & page dashboard and user account --- app/component/CustomTable.js | 2 +- app/globals.css | 4 + app/panel/(layout)/add-doctor/page.js | 5 +- app/panel/(layout)/layout.js | 8 +- components/icons/AddTimeP.js | 6 +- components/icons/ArrowBottomP.js | 2 +- components/icons/ArrowLeftBlueP.js | 2 +- components/icons/ArrowRightP.js | 10 ++ components/icons/ClockP.js | 4 +- components/icons/DoubleArrowLeftP.js | 7 ++ components/icons/ExportP.js | 6 +- components/icons/LogoPanel.js | 2 +- components/icons/LogoPanelHead.js | 17 +++ components/icons/PlusBlueP.js | 4 +- components/layoutPanel/header/Icons.js | 35 +++++- components/layoutPanel/header/MenuProfile.js | 10 +- components/layoutPanel/header/Search.js | 3 +- components/layoutPanel/header/index.js | 16 +-- .../header/sideButton/ButtonMenu.js | 22 ++++ .../layoutPanel/header/sideButton/index.js | 15 +++ components/layoutPanel/sidebar/HeadMd.js | 28 +++++ components/layoutPanel/sidebar/HeadSm.js | 22 ++++ components/layoutPanel/sidebar/Links.js | 17 +-- components/layoutPanel/sidebar/index.js | 69 +++++++---- .../layoutPanel/userDetail/Activities.js | 6 +- components/layoutPanel/userDetail/index.js | 4 +- components/panel/ContentText.js | 2 +- components/panel/dashboard/Cards.js | 4 +- .../panel/dashboard/amountOfIncome/Chart.js | 4 +- .../panel/dashboard/amountOfIncome/Head.js | 2 +- components/panel/dashboard/index.js | 4 + components/panel/dashboard/list/ColTable.js | 53 +++++++++ components/panel/dashboard/list/Table.js | 107 +++++++++--------- components/panel/dashboard/list/index.js | 12 +- components/panel/turns/List.js | 75 ++++++++++++ components/panel/turns/index.js | 7 +- components/panel/userAccount/Head.js | 4 +- components/panel/userAccount/form/index.js | 5 +- components/panel/userAccount/index.js | 6 +- data/information.json | 10 +- 40 files changed, 481 insertions(+), 140 deletions(-) create mode 100644 components/icons/ArrowRightP.js create mode 100644 components/icons/DoubleArrowLeftP.js create mode 100644 components/icons/LogoPanelHead.js create mode 100644 components/layoutPanel/header/sideButton/ButtonMenu.js create mode 100644 components/layoutPanel/header/sideButton/index.js create mode 100644 components/layoutPanel/sidebar/HeadMd.js create mode 100644 components/layoutPanel/sidebar/HeadSm.js create mode 100644 components/panel/dashboard/list/ColTable.js create mode 100644 components/panel/turns/List.js diff --git a/app/component/CustomTable.js b/app/component/CustomTable.js index 5ccbefb..33e7fae 100644 --- a/app/component/CustomTable.js +++ b/app/component/CustomTable.js @@ -3,7 +3,7 @@ import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from function CustomTable({ tableHead, zeroRadius, centerTable, children }) { return ( + ) } diff --git a/app/panel/(layout)/layout.js b/app/panel/(layout)/layout.js index a9c874f..f5e0850 100644 --- a/app/panel/(layout)/layout.js +++ b/app/panel/(layout)/layout.js @@ -5,17 +5,23 @@ import Sidebar from "@/components/layoutPanel/sidebar"; import Information from '@/data/information.json'; import UserDetail from "@/components/layoutPanel/userDetail"; import { usePathname } from "next/navigation"; +import { useState } from "react"; function LayoutPanel({ children }) { const pathname = usePathname(); + const [active, setActive] = useState(false); return (
- +
diff --git a/components/icons/AddTimeP.js b/components/icons/AddTimeP.js index 11568a2..9e8b4ad 100644 --- a/components/icons/AddTimeP.js +++ b/components/icons/AddTimeP.js @@ -1,9 +1,9 @@ function AddTimeP() { return ( - - - + + + ) } diff --git a/components/icons/ArrowBottomP.js b/components/icons/ArrowBottomP.js index de64a65..074967d 100644 --- a/components/icons/ArrowBottomP.js +++ b/components/icons/ArrowBottomP.js @@ -1,7 +1,7 @@ function ArrowBottomP() { return ( - + ) } diff --git a/components/icons/ArrowLeftBlueP.js b/components/icons/ArrowLeftBlueP.js index 4792bff..15e535b 100644 --- a/components/icons/ArrowLeftBlueP.js +++ b/components/icons/ArrowLeftBlueP.js @@ -1,6 +1,6 @@ function ArrowLeftBlueP() { return ( - + ) diff --git a/components/icons/ArrowRightP.js b/components/icons/ArrowRightP.js new file mode 100644 index 0000000..d26b26b --- /dev/null +++ b/components/icons/ArrowRightP.js @@ -0,0 +1,10 @@ +function ArrowRightP() { + return ( + + + + + ) +} + +export default ArrowRightP \ No newline at end of file diff --git a/components/icons/ClockP.js b/components/icons/ClockP.js index 3ec63b1..aa1a902 100644 --- a/components/icons/ClockP.js +++ b/components/icons/ClockP.js @@ -1,8 +1,8 @@ function ClockP() { return ( - - + + ) } diff --git a/components/icons/DoubleArrowLeftP.js b/components/icons/DoubleArrowLeftP.js new file mode 100644 index 0000000..449aba3 --- /dev/null +++ b/components/icons/DoubleArrowLeftP.js @@ -0,0 +1,7 @@ +function DoubleArrowLeftP() { + return ( + + ) +} + +export default DoubleArrowLeftP \ No newline at end of file diff --git a/components/icons/ExportP.js b/components/icons/ExportP.js index 418e188..b3e59fb 100644 --- a/components/icons/ExportP.js +++ b/components/icons/ExportP.js @@ -1,9 +1,9 @@ function ExportP() { return ( - - - + + + ) } diff --git a/components/icons/LogoPanel.js b/components/icons/LogoPanel.js index dd2f1e7..5a72ccd 100644 --- a/components/icons/LogoPanel.js +++ b/components/icons/LogoPanel.js @@ -1,6 +1,6 @@ function LogoPanel() { return ( - + diff --git a/components/icons/LogoPanelHead.js b/components/icons/LogoPanelHead.js new file mode 100644 index 0000000..c31ad02 --- /dev/null +++ b/components/icons/LogoPanelHead.js @@ -0,0 +1,17 @@ +function LogoPanelHead() { + return ( + + + + + + + + + + + + ) +} + +export default LogoPanelHead \ No newline at end of file diff --git a/components/icons/PlusBlueP.js b/components/icons/PlusBlueP.js index eadfb47..d8f156c 100644 --- a/components/icons/PlusBlueP.js +++ b/components/icons/PlusBlueP.js @@ -1,8 +1,8 @@ function PlusBlueP() { return ( - - + + ) } diff --git a/components/layoutPanel/header/Icons.js b/components/layoutPanel/header/Icons.js index 09a7299..5ede38b 100644 --- a/components/layoutPanel/header/Icons.js +++ b/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 (
+ + ) +} + +export default ButtonMenu \ No newline at end of file diff --git a/components/layoutPanel/header/sideButton/index.js b/components/layoutPanel/header/sideButton/index.js new file mode 100644 index 0000000..1bbcddf --- /dev/null +++ b/components/layoutPanel/header/sideButton/index.js @@ -0,0 +1,15 @@ +import ButtonMenu from "./ButtonMenu" +import LogoPanelHead from "@/components/icons/LogoPanelHead" + +function SideButton({ setActive }) { + return ( +
+ +
+ +
+
+ ) +} + +export default SideButton \ No newline at end of file diff --git a/components/layoutPanel/sidebar/HeadMd.js b/components/layoutPanel/sidebar/HeadMd.js new file mode 100644 index 0000000..164383e --- /dev/null +++ b/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 ( +
+ + + + +
+ ) +} + +export default HeadMd \ No newline at end of file diff --git a/components/layoutPanel/sidebar/HeadSm.js b/components/layoutPanel/sidebar/HeadSm.js new file mode 100644 index 0000000..6eb9f9b --- /dev/null +++ b/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 ( +
+ +
+ +
+
+ ) +} + +export default HeadSm \ No newline at end of file diff --git a/components/layoutPanel/sidebar/Links.js b/components/layoutPanel/sidebar/Links.js index fdc9f02..5b9c713 100644 --- a/components/layoutPanel/sidebar/Links.js +++ b/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: }, @@ -20,25 +20,26 @@ function Links() { const pathname = usePathname(); return ( -
    +
      {list.map((item, idx) => ( -
    • +
      • diff --git a/components/layoutPanel/sidebar/index.js b/components/layoutPanel/sidebar/index.js index cd62311..796b4b7 100644 --- a/components/layoutPanel/sidebar/index.js +++ b/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 ( - + +
) } diff --git a/components/layoutPanel/userDetail/Activities.js b/components/layoutPanel/userDetail/Activities.js index 866a4d6..0f7baa4 100644 --- a/components/layoutPanel/userDetail/Activities.js +++ b/components/layoutPanel/userDetail/Activities.js @@ -2,8 +2,8 @@ import WarnP from "@/components/icons/WarnP" function Activities({ data }) { return ( -
-

فعالیت های امروز

+
+

فعالیت های امروز

    {data.todays_activities.map((item, idx) => (
  • {item.time}

{data.todays_activities.length > idx + 1 && ( - + )} ))} diff --git a/components/layoutPanel/userDetail/index.js b/components/layoutPanel/userDetail/index.js index bd4d563..07a91e8 100644 --- a/components/layoutPanel/userDetail/index.js +++ b/components/layoutPanel/userDetail/index.js @@ -4,9 +4,9 @@ import Activities from "./Activities"; function UserDetail({ data }) { return ( -
+
diff --git a/components/panel/ContentText.js b/components/panel/ContentText.js index f343bf8..e863628 100644 --- a/components/panel/ContentText.js +++ b/components/panel/ContentText.js @@ -1,6 +1,6 @@ function ContentText({ children, text }) { return ( -
+

{text}

{children}
diff --git a/components/panel/dashboard/Cards.js b/components/panel/dashboard/Cards.js index d65c7ff..2511792 100644 --- a/components/panel/dashboard/Cards.js +++ b/components/panel/dashboard/Cards.js @@ -11,10 +11,10 @@ function Cards({ data }) { ]; return ( -
    +
      {list.map((item, idx) => (
    • diff --git a/components/panel/dashboard/amountOfIncome/Chart.js b/components/panel/dashboard/amountOfIncome/Chart.js index eeab733..4028db5 100644 --- a/components/panel/dashboard/amountOfIncome/Chart.js +++ b/components/panel/dashboard/amountOfIncome/Chart.js @@ -23,10 +23,10 @@ function Chart({ data }) { disableTicks: true }]} margin={{ - left: 80, + left: 60, right: 50, top: 10, - bottom: 30, + bottom: 60, }} sx={{ [`& .${lineElementClasses.root}`]: { diff --git a/components/panel/dashboard/amountOfIncome/Head.js b/components/panel/dashboard/amountOfIncome/Head.js index 3342748..2afb649 100644 --- a/components/panel/dashboard/amountOfIncome/Head.js +++ b/components/panel/dashboard/amountOfIncome/Head.js @@ -16,7 +16,7 @@ function Head() { return (
      -

      میزان درآمد

      +

      میزان درآمد