feat(buildteams): ✨ Quick Settings navigation from home page

BuildTheEarth · Dec 23, 2023 · c92b1da · c92b1da
1 parent 8a5fb82
commit c92b1da
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 15 deletions.
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -14,12 +14,15 @@ import {
 	Box,
 	Burger,
 	Button,
+	ButtonGroup,
 	Container,
 	Divider,
 	Group,
 	Indicator,
 	Menu,
+	MenuItem,
 	Paper,
+	rem,
 	Text,
 	Tooltip,
 	Transition,
@@ -28,7 +31,17 @@ import {
 	useMantineTheme,
 } from '@mantine/core';
 import { useClickOutside, useDisclosure } from '@mantine/hooks';
-import { IconMoonStars, IconSearch, IconSettings, IconSun, IconUser } from '@tabler/icons-react';
+import {
+	IconDots,
+	IconMoonStars,
+	IconPhoto,
+	IconSearch,
+	IconSend,
+	IconSettings,
+	IconSun,
+	IconUser,
+	IconUsers,
+} from '@tabler/icons-react';
 import { motion, useScroll, useTransform } from 'framer-motion';
 import { signIn, signOut, useSession } from 'next-auth/react';
 import React, { CSSProperties, useState } from 'react';
@@ -388,12 +401,84 @@ export const LogoHeader = (props: LogoHeaderProps) => {
 								'team.application.edit',
 								'team.application.list',
 								'team.application.review',
+								'team.showcases.edit',
+								'permission.add',
+								'permission.remove',
 							],
 							props.id,
 						) && (
-							<Button component={Link} href={props.settingsHref || ''} variant="outline">
-								Settings
-							</Button>
+							<Group wrap="nowrap" gap={0}>
+								<Button
+									style={{ borderTopRightRadius: 0, borderBottomRightRadius: 0 }}
+									variant="default"
+									component={Link}
+									href={props.settingsHref + '/settings' || ''}
+								>
+									Manage
+								</Button>
+								<Menu transitionProps={{ transition: 'pop' }} position="bottom-end" withinPortal>
+									<Menu.Target>
+										<ActionIcon
+											variant="default"
+											size={36}
+											style={{ borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }}
+										>
+											<IconDots style={{ width: rem(16), height: rem(16) }} stroke={1.5} />
+										</ActionIcon>
+									</Menu.Target>
+									<Menu.Dropdown>
+										<MenuItem
+											leftSection={<IconSettings style={{ width: rem(14), height: rem(14) }} />}
+											component={Link}
+											href={props.settingsHref + '/settings' || ''}
+											disabled={
+												!user.hasPermissions(['team.settings.edit', 'team.socials.edit'], props.id)
+											}
+										>
+											Settings
+										</MenuItem>
+										<MenuItem
+											leftSection={<IconSend style={{ width: rem(14), height: rem(14) }} />}
+											component={Link}
+											href={props.settingsHref + '/apply' || ''}
+											disabled={!user.hasPermissions(['team.application.edit'], props.id)}
+										>
+											Application Questions
+										</MenuItem>
+										<MenuItem
+											leftSection={<IconUsers style={{ width: rem(14), height: rem(14) }} />}
+											component={Link}
+											href={props.settingsHref + '/members' || ''}
+											disabled={
+												!user.hasPermissions(['permission.add', 'permission.remove'], props.id)
+											}
+										>
+											Members
+										</MenuItem>
+										<MenuItem
+											leftSection={<IconPhoto style={{ width: rem(14), height: rem(14) }} />}
+											component={Link}
+											href={props.settingsHref + '/images' || ''}
+											disabled={!user.hasPermissions(['team.showcases.edit'], props.id)}
+										>
+											Showcase Images
+										</MenuItem>
+										<MenuItem
+											leftSection={<IconSearch style={{ width: rem(14), height: rem(14) }} />}
+											component={Link}
+											href={props.settingsHref + '/review' || ''}
+											disabled={
+												!user.hasPermissions(
+													['team.application.review', 'team.application.list'],
+													props.id,
+												)
+											}
+										>
+											Review
+										</MenuItem>
+									</Menu.Dropdown>
+								</Menu>
+							</Group>
 						)}
 					</Group>
 				</Group>

diff --git a/src/components/Page.tsx b/src/components/Page.tsx
@@ -6,20 +6,20 @@ import {
 	useMantineColorScheme,
 	useMantineTheme,
 } from '@mantine/core';
-import Header, { LogoHeader } from './Header';
+import { motion, useScroll, useTransform } from 'framer-motion';
 import { NextSeo, NextSeoProps } from 'next-seo';
 import React, { useEffect } from 'react';
-import { motion, useScroll, useTransform } from 'framer-motion';
+import Header, { LogoHeader } from './Header';
 
-import Error from 'next/error';
-import ErrorPage from '../pages/_error';
-import Footer from './Footer';
-import { NextResponse } from 'next/server';
-import classes from '../styles/components/Page.module.css';
 import { useMediaQuery } from '@mantine/hooks';
-import { useRouter } from 'next/router';
 import { useSession } from 'next-auth/react';
+import Error from 'next/error';
+import { useRouter } from 'next/router';
+import { NextResponse } from 'next/server';
 import { useUser } from '../hooks/useUser';
+import ErrorPage from '../pages/_error';
+import classes from '../styles/components/Page.module.css';
+import Footer from './Footer';
 
 interface PageProps {
 	children: React.ReactNode;
@@ -154,7 +154,7 @@ export const LogoPage = (props: PageProps & { headData: any; team: string }) =>
 			<LogoHeader
 				{...props.headData}
 				applyHref={`${props.team}/apply`}
-				settingsHref={`${props.team}/manage/settings`}
+				settingsHref={`${props.team}/manage`}
 			/>
 			<ContentContainer style={props.style} smallPadding={props.smallPadding}>
 				{props.children}

diff --git a/src/components/SettingsTabs.tsx b/src/components/SettingsTabs.tsx
@@ -6,7 +6,14 @@ import {
 	useMantineColorScheme,
 	useMantineTheme,
 } from '@mantine/core';
-import { IconDashboard, IconSearch, IconSend, IconSettings, IconUsers } from '@tabler/icons-react';
+import {
+	IconDashboard,
+	IconPhoto,
+	IconSearch,
+	IconSend,
+	IconSettings,
+	IconUsers,
+} from '@tabler/icons-react';
 
 import { useMediaQuery } from '@mantine/hooks';
 import { useSession } from 'next-auth/react';
@@ -81,7 +88,7 @@ const SettingsTabs = ({
 						</Tabs.Tab>
 						<Tabs.Tab
 							value="images"
-							leftSection={<IconUsers size="0.8rem" />}
+							leftSection={<IconPhoto size="0.8rem" />}
 							disabled={!user.hasPermission('team.showcases.edit', team)}
 						>
 							Showcase Images