Skip to content

Commit

Permalink
fix small media issue (#56)
Browse files Browse the repository at this point in the history
* fix small media issue

* fixed sidebar for small devices

* Update package.json

---------

Co-authored-by: CodedThemes <[email protected]>
  • Loading branch information
ct-jahidhasan and phoenixcoded20 authored Feb 4, 2023
1 parent 7e255ec commit 8ae3eb6
Show file tree
Hide file tree
Showing 3 changed files with 10 additions and 13 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "berry-material-react-free",
"version": "3.3.0",
"version": "3.3.1",
"private": true,
"homepage": "https://berrydashboard.io/free",
"dependencies": {
Expand Down
11 changes: 2 additions & 9 deletions src/layout/MainLayout/index.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Outlet } from 'react-router-dom';

Expand Down Expand Up @@ -66,20 +65,14 @@ const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(({

const MainLayout = () => {
const theme = useTheme();
const matchDownMd = useMediaQuery(theme.breakpoints.down('lg'));

const matchDownMd = useMediaQuery(theme.breakpoints.down('md'));
// Handle left drawer
const leftDrawerOpened = useSelector((state) => state.customization.opened);
const dispatch = useDispatch();
const handleLeftDrawerToggle = () => {
dispatch({ type: SET_MENU, opened: !leftDrawerOpened });
};

useEffect(() => {
dispatch({ type: SET_MENU, opened: !matchDownMd });
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [matchDownMd]);

return (
<Box sx={{ display: 'flex' }}>
<CssBaseline />
Expand All @@ -100,7 +93,7 @@ const MainLayout = () => {
</AppBar>

{/* drawer */}
<Sidebar drawerOpen={leftDrawerOpened} drawerToggle={handleLeftDrawerToggle} />
<Sidebar drawerOpen={!matchDownMd ? leftDrawerOpened : !leftDrawerOpened} drawerToggle={handleLeftDrawerToggle} />

{/* main content */}
<Main theme={theme} open={leftDrawerOpened}>
Expand Down
10 changes: 7 additions & 3 deletions src/ui-component/cards/MainCard.js
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,13 @@ const MainCard = forwardRef(
}}
>
{/* card header and action */}
{title &&
( <CardHeader sx={headerSX} title={ darkTitle? <Typography variant="h3">{title}</Typography> : title } action={secondary} /> )
}
{title && (
<CardHeader
sx={headerSX}
title={darkTitle ? <Typography variant="h3">{title}</Typography> : title}
action={secondary}
/>
)}

{/* content & header divider */}
{title && <Divider />}
Expand Down

0 comments on commit 8ae3eb6

Please sign in to comment.