Scribd
Upload
5 views3 pages

Side Av

The document defines a React component called 'SideNav' that implements a sidebar navigation for a web application using Next.js and Material-UI. It fetches dynamic menu items from an API and displays them in a scrollable sidebar, which adapts its layout based on screen size. The component utilizes hooks like useEffect for data fetching and useMemo for optimizing rendering based on state changes.

Uploaded by

fapebix297
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views3 pages

Side Av

The document defines a React component called 'SideNav' that implements a sidebar navigation for a web application using Next.js and Material-UI. It fetches dynamic menu items from an API and displays them in a scrollable sidebar, which adapts its layout based on screen size. The component utilizes hooks like useEffect for data fetching and useMemo for optimizing rendering based on state changes.

Uploaded by

fapebix297
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

import NextLink from "next/link";

import { usePathname } from "next/navigation";


import PropTypes from "prop-types";
import ArrowTopRightOnSquareIcon from
"@heroicons/react/24/solid/ArrowTopRightOnSquareIcon";
import ChevronUpDownIcon from "@heroicons/react/24/solid/ChevronUpDownIcon";
import { Box, Button, Divider, Drawer, Stack, SvgIcon, Typography, useMediaQuery }
from "@mui/material";
import { Logo } from "src/components/logo";
import { Scrollbar } from "src/components/scrollbar";
import { getSections, items } from "./config";
import { SideNavItem } from "./side-nav-item";
import NextImage from "next/image";
import React, { useMemo, useState } from "react";
import { DashboardSidebarSection } from "./dashboard-sidebar-section";
import { useRouter } from "next/router";
import { useSelector } from "react-redux";
import menuapi from "src/services/api/menu";
import { useEffect } from "react";

export const SideNav = (props) => {


//my code
const [dynamicMenus, setDynamicMenus] = useState([]);
// const dynamicicon = getSections(notificationNumber, dynamicMenus);

console.log("Respone " , dynamicMenus)


useEffect(() => {
const fetchMenus = async () => {
try {
const response = await menuapi.getAllMenuApi();
setDynamicMenus(response.data.data || []);
} catch (error) {
console.error('Failed to fetch menus:', error);
}
};

fetchMenus();
}, []);

//end
const router = useRouter();

const { notificationNumber } = useSelector((state) => state.overview);

const { open, onClose } = props;


const pathname = usePathname();
const lgUp = useMediaQuery((theme) => theme.breakpoints.up("lg"));

const sections = useMemo(() => getSections(notificationNumber,dynamicMenus),


[notificationNumber,dynamicMenus]);

const content = (
<Scrollbar
sx={{
height: "100%",
"& .simplebar-content": {
height: "100%",
},
"& .simplebar-content-wrapper": {
overflow: "auto !important",
},
"& .simplebar-scrollbar:before": {
background: "neutral.400",
},
}}
>
<Box
sx={{
display: "flex",
flexDirection: "column",
height: "100%",
}}
>
<Box sx={{ p: 2, pl: 6 }}>
<Box
component={NextLink}
href="/"
sx={{
display: "inline-flex",
}}
>
<NextImage
src="/assets/logos/sanad-logo.png"
height={70}
width={180}
style={{
objectFit: "contain",
}}
priority={true}
id="app-logo"
alt="Logo"
/>
</Box>
</Box>
<Divider sx={{ borderColor: "neutral.700" }} />
<Box
component="nav"
sx={{
flexGrow: 1,
px: 2,
py: 3,
}}
>
{sections.map((section, idx) => (
<DashboardSidebarSection key={idx} path={router.asPath}
title={section.title || ""} {...section} />
))}
</Box>
<Divider sx={{ borderColor: "neutral.700" }} />
</Box>
</Scrollbar>
);

if (lgUp) {
return (
<Drawer
anchor="left"
open
PaperProps={{
sx: {
backgroundColor: "neutral.800",
color: "common.white",
width: 280,
},
}}
variant="permanent"
>
{content}
</Drawer>
);
}

return (
<Drawer
anchor="left"
onClose={onClose}
open={open}
PaperProps={{
sx: {
backgroundColor: "neutral.800",
color: "common.white",
width: 280,
},
}}
sx={{ zIndex: (theme) => theme.zIndex.appBar + 100 }}
variant="temporary"
>
{content}
</Drawer>
);
};

SideNav.propTypes = {
onClose: PropTypes.func,
open: PropTypes.bool,
};

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy