wcz-layout 5.2.0 → 5.2.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "wcz-layout",
   "license": "MIT",
   "author": "Dalibor Homola",
-  "version": "5.2.0",
+  "version": "5.2.2",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {

package/src/components/Layout.tsx

@@ -3,7 +3,7 @@ import { AppBar as MuiAppBar, AppBarProps as MuiAppBarProps, Box, Chip, CssBasel
 import { csCZ, enUS } from '@mui/material/locale';
 import { createTheme, styled, ThemeProvider } from '@mui/material/styles';
 import { useIsFetching, useIsMutating } from '@tanstack/react-query';
-import React, { Fragment, useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import { LeftDrawerItem } from '../models/LeftDrawerItem';
@@ -96,26 +96,17 @@ export default function Layout(props: LayoutProps) {
 
     return (
         <ThemeProvider theme={theme}>
-            <Box sx={{ display: 'flex', position: "sticky" }}>
+            <Box sx={{ display: 'flex', position: 'sticky' }}>
                 <CssBaseline />
                 <AppBar position="fixed" open={leftDrawerOpen}>
                     <Toolbar>
-                        <IconButton color="inherit" onClick={toggleDrawerOpen} edge="start" sx={{ marginRight: 2, ...(leftDrawerOpen && { display: 'none' }) }}>
+                        <IconButton color="inherit" aria-label="menu" name="menu" onClick={toggleDrawerOpen} edge="start" sx={{ marginRight: 2, ...(leftDrawerOpen && { display: 'none' }) }} >
                             <Menu />
                         </IconButton>
 
                         <Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1 }}>{title}</Typography>
 
-                        {isDevelopment &&
-                            <Chip color="secondary" sx={{ mr: 1.5 }}
-                                label={
-                                    <Fragment>
-                                        <Typography sx={{ display: { xs: 'none', sm: 'block' } }}>Development</Typography>
-                                        <Typography sx={{ display: { xs: 'block', sm: 'none' } }}>QAS</Typography>
-                                    </Fragment>
-                                }
-                            />
-                        }
+                        {isDevelopment && <Chip color="secondary" sx={{ mr: 1.5 }} label="Development" />}
 
                         <AccountMenu mode={mode} setMode={setMode} user={user} />
                     </Toolbar>
@@ -123,7 +114,7 @@ export default function Layout(props: LayoutProps) {
 
                 <LeftDrawer appVersion={appVersion} items={leftDrawerItems} drawerOpen={leftDrawerOpen} setDrawerOpen={setLeftDrawerOpen} />
 
-                <Box component="main" sx={{ flexGrow: 1 }}>
+                <Box component="main" sx={{ flex: 1, overflow: "auto" }}>
                     <DrawerHeader />
                     {authorized ? children : <CenteredBox label={t("Layout.Unauthorized")!} />}
                 </Box>

package/src/components/layout/AccountMenu.tsx

@@ -115,7 +115,7 @@ export default function AccountMenu(props: AccountMenuProps) {
 
     return (
         <Fragment>
-            <IconButton onClick={openMenu} color="inherit" aria-label="open app settings" edge="end" ref={accountButtonElement}>
+            <IconButton color="inherit" aria-label="account" name="account" onClick={openMenu} edge="end" ref={accountButtonElement}>
                 {user.name ?
                     <Avatar sx={{ bgcolor: 'white', color: grey[800], width: 32, height: 32, }}>
                         <Typography variant="subtitle2" sx={{ fontWeight: 'bold', lineHeight: 0 }}>

package/src/components/layout/LeftDrawer.tsx

@@ -1,5 +1,5 @@
 import { ChevronLeft, ChevronRight } from '@mui/icons-material';
-import { Box, Divider, Drawer as MuiDrawer, IconButton, List, ListItem, ListItemIcon, ListItemText, SwipeableDrawer, Typography } from '@mui/material';
+import { Box, Divider, Drawer as MuiDrawer, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText, SwipeableDrawer, Typography } from '@mui/material';
 import { CSSObject, styled, Theme, useTheme } from '@mui/material/styles';
 import { Fragment, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -84,11 +84,13 @@ export default function LeftDrawer(props: LeftDrawerProps) {
     const menuItems = (
         <List>
             {items.filter(item => !item.hidden).map(item =>
-                <ListItem key={item.path} button selected={location.pathname === item.path} onClick={handleMenuItemClick(item.path)}>
-                    <ListItemIcon>
-                        {item.icon}
-                    </ListItemIcon>
-                    <ListItemText primary={t(item.title)} />
+                <ListItem key={item.path} disablePadding sx={{ display: 'block' }} onClick={handleMenuItemClick(item.path)}>
+                    <ListItemButton selected={location.pathname === item.path} >
+                        <ListItemIcon>
+                            {item.icon}
+                        </ListItemIcon>
+                        <ListItemText primary={t(item.title)} />
+                    </ListItemButton>
                 </ListItem>
             )}
         </List>