Как я могу создать ListItem (в React) в левом нижнем углу в следующем примере? ⇐ CSS

[Anonymous]

import * as React from 'react';
import { styled, useTheme } from '@mui/material/styles';
import Box from '@mui/material/Box';
import MuiDrawer from '@mui/material/Drawer';
import MuiAppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import List from '@mui/material/List';
import CssBaseline from '@mui/material/CssBaseline';
import Typography from '@mui/material/Typography';
import Divider from '@mui/material/Divider';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import HomeIcon from '@mui/icons-material/Home';
import SchoolIcon from '@mui/icons-material/School';
import ClassIcon from '@mui/icons-material/Class';

const drawerWidth = 240;
const icons = [, ,]

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 DrawerHeader = styled('div')(({ theme }) => ({
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
padding: theme.spacing(0, 1),
// necessary for content to be below app bar
...theme.mixins.toolbar,
}));

const AppBar = styled(MuiAppBar, {
shouldForwardProp: (prop) => prop !== 'open',
})(({ theme, open }) => ({
zIndex: theme.zIndex.drawer + 1,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
...(open && {
marginLeft: drawerWidth,
width: `calc(100% - ${drawerWidth}px)`,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
}),
}));

const Drawer = styled(MuiDrawer, { 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 MiniDrawer({children}) {
const theme = useTheme();
const [open, setOpen] = React.useState(false);

const handleDrawerOpen = () => {
setOpen(true);
};

const handleDrawerClose = () => {
setOpen(false);
};

return (








NOPF






{theme.direction === 'rtl' ? : }




{['Home', 'Klasse', 'Schule'].map((text, index) => (



{icons[index]}




))}














{children}


);
}

Это мой код. Это ящик (слегка измененный мной) с веб-сайта MaterialUI (https://next.mui.com/material-ui/react-drawer/#anchor). Важным является только возврат в функции MiniDrawer (я хотел предоставить вам полный код, чтобы вы могли понять все это). Я хотел создать еще один элемент ListItem, но этот должен находиться в левом нижнем углу, а не как остальные в левом верхнем углу, как вы видите на этом рисунке:
Фото 1
Но, как вы можете видеть, в тот момент, когда я навожу курсор на высоту ListItem, я могу щелкнуть по нему (это не должно быть возможно). Вот так должно быть:
Фото 2
Первое, что я попробовал, как вы можете видеть в первой строке кода, это вручную объявить maxWidth, но это не очень хорошее решение, потому что, когда ширина устройства другая (например: Iphone, Ipad, ...), максимальная ширина также меняется.










Подробнее здесь: https://stackoverflow.com/questions/782 ... -following