RMS/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

scroll app

Browse Source
This commit is contained in:
Amirhossein Mahmoodi
2024-07-13 15:48:27 +03:30
parent 7d864ccf6b
commit 594c551b5c
4 changed files with 15 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/(withAuth)/dashboard/layout.js
View File

@@ -1,14 +1,12 @@
import HeaderWithLogo from "@/components/layouts/dashboard/headerWithLogo";
import HeaderWithSidebar from "@/components/layouts/dashboard/headerWithSidebar";
import { Box, Stack } from "@mui/material";
import { Stack } from "@mui/material";
const Layout = ({ children }) => {
return (
<Stack>
<Stack sx={{ width: '100%', height: '100%' }}>
<HeaderWithLogo />
<Box>
<HeaderWithSidebar>{children}</HeaderWithSidebar>
</Box>
<HeaderWithSidebar>{children}</HeaderWithSidebar>
</Stack>
);
};

2
src/app/layout.js
View File

@@ -7,7 +7,7 @@ export const metadata = {
export default function RootLayout({ children }) {
return (
<html lang="fa" dir={"rtl"}>
<body style={{ height: "100vh" }}>
<body style={{ height: "100vh", width: '100vw' }}>
<TableSettingProvider>{children}</TableSettingProvider>
</body>
</html>

2
src/components/layouts/dashboard/headerWithLogo/index.jsx
View File

@@ -4,7 +4,7 @@ import HeaderBottom from "./HaederBottom";
const HeaderWithLogo = () => {
return (
<Stack>
<Stack sx={{ width: '100%', position: 'fixed', zIndex: 1200, background: '#fff' }}>
<HeaderTop />
<HeaderBottom />
</Stack>

15
src/components/layouts/dashboard/headerWithSidebar/index.jsx
View File

@@ -2,15 +2,16 @@
import SidebarMenu from "@/core/components/SidebarMenu";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import MenuIcon from "@mui/icons-material/Menu";
import { Box, Drawer, IconButton, Paper, styled, Toolbar } from "@mui/material";
import { Box, Drawer, IconButton, Paper, Stack, styled, Toolbar } from "@mui/material";
import MuiAppBar from "@mui/material/AppBar";
import { useState } from "react";
import HeaderMenu from "./HeaderMenu";
const drawerWidth = 300;
const Main = styled(Paper, { shouldForwardProp: (prop) => prop !== "open" })(({ theme, open }) => ({
const Main = styled(Stack, { shouldForwardProp: (prop) => prop !== "open" })(({ theme, open }) => ({
flexGrow: 1,
height: '100%',
transition: theme.transitions.create("margin", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
@@ -47,6 +48,7 @@ const DrawerHeader = styled("div")(({ theme }) => ({
alignItems: "center",
padding: theme.spacing(0, 1),
...theme.mixins.toolbar,
minHeight: '48px !important',
justifyContent: "flex-end",
}));
@@ -60,7 +62,7 @@ const HeaderWithSidebar = ({ children }) => {
setOpen(false);
};
return (
<Box sx={{ display: "flex" }}>
<Box sx={{ display: "flex", height: 'calc(100% - 163px)', width: '100%', mt: '163px' }}>
<AppBar sx={{ position: "fixed", top: "unset" }} elevation={0} open={open}>
<Toolbar variant="dense">
<IconButton
@@ -79,6 +81,7 @@ const HeaderWithSidebar = ({ children }) => {
</AppBar>
<Drawer
sx={{
height: '100%',
width: drawerWidth,
flexShrink: 0,
"& .MuiDrawer-paper": {
@@ -100,9 +103,11 @@ const HeaderWithSidebar = ({ children }) => {
</DrawerHeader>
<SidebarMenu />
</Drawer>
<Main elevation={0} open={open}>
<Main open={open} sx={{ height: '100%', width: '100%', overflow: 'hidden' }}>
<DrawerHeader />
{children}
<Box sx={{ height: '100%', width: '100%', overflowY: 'scroll', overflowX: 'hidden', }}>
{children}
</Box>
</Main>
</Box>
);