Skip to content

Feature/better-navbar #59

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
CodeDead merged 2 commits into from
Mar 2, 2023
Merged

Feature/better-navbar #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4203fa1
Menu is now anchored and takes up less space for mobile. Clicking the…
CodeDead Mar 2, 2023
160c13d
Updated image and text
CodeDead Mar 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Advanced PassGen

![Advanced PassGen](https://i.imgur.com/ci8x6rX.png)
![Advanced PassGen](https://i.imgur.com/1hBINPf.png)

![GitHub](https://img.shields.io/badge/language-JavaScript+Rust-green)
![GitHub](https://img.shields.io/github/license/CodeDead/Advanced-PassGen)
Expand All @@ -10,7 +10,7 @@

Advanced PassGen is a free and open-source application that can help you generate passwords and export them. You can export your passwords in plain text, CSV or JSON format!

For a live version of the application, visit [https://advancedpassgen.codedead.com](https://advancedpassgen.codedead.com).
For a live version of the application, visit [our website](https://advancedpassgen.codedead.com).

## Building

Expand Down
13 changes: 11 additions & 2 deletions src/components/App/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ const App = () => {
checkedForUpdates,
} = state;

const [drawerOpen, setDrawerOpen] = useState(false);
const [snackOpen, setSnackOpen] = useState(false);
const language = state.languages[languageIndex];

Expand Down Expand Up @@ -126,8 +127,16 @@ const App = () => {
<BrowserRouter>
<CssBaseline />
<Box sx={{ display: 'flex' }}>
<TopBar />
<ClippedDrawer />
<TopBar
onOpenDrawer={() => setDrawerOpen(!drawerOpen)}
onTitleClick={() => {
setDrawerOpen(false);
}}
/>
<ClippedDrawer
open={drawerOpen}
onClose={() => setDrawerOpen(false)}
/>
<Box component="main" sx={{ flexGrow: 1, p: 3 }}>
<Toolbar />
<Suspense fallback={<LoadingBar />}>
Expand Down
188 changes: 53 additions & 135 deletions src/components/ClippedDrawer/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useContext, useEffect, useState } from 'react';
import React, { useContext } from 'react';
import Box from '@mui/material/Box';
import Drawer from '@mui/material/Drawer';
import Toolbar from '@mui/material/Toolbar';
Expand All @@ -20,222 +20,140 @@ import { useNavigate } from 'react-router-dom';
import { MainContext } from '../../contexts/MainContextProvider';
import { openWebSite } from '../../reducers/MainReducer/Actions';

const drawerWidth = 220;

const ClippedDrawer = () => {
const ClippedDrawer = ({ open, onClose }) => {
const [state] = useContext(MainContext);

const { languageIndex, pageIndex, fixedMenu } = state;
const { languageIndex, pageIndex } = state;
const language = state.languages[languageIndex];

const [textVisible, setTextVisible] = useState(fixedMenu);

const navigate = useNavigate();

/**
* Change the menu visibility
* @param visible True if the text should be visible, false otherwise
* Close the drawer
*/
const changeTextMenuVisibility = (visible) => {
if (fixedMenu) return;
setTextVisible(visible);
const closeDrawer = () => {
if (onClose) {
onClose();
}
};

useEffect(() => {
setTextVisible(fixedMenu);
}, [fixedMenu]);
/**
* Handle a navigate event
* @param page The page to navigate to
*/
const handleNavigate = (page) => {
navigate(page);
closeDrawer();
};

return (
<Drawer
variant="permanent"
sx={{
width: textVisible ? drawerWidth : 50,
flexShrink: 0,
whiteSpace: textVisible ? null : 'nowrap',
'& .MuiDrawer-paper': { width: textVisible ? drawerWidth : null, boxSizing: 'border-box' },
}}
anchor="left"
open={open}
onClose={closeDrawer}
>
<Toolbar />
<Box
sx={{ overflow: 'auto' }}
onMouseEnter={() => changeTextMenuVisibility(true)}
onMouseLeave={() => changeTextMenuVisibility(false)}
sx={{ width: 220 }}
>
<List>
<ListItem disablePadding sx={{ display: 'block' }}>
<ListItemButton
selected={pageIndex === 0}
onClick={() => navigate('/')}
sx={{
minHeight: 48,
justifyContent: textVisible ? 'initial' : 'center',
px: 2.5,
}}
onClick={() => handleNavigate('/')}
>
<ListItemIcon
sx={{
minWidth: textVisible ? null : 0,
mr: textVisible ? null : 'auto',
}}
>
<ListItemIcon>
<HomeIcon />
</ListItemIcon>
{textVisible ? <ListItemText primary={language.general} /> : null}
<ListItemText primary={language.general} />
</ListItemButton>
</ListItem>
<ListItem disablePadding sx={{ display: textVisible ? 'block' : null }}>
<ListItem disablePadding>
<ListItemButton
selected={pageIndex === 1}
onClick={() => navigate('/advanced')}
sx={{
minHeight: 48,
justifyContent: textVisible ? 'initial' : 'center',
px: 2.5,
}}
onClick={() => handleNavigate('/advanced')}
>
<ListItemIcon
sx={{
minWidth: textVisible ? null : 0,
mr: textVisible ? null : 'auto',
}}
>
<ListItemIcon>
<BuildIcon />
</ListItemIcon>
{textVisible ? <ListItemText primary={language.advanced} /> : null}
<ListItemText primary={language.advanced} />
</ListItemButton>
</ListItem>
<ListItem disablePadding sx={{ display: textVisible ? 'block' : null }}>
<ListItem disablePadding>
<ListItemButton
selected={pageIndex === 2}
onClick={() => navigate('/generate')}
sx={{
minHeight: 48,
justifyContent: textVisible ? 'initial' : 'center',
px: 2.5,
}}
onClick={() => handleNavigate('/generate')}
>
<ListItemIcon
sx={{
minWidth: textVisible ? null : 0,
mr: textVisible ? null : 'auto',
}}
>
<ListItemIcon>
<ListIcon />
</ListItemIcon>
{textVisible ? <ListItemText primary={language.list} /> : null}
<ListItemText primary={language.list} />
</ListItemButton>
</ListItem>
</List>
<Divider />
<List>
<ListItem disablePadding sx={{ display: textVisible ? 'block' : null }}>
<ListItem disablePadding>
<ListItemButton
selected={pageIndex === 3}
onClick={() => navigate('/advisor')}
sx={{
minHeight: 48,
justifyContent: textVisible ? 'initial' : 'center',
px: 2.5,
}}
onClick={() => handleNavigate('/advisor')}
>
<ListItemIcon
sx={{
minWidth: textVisible ? null : 0,
mr: textVisible ? null : 'auto',
}}
>
<ListItemIcon>
<LightbulbIcon />
</ListItemIcon>
{textVisible ? <ListItemText primary={language.advisor} /> : null}
<ListItemText primary={language.advisor} />
</ListItemButton>
</ListItem>
<ListItem disablePadding sx={{ display: textVisible ? 'block' : null }}>
<ListItem disablePadding>
<ListItemButton
selected={pageIndex === 4}
onClick={() => navigate('/vault')}
sx={{
minHeight: 48,
justifyContent: textVisible ? 'initial' : 'center',
px: 2.5,
}}
onClick={() => handleNavigate('/vault')}
>
<ListItemIcon
sx={{
minWidth: textVisible ? null : 0,
mr: textVisible ? null : 'auto',
}}
>
<ListItemIcon>
<FolderIcon />
</ListItemIcon>
{textVisible ? <ListItemText primary={language.vault} /> : null}
<ListItemText primary={language.vault} />
</ListItemButton>
</ListItem>
</List>
<Divider />
<List>
<ListItem disablePadding sx={{ display: textVisible ? 'block' : null }}>
<ListItem disablePadding>
<ListItemButton
selected={pageIndex === 5}
onClick={() => navigate('/settings')}
sx={{
minHeight: 48,
justifyContent: textVisible ? 'initial' : 'center',
px: 2.5,
}}
onClick={() => handleNavigate('/settings')}
>
<ListItemIcon
sx={{
minWidth: textVisible ? null : 0,
mr: textVisible ? null : 'auto',
}}
>
<ListItemIcon>
<SettingsIcon />
</ListItemIcon>
{textVisible ? <ListItemText primary={language.settings} /> : null}
<ListItemText primary={language.settings} />
</ListItemButton>
</ListItem>
</List>
<Divider />
<List>
<ListItem disablePadding sx={{ display: textVisible ? 'block' : null }}>
<ListItem disablePadding>
<ListItemButton
onClick={() => openWebSite('https://codedead.com/donate')}
sx={{
minHeight: 48,
justifyContent: textVisible ? 'initial' : 'center',
px: 2.5,
onClick={() => {
openWebSite('https://codedead.com/donate');
closeDrawer();
}}
>
<ListItemIcon
sx={{
minWidth: textVisible ? null : 0,
mr: textVisible ? null : 'auto',
}}
>
<ListItemIcon>
<AttachMoneyIcon />
</ListItemIcon>
{textVisible ? <ListItemText primary={language.donate} /> : null}
<ListItemText primary={language.donate} />
</ListItemButton>
</ListItem>
<ListItem disablePadding sx={{ display: textVisible ? 'block' : null }}>
<ListItem disablePadding>
<ListItemButton
selected={pageIndex === 6}
onClick={() => navigate('/about')}
sx={{
minHeight: 48,
justifyContent: textVisible ? 'initial' : 'center',
px: 2.5,
}}
onClick={() => handleNavigate('/about')}
>
<ListItemIcon
sx={{
minWidth: textVisible ? null : 0,
mr: textVisible ? null : 'auto',
}}
>
<ListItemIcon>
<InfoIcon />
</ListItemIcon>
{textVisible ? <ListItemText primary={language.about} /> : null}
<ListItemText primary={language.about} />
</ListItemButton>
</ListItem>
</List>
Expand Down
41 changes: 39 additions & 2 deletions src/components/TopBar/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,13 @@ import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import Brightness5Icon from '@mui/icons-material/Brightness5';
import Brightness7Icon from '@mui/icons-material/Brightness7';
import MenuIcon from '@mui/icons-material/Menu';
import MenuItem from '@mui/material/MenuItem';
import { useNavigate } from 'react-router-dom';
import { setLanguageIndex, setThemeType } from '../../reducers/MainReducer/Actions';
import { MainContext } from '../../contexts/MainContextProvider';

const TopBar = () => {
const TopBar = ({ onOpenDrawer, onTitleClick }) => {
const [state, d1] = useContext(MainContext);

const {
Expand All @@ -25,6 +27,8 @@ const TopBar = () => {
const [anchorEl, setAnchorEl] = useState(null);
const open = Boolean(anchorEl);

const navigate = useNavigate();

/**
* Change the theme style
*/
Expand Down Expand Up @@ -56,14 +60,47 @@ const TopBar = () => {
d1(setLanguageIndex(lang));
};

/**
* Open the drawer
*/
const openDrawer = () => {
if (onOpenDrawer) {
onOpenDrawer();
}
};

/**
* Go to the home page
*/
const goHome = () => {
onTitleClick();
navigate('/');
};

return (
<AppBar
position="fixed"
sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}
enableColorOnDark={colorOnDark}
>
<Toolbar>
<Typography variant="h6" noWrap component="div">
<IconButton
size="large"
edge="start"
color="inherit"
aria-label="menu"
sx={{ mr: 2 }}
onClick={openDrawer}
>
<MenuIcon />
</IconButton>
<Typography
variant="h6"
noWrap
component="div"
style={{ cursor: 'pointer' }}
onClick={goHome}
>
{language.appName}
</Typography>
<div style={{ flexGrow: 1 }} />
Expand Down
Loading