Currently, I'm in the process of implementing a left-side navigation bar for a web application I'm developing. The main challenge I'm facing is customizing the styles as desired when using the Drawer component. Specifically, I'm aiming to increase the thickness of the drawer line.
Here's a snippet of the code:
function SideNav({drawerWidth = 170}) { const history = useHistory(); const dispatch = useDispatch();
return(
<Drawer
PaperProps={{ padding: '20px'}}
sx={{
width: drawerWidth,
flexShrink: 0,
'& .MuiDrawer-paper': {
width: drawerWidth,
boxSizing: 'border-box',
},
}}
variant="permanent"
anchor="left"
>
<List>
<ListItem >
<img class="rotate" src="record1.png" width="80" height="80"/>
<Button variant='outlined' onClick={() => history.push('/home')}> Home </Button>
</ListItem>
<ListItem >
<img class="rotate" src="record1.png" width="80" height="80"/>
<Button variant='outlined' onClick={() => history.push('/create')}>Create</Button>
</ListItem>
<ListItem>
<img class="rotate" src="scratch.png" width="80" height="80" />
<Button variant='outlined' onClick={() => dispatch({ type: 'LOGOUT' })}>Log out </Button>
</ListItem>
<ListItem>
<img class="rotate" src="scratch.png" width="80" height="80" onClick={() => history.push('/profile')}/>
<Button variant='outlined' onClick={() => history.push('/create')}>Profile </Button>
</ListItem>
</List>
<Divider />
</Drawer>
);
}
export default SideNav;`
I've experimented with the sx={{}} but haven't found a suitable solution yet to enhance the visibility of the drawer/navigation. My objective is to make it more pronounced and eye-catching.