bananas-commerce-admin
Version:
What's this, an admin for apes?
55 lines • 2.8 kB
JavaScript
import React, { memo } from "react";
import { useNavigate } from "react-router-dom";
import Box from "@mui/material/Box";
import Drawer from "@mui/material/Drawer";
import Stack from "@mui/material/Stack";
import { styled } from "@mui/material/styles";
import { useMediaQuery } from "@mui/system";
import Branding from "./Branding";
import NavRailRoutes from "./NavRailRoutes";
import User from "./User";
const RAIL_WIDTH = 80;
const RAIL_HEIGHT = 80;
const StyledDrawer = styled(Drawer)(({ theme }) => ({
"& .MuiDrawer-paper": {
backgroundColor: theme.palette.mode === "light" ? theme.palette.primary.main : theme.palette.primary.dark,
color: theme.palette.primary.contrastText,
},
}));
export const NavRail = ({ navigation, logo, title, subtitle, version }) => {
const navigate = useNavigate();
const navigateHome = () => navigate("/", { replace: true });
const isHorizontal = useMediaQuery("(max-width:640px)"); // Switch layout based on screen size
return (React.createElement(StyledDrawer, { anchor: isHorizontal ? "bottom" : "left", elevation: 0, hideBackdrop: true, PaperProps: {
sx: {
bgcolor: "transparent",
borderRight: { sm: "unset" },
borderBottom: { xs: "unset" },
},
className: "BananasNavRail-paper",
}, sx: {
flexShrink: 0,
whiteSpace: "nowrap",
boxSizing: "border-box",
width: { xs: "100%", sm: RAIL_WIDTH },
height: { xs: 0, sm: "100%" },
"& .MuiDrawer-paper": {
width: { xs: "100%", sm: RAIL_WIDTH },
height: { xs: RAIL_HEIGHT, sm: "100%" },
display: "flex",
flexDirection: { xs: "row", sm: "column" }, // Responsive flex direction
},
}, variant: "permanent" },
React.createElement(Stack, { direction: { xs: "row", sm: "column" }, gap: 0, justifyContent: "center", sx: {
flexGrow: { xs: 1, sm: 1 },
flexShrink: { xs: 1, sm: 0 },
} },
!isHorizontal && ( // TODO: Actually support horizontal layout
React.createElement(Branding, { fullWidth: !isHorizontal, logo: logo, subtitle: subtitle, title: title, version: version, onClick: navigateHome })),
React.createElement(Stack, { direction: { xs: "row", sm: "column" }, gap: 0, mt: { xs: 0, sm: 2 }, sx: { overflowY: { xs: "auto", sm: "none" } } },
React.createElement(NavRailRoutes, { navigation: navigation })),
React.createElement(Box, { sx: { ml: { xs: "auto", sm: "unset" }, mt: { xs: "unset", sm: "auto" } } },
React.createElement(User, null)))));
};
export default memo(NavRail);
//# sourceMappingURL=index.js.map