Fix mobile nav.

This commit is contained in:
Brian Cao 2024-03-24 11:36:09 -07:00
parent 58df502d43
commit c4d0c433c0
2 changed files with 32 additions and 16 deletions

View File

@ -14,7 +14,7 @@ import styles from './NavBar.module.css';
export function NavBar() {
const { formatMessage, labels } = useMessages();
const { pathname, router } = useNavigation();
const { renderTeamUrl } = useTeamUrl();
const { teamId, renderTeamUrl } = useTeamUrl();
const cloudMode = !!process.env.cloudMode;
@ -34,25 +34,38 @@ export function NavBar() {
label: formatMessage(labels.settings),
url: renderTeamUrl('/settings'),
children: [
...(teamId
? [
{
label: formatMessage(labels.team),
url: renderTeamUrl('/settings/team'),
},
]
: []),
{
label: formatMessage(labels.websites),
url: '/settings/websites',
},
{
label: formatMessage(labels.teams),
url: '/settings/teams',
},
{
label: formatMessage(labels.users),
url: '/settings/users',
},
{
label: formatMessage(labels.profile),
url: '/profile',
url: renderTeamUrl('/settings/websites'),
},
...(!teamId
? [
{
label: formatMessage(labels.teams),
url: renderTeamUrl('/settings/teams'),
},
{
label: formatMessage(labels.users),
url: '/settings/users',
},
]
: [
{
label: formatMessage(labels.members),
url: renderTeamUrl('/settings/members'),
},
]),
],
},
cloudMode && {
{
label: formatMessage(labels.profile),
url: '/profile',
},
@ -94,6 +107,7 @@ export function NavBar() {
<ProfileButton />
</div>
<div className={styles.mobile}>
<TeamsButton onChange={handleTeamChange} showText={false} />
<HamburgerButton menuItems={menuItems} />
</div>
</div>

View File

@ -7,9 +7,11 @@ import styles from './TeamsButton.module.css';
export function TeamsButton({
className,
showText = true,
onChange,
}: {
className?: string;
showText?: boolean;
onChange?: (value: string) => void;
}) {
const { user } = useLogin();
@ -31,7 +33,7 @@ export function TeamsButton({
<PopupTrigger>
<Button className={classNames(styles.button, className)} variant="quiet">
<Icon>{teamId ? <Icons.Users /> : <Icons.User />}</Icon>
<Text>{teamId ? team?.name : user.username}</Text>
{showText && <Text>{teamId ? team?.name : user.username}</Text>}
<Icon>
<Icons.ChevronDown />
</Icon>