Skip to content
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

Redesign left and top navbars #224

Merged
merged 9 commits into from
Jan 21, 2025
Merged

Redesign left and top navbars #224

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
939cdd5
Modify navbar icon styles
codytodonnell Jul 23, 2024
f607cfe
Modify top navbar
codytodonnell Jul 23, 2024
c33fd1c
Add shortened rectangular logo to top bar
codytodonnell Jul 26, 2024
972324c
Increase top bar height
codytodonnell Jul 26, 2024
2710081
Add proper page titles to new pages
codytodonnell Jul 26, 2024
0814a90
Add more links menu to sidebar
codytodonnell Jul 30, 2024
a785c05
Update user dropdown menu to use mui
codytodonnell Jul 30, 2024
914a4a2
Add consistent padding across feature pages
codytodonnell Aug 13, 2024
416c60d
Remove todo and add alt text
codytodonnell Aug 13, 2024
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
Prev Previous commit
Next Next commit
Update user dropdown menu to use mui
  • Loading branch information
@codytodonnell
codytodonnell committed Jul 30, 2024
commit a785c05a8b41d538ecb25f0a254777365b4afb6e
2 changes: 1 addition & 1 deletion src/features/layout/LeftNavBar.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ ul.nav_list {

.more_menu_icon {
color: use-color("base-darker");
margin-right: 0.5rem;
margin-right: 1rem;
}
}

Expand Down
40 changes: 26 additions & 14 deletions src/features/layout/TopBar.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@
font-size: 0.75rem;
font-weight: bold;
justify-content: center;
padding: 0 1rem 0 5px;
padding: 0 1rem;

>svg {
color: use-color("mid-blue");
Expand All @@ -87,31 +87,43 @@
}
}

.login_menu {
.login_menu_container {
display: block;
padding: 4px;
width: 77px;

.login_menu_username {
font-style: italic;
}

.login_menu_button {
align-items: center;
color: use_color("black");
display: flex;
gap: 5px;
justify-content: left;

.login_menu_icon {
color: use_color("mid-blue");
font-size: 30px;
margin-right: 5px;
}
}

.name_item {
text-align: center;
width: 100%;
}
}

.login_menu {
a {
color: inherit;
text-decoration: none;
}

.login_menu_username {
color: use-color("base");
font-style: italic;
margin: 0.5rem 0;
text-align: center;
}

.login_menu_icon {
color: use_color("base-darker");
margin-right: 1rem;
width: 18px;
}
}

.narrative_link {
margin-right: 0.5rem;
}
210 changes: 74 additions & 136 deletions src/features/layout/TopBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,17 @@ import {
faSortDown,
faUser,
faWrench,
faPlus,
} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon as FAIcon } from '@fortawesome/react-fontawesome';
import { Button, Stack } from '@mui/material';
import { FC, useMemo } from 'react';
import { Button, Menu, MenuItem, Stack, Typography } from '@mui/material';
import { FC, useMemo, useState } from 'react';
import { toast } from 'react-hot-toast';
import { Link, useNavigate } from 'react-router-dom';
import { resetStateAction } from '../../app/store';
import { revokeToken } from '../../common/api/authService';
import { getUserProfile } from '../../common/api/userProfileApi';
import logo from '../../common/assets/logo/rectangle_short.png';
import { Dropdown } from '../../common/components';
import { useAppDispatch, useAppSelector } from '../../common/hooks';
import { authUsername, setAuth } from '../auth/authSlice';
import { noOp } from '../common';
Expand All @@ -34,6 +34,19 @@ export default function TopBar() {
<div className={[classes.topbar_item, classes.stretch].join(' ')}>
<PageTitle />
</div>
<div className={classes.topbar_item}>
{username && (
<a
href="/legacy/narrativemanager/new"
target="_blank"
className={classes.narrative_link}
>
<Button variant="outlined" startIcon={<FAIcon icon={faPlus} />}>
Narrative
</Button>
</a>
)}
</div>
<div className={classes.topbar_item}>
<Enviroment />
</div>
Expand Down Expand Up @@ -67,69 +80,69 @@ const UserMenu: FC = () => {
{ skip: !username }
);
const realname = profData?.[0]?.[0]?.user.realname;
const navigate = useNavigate();
const logout = useLogout();
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const menuOpen = Boolean(anchorEl);
const handleClickMenu = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
};
const handleCloseMenu = () => {
setAnchorEl(null);
};
return (
<div className={classes.login_menu}>
<Dropdown
horizontalMenuAlign="right"
options={[
{
options: [
{
value: '',
icon: undefined,
fullWidth: true,
label: (
<div className={classes['name_item']}>
<div>{realname}</div>
<div className={classes.login_menu_username}>
{username}
</div>
</div>
),
},
],
},
{
options: [
{
value: '/legacy/people',
icon: <FAIcon icon={faUser} />,
label: 'Your Profile',
},
{
value: '/legacy/account',
icon: <FAIcon icon={faIdCard} />,
label: 'Your Account',
},
],
},
{
options: [
{
value: 'LOGOUT',
icon: <FAIcon icon={faSignOutAlt} />,
label: 'Sign Out',
},
],
},
]}
onChange={(opt) => {
if (opt?.[0]) {
if (opt[0].value === 'LOGOUT') {
logout();
} else {
navigate(opt[0].value as string);
}
}
}}
<div className={classes.login_menu_container}>
<Button
id="user-menu-button"
aria-controls={menuOpen ? 'user-menu' : undefined}
aria-haspopup="true"
aria-expanded={menuOpen ? 'true' : undefined}
className={classes.login_menu_button}
onClick={handleClickMenu}
>
<div className={classes.login_menu_button}>
<Stack direction="row" spacing={1} alignItems="center">
<UserAvatar />
<Typography fontSize="small">{username}</Typography>
<FAIcon icon={faSortDown} />
</div>
</Dropdown>
</Stack>
</Button>
<Menu
id="user-menu"
className={classes.login_menu}
anchorEl={anchorEl}
open={menuOpen}
onClose={handleCloseMenu}
MenuListProps={{
'aria-labelledby': 'user-menu-button',
}}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'left',
}}
>
<Typography className={classes.login_menu_username}>
{realname}
</Typography>
<MenuItem onClick={handleCloseMenu}>
<Link to="profile">
<FAIcon className={classes.login_menu_icon} icon={faUser} />
My Profile
</Link>
</MenuItem>
<MenuItem onClick={handleCloseMenu}>
<Link to="account">
<FAIcon className={classes.login_menu_icon} icon={faIdCard} />
My Account
</Link>
</MenuItem>
<MenuItem onClick={() => logout()}>
<FAIcon className={classes.login_menu_icon} icon={faSignOutAlt} />
Log out
</MenuItem>
</Menu>
</div>
);
};
Expand Down Expand Up @@ -158,81 +171,6 @@ const useLogout = () => {
};
};

// const HamburgerMenu: FC = () => {
// const navigate = useNavigate();
// return (
// <div className={classes.hamburger_menu}>
// <Dropdown
// options={[
// {
// options: [
// {
// value: '/legacy/narrativemanager/start',
// icon: <FAIcon icon={faFile} />,
// label: 'Narrative Interface',
// },
// {
// value: '/legacy/narrativemanager/new',
// icon: <FAIcon icon={faPlus} />,
// label: 'New Narrative',
// },
// {
// value: '/legacy/jgi-search',
// icon: <FAIcon icon={faSearch} />,
// label: 'JGI Search',
// },
// {
// value: '/legacy/biochem-search',
// icon: <FAIcon icon={faSearch} />,
// label: 'Biochem Search',
// },
// ],
// },
// {
// options: [
// {
// value: '/legacy/about/services',
// icon: <FAIcon icon={faServer} />,
// label: 'KBase Services Status',
// },
// ],
// },
// {
// options: [
// {
// value: '/legacy/about',
// icon: <FAIcon icon={faInfo} />,
// label: 'About',
// },
// {
// value: 'https://kbase.us/contact-us',
// icon: <FAIcon icon={faEnvelope} />,
// label: 'Contact KBase',
// },
// {
// value: 'https://kbase.us/narrative-guide/',
// icon: <FAIcon icon={faQuestion} />,
// label: 'Support',
// },
// ],
// },
// ]}
// onChange={(opt) => {
// if (typeof opt?.[0]?.value === 'string') {
// if (opt[0].value.startsWith('http')) {
// window.location.href = opt[0].value;
// } else {
// navigate(opt[0].value, { relative: 'path' });
// }
// }
// }}
// >
// <FAIcon className={classes.hamburger_menu_icon} icon={faBars} />
// </Dropdown>
// </div>
// );
// };

const UserAvatar = () => {
const username = useAppSelector(authUsername);
const { data: profData } = getUserProfile.useQuery(
Expand Down