web-base/react/admin-panel/src/elements/sidebar.js

import React, {useCallback, useContext, useEffect, useState} from 'react';
import {Link, useNavigate} from "react-router-dom";
import {LocaleContext} from "shared/locale";
import {
    Box, CssBaseline, Divider,
    IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText,
    Select, Drawer,
    styled, MenuItem, Menu,
} from "@mui/material";
import { Dropdown } from '@mui/base/Dropdown';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
import ProfilePicture from "shared/elements/profile-picture";
import {Dns, Groups, People, QueryStats, Security, Settings, Route, ArrowBack, Translate} from "@mui/icons-material";
import useCurrentPath from "shared/hooks/current-path";

const drawerWidth = 240;

const ProfileLink = styled(Link)((props) => ({
    "& > div": {
        width: 30,
        height: 30,
        justifySelf: "center",
    },
    color: "inherit",
    fontWeight: "bold",
    marginTop: props.theme.spacing(1),
    display: "grid",
    gridTemplateColumns: "35px auto",
    "& > span": {
        alignSelf: "center",
        marginLeft: props.theme.spacing(1)
    },
}));

const DrawerHeader = styled('div')(({ theme }) => ({
    display: 'flex',
    alignItems: 'center',
    justifyContent: "flex-start",
    padding: theme.spacing(0, 1),
    ...theme.mixins.toolbar,
    "& > button": {
        display: 'flex',
        marginLeft: "auto",
    },
    "& > img": {
        width: 30,
        height: 30,
    },
    "& > span": {
        marginLeft: theme.spacing(2),
        fontSize: "1.5em",
    }
}));

const openedMixin = (theme) => ({
    width: drawerWidth,
    transition: theme.transitions.create('width', {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.enteringScreen,
    }),
    overflowX: 'hidden',
});

const closedMixin = (theme) => ({
    transition: theme.transitions.create('width', {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.leavingScreen,
    }),
    overflowX: 'hidden',
    width: `calc(${theme.spacing(7)} + 1px)`,
    [theme.breakpoints.up('sm')]: {
        width: `calc(${theme.spacing(8)} + 1px)`,
    },
});

const StyledDrawer = styled(Drawer, { shouldForwardProp: (prop) => prop !== 'open' })(
    ({ theme, open }) => ({
        width: drawerWidth,
        flexShrink: 0,
        whiteSpace: 'nowrap',
        boxSizing: 'border-box',
        ...(open && {
            ...openedMixin(theme),
            '& .MuiDrawer-paper': openedMixin(theme),
        }),
        ...(!open && {
            ...closedMixin(theme),
            '& .MuiDrawer-paper': closedMixin(theme),
        }),
    }),
);

export default function Sidebar(props) {

    const api = props.api;
    const showDialog = props.showDialog;
    const {translate: L, currentLocale, setLanguageByCode} = useContext(LocaleContext);
    const [languages, setLanguages] = useState(null);
    const [fetchLanguages, setFetchLanguages] = useState(true);
    const [drawerOpen, setDrawerOpen] = useState(window.screen.width >= 1000);
    const [anchorEl, setAnchorEl] = useState(null);
    const navigate = useNavigate();
    const currentPath = useCurrentPath();

    const onLogout = useCallback(() => {
        api.logout().then(obj => {
            if (obj.success) {
                document.location = "/admin";
            } else {
                showDialog("Error logging out: " + obj.msg, "Error logging out");
            }
        });
    }, [api, showDialog]);

    const onSetLanguage = useCallback((code) => {
        setLanguageByCode(api, code).then((res) => {
            if (!res.success) {
                showDialog(res.msg, L("general.error_language_set"));
            }
        });
    }, [api, showDialog]);

    const onFetchLanguages = useCallback((force = false) => {
        if (force || fetchLanguages) {
            setFetchLanguages(false);
            api.getLanguages().then((res) => {
                if (res.success) {
                    setLanguages(res.languages);
                } else {
                    setLanguages({});
                    showDialog(res.msg, L("general.error_language_fetch"));
                }
            });
        }
    }, [api, fetchLanguages, showDialog]);

    useEffect(() => {
        onFetchLanguages();
    }, []);

    const menuItems = {
        "dashboard": {
            "name": "admin.dashboard",
            "icon": <QueryStats />
        },
        "users": {
            "name": "admin.users",
            "icon": <People />
        },
        "groups": {
            "name": "admin.groups",
            "icon": <Groups />
        },
        "routes": {
            "name": "admin.page_routes",
            "icon": <Route />
        },
        "settings": {
            "name": "admin.settings",
            "icon": <Settings />
        },
        "permissions": {
            "name": "admin.acl",
            "icon": <Security />
        },
        "logs": {
            "name": "admin.logs",
            "icon": <Dns />
        },
    };

    const NavbarItem = (props) => <ListItem disablePadding sx={{ display: 'block' }}>
        <ListItemButton onClick={props.onClick} selected={props.active} sx={{
                    minHeight: 48,
                    justifyContent: drawerOpen ? 'initial' : 'center',
                    px: 2.5,
                }}>
            <ListItemIcon sx={{
                    minWidth: 0,
                    mr: drawerOpen ? 2 : 'auto',
                    justifyContent: 'center',
                }}>
                {props.icon}
            </ListItemIcon>
            <ListItemText primary={L(props.name)} sx={{ display: drawerOpen ? "block" : "none" }} />
        </ListItemButton>
    </ListItem>

    let li = [];
    for (const [id, menuItem] of Object.entries(menuItems)) {
        const match= /^\/admin\/(.*)$/.exec(currentPath);
        const active = match?.length >= 2 && match[1] === id;
        li.push(<NavbarItem key={id} {...menuItem} active={active} onClick={() => navigate(`/admin/${id}`)} />);
    }

    li.push(<NavbarItem key={"logout"} name={"general.logout"} icon={<ArrowBack />} onClick={onLogout}/>);

    return <Box sx={{ display: 'flex' }}>
        <CssBaseline />
        <StyledDrawer variant={"permanent"} open={drawerOpen}>
            <DrawerHeader>
                {drawerOpen && <>
                    <img src={"/img/icons/logo.png"} alt={"Logo"} />
                    <span>WebBase</span>
                </>}
                <IconButton onClick={() => setDrawerOpen(!drawerOpen)}>
                    {drawerOpen ? <ChevronLeftIcon/> : <ChevronRightIcon/>}
                </IconButton>
            </DrawerHeader>
            <Divider/>
            <ListItem sx={{display: 'block'}}>
                <Box sx={{opacity: drawerOpen ? 1 : 0}}>{L("account.logged_in_as")}:</Box>
                <ProfileLink to={"/admin/profile"}>
                    <ProfilePicture user={api.user}/>
                    {drawerOpen && <span>{api.user?.name || L("account.not_logged_in")}</span>}
                </ProfileLink>
            </ListItem>
            <Divider/>
            <List>
                {li}
            </List>
            <Divider/>
            <ListItem sx={{display: 'block'}}>
                { drawerOpen ?
                    <Select native value={currentLocale} size={"small"} fullWidth={true}
                            onChange={e => onSetLanguage(e.target.value)}>
                        {Object.values(languages || {}).map(language =>
                            <option key={language.code} value={language.code}>
                                {language.name}
                            </option>)
                        }
                    </Select>
                    : <ListItemButton sx={{
                        minHeight: 48,
                        justifyContent: 'center',
                        px: 2.5,
                    }}>
                        <Dropdown>
                            <ListItemIcon onClick={e => setAnchorEl(e.currentTarget)} sx={{
                                minWidth: 0,
                                mr: 'auto',
                                justifyContent: 'center',
                            }}>
                                <Translate />
                            </ListItemIcon>
                            <Menu open={!!anchorEl}
                                  anchorEl={anchorEl}
                                  onClose={() => setAnchorEl(null)}
                                  onClick={() => setAnchorEl(null)}
                                  transformOrigin={{ horizontal: 'left', vertical: 'bottom' }}
                                  anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}>
                                {Object.values(languages || {}).map(language =>
                                    <MenuItem key={language.code} onClick={() => onSetLanguage(language.code)}>
                                        {language.name}
                                    </MenuItem>)
                                }
                            </Menu>
                        </Dropdown>
                    </ListItemButton>
                }
            </ListItem>
        </StyledDrawer>
        <Box component="main" sx={{flexGrow: 1, p: 1}}>
            {props.children}
        </Box>
    </Box>
}