Compare commits
No commits in common. "7a166fe9208340e34bc717fbb00dbd171389a848" and "7c78f39b02afecf47299995a516ca508ac1500c4" have entirely different histories.
7a166fe920
...
7c78f39b02
@ -50,7 +50,7 @@ const BackstoryPageContainer = (props: BackstoryPageContainerProps) => {
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
p: { xs: 0, sm: 0.5 },
|
||||
flexGrow: 1,
|
||||
flexGrow: 1,
|
||||
minHeight: "min-content",
|
||||
}}>
|
||||
<Paper
|
||||
@ -79,7 +79,7 @@ interface BackstoryLayoutProps {
|
||||
}
|
||||
|
||||
const BackstoryLayout: React.FC<BackstoryLayoutProps> = (props: BackstoryLayoutProps) => {
|
||||
const { page, chatRef, } = props;
|
||||
const { page, chatRef } = props;
|
||||
const { setSnack } = useAppState();
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
@ -91,12 +91,18 @@ const BackstoryLayout: React.FC<BackstoryLayoutProps> = (props: BackstoryLayoutP
|
||||
setNavigationItems(getMainNavigationItems(userType, user?.isAdmin ? true : false));
|
||||
}, [user]);
|
||||
|
||||
useEffect(() => {
|
||||
console.log({ guest, user });
|
||||
}, [guest, user]);
|
||||
|
||||
// Generate dynamic routes from navigation config
|
||||
const generateRoutes = () => {
|
||||
if (!guest && !user) return null;
|
||||
|
||||
const userType = user?.userType || null;
|
||||
const isAdmin = user?.isAdmin ? true : false;
|
||||
|
||||
// Get all routes from navigation config
|
||||
const routes = getAllRoutes(userType, isAdmin);
|
||||
|
||||
return routes.map((route, index) => {
|
||||
@ -123,9 +129,10 @@ const BackstoryLayout: React.FC<BackstoryLayoutProps> = (props: BackstoryLayoutP
|
||||
height: "100%",
|
||||
maxHeight: "100%",
|
||||
minHeight: "100%",
|
||||
flexDirection: "column"
|
||||
flexDirection: "column"
|
||||
}}>
|
||||
<Header
|
||||
<Header
|
||||
setSnack={setSnack}
|
||||
currentPath={page}
|
||||
navigate={navigate}
|
||||
navigationItems={navigationItems}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
// components/layout/Header.tsx
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import React, { JSX, useEffect, useState } from 'react';
|
||||
import { NavigateFunction, useLocation } from 'react-router-dom';
|
||||
import {
|
||||
AppBar,
|
||||
@ -40,7 +40,7 @@ import {
|
||||
KeyboardArrowDown,
|
||||
} from '@mui/icons-material';
|
||||
import FaceRetouchingNaturalIcon from '@mui/icons-material/FaceRetouchingNatural';
|
||||
import { getUserMenuItemsByGroup } from 'config/navigationConfig';
|
||||
|
||||
import { NavigationItem } from 'types/navigation';
|
||||
import { Beta } from 'components/ui/Beta';
|
||||
import { Candidate, Employer } from 'types/types';
|
||||
@ -121,11 +121,11 @@ interface HeaderProps {
|
||||
navigationItems: NavigationItem[];
|
||||
currentPath: string;
|
||||
sessionId?: string | null;
|
||||
setSnack: SetSnackType;
|
||||
}
|
||||
|
||||
const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
|
||||
const { user, logout } = useAuth();
|
||||
const { setSnack } = useAppState();
|
||||
const {
|
||||
transparent = false,
|
||||
className,
|
||||
@ -133,6 +133,8 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
|
||||
navigationItems,
|
||||
sessionId,
|
||||
} = props;
|
||||
|
||||
const { setSnack } = useAppState();
|
||||
const theme = useTheme();
|
||||
const location = useLocation();
|
||||
|
||||
@ -149,97 +151,52 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
|
||||
const [userMenuAnchor, setUserMenuAnchor] = useState<null | HTMLElement>(null);
|
||||
const userMenuOpen = Boolean(userMenuAnchor);
|
||||
|
||||
// Get user menu items from navigation config
|
||||
const userMenuGroups = getUserMenuItemsByGroup(user?.userType || null);
|
||||
|
||||
// Create user menu items array with proper actions
|
||||
const createUserMenuItems = () => {
|
||||
const items: Array<{
|
||||
id: string;
|
||||
label: string;
|
||||
icon: React.ReactElement | null;
|
||||
action: () => void;
|
||||
group?: string;
|
||||
}> = [];
|
||||
|
||||
// Add profile group items
|
||||
userMenuGroups.profile.forEach(item => {
|
||||
if (!item.divider) {
|
||||
items.push({
|
||||
id: item.id,
|
||||
label: item.label as string,
|
||||
icon: item.icon || null,
|
||||
action: () => item.path && navigate(item.path),
|
||||
group: 'profile'
|
||||
});
|
||||
// User menu items
|
||||
const userMenuItems = [
|
||||
{
|
||||
id: 'profile',
|
||||
label: 'Profile',
|
||||
icon: <Person fontSize="small" />,
|
||||
action: () => navigate(`/${user?.userType}/profile`)
|
||||
},
|
||||
{
|
||||
id: 'dashboard',
|
||||
label: 'Dashboard',
|
||||
icon: <Dashboard fontSize="small" />,
|
||||
action: () => navigate(`/${user?.userType}/dashboard`)
|
||||
},
|
||||
{
|
||||
id: 'settings',
|
||||
label: 'Settings',
|
||||
icon: <Settings fontSize="small" />,
|
||||
action: () => navigate(`/${user?.userType}/settings`)
|
||||
},
|
||||
{
|
||||
id: 'divider',
|
||||
label: '',
|
||||
icon: null,
|
||||
action: () => { }
|
||||
},
|
||||
{
|
||||
id: 'logout',
|
||||
label: 'Logout',
|
||||
icon: <Logout fontSize="small" />,
|
||||
action: () => {
|
||||
logout();
|
||||
navigate('/');
|
||||
}
|
||||
});
|
||||
|
||||
// Add account group items
|
||||
userMenuGroups.account.forEach(item => {
|
||||
if (!item.divider) {
|
||||
items.push({
|
||||
id: item.id,
|
||||
label: item.label as string,
|
||||
icon: item.icon || null,
|
||||
action: () => item.path && navigate(item.path),
|
||||
group: 'account'
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Add divider if we have items before system group
|
||||
if (items.length > 0 && userMenuGroups.system.length > 0) {
|
||||
items.push({
|
||||
id: 'divider',
|
||||
label: '',
|
||||
icon: null,
|
||||
action: () => { },
|
||||
group: 'divider'
|
||||
});
|
||||
}
|
||||
];
|
||||
|
||||
// Add system group items with special handling for logout
|
||||
userMenuGroups.system.forEach(item => {
|
||||
if (item.id === 'logout') {
|
||||
items.push({
|
||||
id: 'logout',
|
||||
label: 'Logout',
|
||||
icon: <Logout fontSize="small" />,
|
||||
action: () => {
|
||||
logout();
|
||||
navigate('/');
|
||||
},
|
||||
group: 'system'
|
||||
});
|
||||
} else if (!item.divider) {
|
||||
items.push({
|
||||
id: item.id,
|
||||
label: item.label as string,
|
||||
icon: item.icon || null,
|
||||
action: () => item.path && navigate(item.path),
|
||||
group: 'system'
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Add other group items
|
||||
userMenuGroups.other.forEach(item => {
|
||||
if (!item.divider) {
|
||||
items.push({
|
||||
id: item.id,
|
||||
label: item.label as string,
|
||||
icon: item.icon || null,
|
||||
action: () => item.path && navigate(item.path),
|
||||
group: 'other'
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return items;
|
||||
};
|
||||
|
||||
const userMenuItems = createUserMenuItems();
|
||||
if (user?.isAdmin) {
|
||||
const divider = userMenuItems.findIndex(p => p.id === 'divider');
|
||||
if (divider !== -1) {
|
||||
userMenuItems.splice(divider, 0, ...[
|
||||
{ id: 'divider', label: '', icon: null, action: () => { } },
|
||||
{ id: 'generate', label: 'Generate Candidate', icon: <FaceRetouchingNaturalIcon fontSize="small" />, action: () => { navigate('/admin/generate-candidate'); } }
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
// Helper function to check if current path matches navigation item
|
||||
const isCurrentPath = (item: NavigationItem): boolean => {
|
||||
@ -282,8 +239,8 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
|
||||
setUserMenuAnchor(null);
|
||||
};
|
||||
|
||||
const handleUserMenuAction = (item: { id: string; label: string; icon: React.ReactElement | null; action: () => void; group?: string }) => {
|
||||
if (item.group !== 'divider') {
|
||||
const handleUserMenuAction = (item: typeof userMenuItems[0]) => {
|
||||
if (item.id !== 'divider') {
|
||||
item.action();
|
||||
handleUserMenuClose();
|
||||
}
|
||||
@ -300,14 +257,23 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
|
||||
// Render desktop navigation with dropdowns
|
||||
const renderDesktopNavigation = () => {
|
||||
return (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
{navigationItems.map((item) => {
|
||||
<Box sx={{ display: 'flex', width: "100%", alignItems: 'center', justifyContent: "space-between", "& > :last-of-type": { marginRight: "auto"} }}>
|
||||
{navigationItems.map((item, index) => {
|
||||
const hasChildren = item.children && item.children.length > 0;
|
||||
const isActive = isCurrentPath(item) || hasActiveChild(item);
|
||||
|
||||
// Default is centered for all menu items
|
||||
let sx : SxProps = { justifycontent: "center"};
|
||||
// First item ("Backstory") is left aligned
|
||||
if (index === 0) {
|
||||
sx = { marginRight: "auto" };
|
||||
}
|
||||
// If there is an Admin menu, it is on the far right
|
||||
if (item.userTypes?.includes('admin')) {
|
||||
sx = { marginLeft: "auto"};
|
||||
}
|
||||
if (hasChildren) {
|
||||
return (
|
||||
<Box key={item.id}>
|
||||
<Box key={item.id} sx={sx}>
|
||||
<DropdownButton
|
||||
onClick={(e) => handleDropdownOpen(e, item.id)}
|
||||
endIcon={<KeyboardArrowDown />}
|
||||
@ -327,15 +293,16 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
|
||||
transformOrigin={{ vertical: 'top', horizontal: 'left' }}
|
||||
TransitionComponent={Fade}
|
||||
>
|
||||
{item.children?.map(child => (
|
||||
{item.children?.map((child) => (
|
||||
<MenuItem
|
||||
key={child.id}
|
||||
onClick={() => child.path && handleNavigate(child.path)}
|
||||
selected={isCurrentPath(child)}
|
||||
disabled={!child.path}
|
||||
sx={{ alignContent: 'center', margin: "0 !important" }}
|
||||
>
|
||||
{child.icon && <ListItemIcon>{child.icon}</ListItemIcon>}
|
||||
<ListItemText>{child.label}</ListItemText>
|
||||
<ListItemText sx={{ p: 0, margin: "0 !important", "& > *": { m: 0 } }}>{child.label}</ListItemText>
|
||||
</MenuItem>
|
||||
))}
|
||||
</Menu>
|
||||
@ -349,6 +316,7 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
|
||||
sx={{
|
||||
backgroundColor: isActive ? 'action.selected' : 'transparent',
|
||||
color: isActive ? 'secondary.main' : 'primary.contrastText',
|
||||
...sx
|
||||
}}
|
||||
>
|
||||
{item.icon && <Box sx={{ mr: 1, display: 'flex' }}>{item.icon}</Box>}
|
||||
@ -399,11 +367,11 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
|
||||
<ListItemText
|
||||
primary={item.label}
|
||||
sx={{
|
||||
'& .MuiTypography-root': {
|
||||
'& .MuiTypography-root': {
|
||||
fontSize: depth > 0 ? '0.875rem' : '1rem',
|
||||
fontWeight: depth === 0 ? 500 : 400,
|
||||
}
|
||||
}}
|
||||
}}
|
||||
/>
|
||||
{hasChildren && (
|
||||
<IconButton size="small">
|
||||
@ -415,7 +383,7 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
|
||||
{hasChildren && (
|
||||
<Collapse in={isExpanded} timeout="auto" unmountOnExit>
|
||||
<List disablePadding>
|
||||
{item.children?.map(child => renderNavigationItem(child, depth + 1))}
|
||||
{item.children?.map((child) => renderNavigationItem(child, depth + 1))}
|
||||
</List>
|
||||
</Collapse>
|
||||
)}
|
||||
@ -444,13 +412,13 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
|
||||
<UserMenuContainer>
|
||||
<List dense>
|
||||
{userMenuItems.map((item, index) => (
|
||||
item.group === 'divider' ? (
|
||||
item.id === 'divider' ? (
|
||||
<Divider key={`divider-${index}`} />
|
||||
) : (
|
||||
<ListItem key={item.id} disablePadding>
|
||||
<ListItemButton onClick={() => handleUserMenuAction(item)}>
|
||||
<ListItemButton onClick={() => handleUserMenuAction(item)} sx={{ alignContent: "center" }}>
|
||||
{item.icon && <ListItemIcon sx={{ minWidth: 36 }}>{item.icon}</ListItemIcon>}
|
||||
<ListItemText primary={item.label} />
|
||||
<ListItemText primary={item.label} sx={{ padding: 0 }} />
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
)
|
||||
@ -567,7 +535,7 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
|
||||
content={`${window.location.origin}${window.location.pathname}?id=${sessionId}`}
|
||||
onClick={() => {
|
||||
navigate(`${window.location.pathname}?id=${sessionId}`);
|
||||
setSnack("Link copied!");
|
||||
setSnack("Link copied!");
|
||||
}}
|
||||
size="large"
|
||||
/>
|
||||
@ -590,7 +558,7 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
|
||||
</Container>
|
||||
<Beta
|
||||
sx={{ left: "-90px", "& .mobile": { right: "-72px" } }}
|
||||
onClick={() => { navigate('/docs/beta'); }}
|
||||
onClick={() => { navigate('/docs/beta'); }}
|
||||
/>
|
||||
</StyledAppBar>
|
||||
);
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
|
||||
// config/navigationConfig.tsx
|
||||
import React from 'react';
|
||||
import {
|
||||
Chat as ChatIcon,
|
||||
@ -6,19 +8,18 @@ import {
|
||||
BarChart as BarChartIcon,
|
||||
Settings as SettingsIcon,
|
||||
Work as WorkIcon,
|
||||
Info as InfoIcon,
|
||||
Person as PersonIcon,
|
||||
Business as BusinessIcon,
|
||||
Quiz as QuizIcon,
|
||||
Analytics as AnalyticsIcon,
|
||||
Search as SearchIcon,
|
||||
Bookmark as BookmarkIcon,
|
||||
History as HistoryIcon,
|
||||
QuestionAnswer as QuestionAnswerIcon,
|
||||
AttachMoney as AttachMoneyIcon,
|
||||
Quiz as QuizIcon,
|
||||
Analytics as AnalyticsIcon,
|
||||
BubbleChart,
|
||||
} from '@mui/icons-material';
|
||||
import SchoolIcon from '@mui/icons-material/School';
|
||||
|
||||
import FaceRetouchingNaturalIcon from '@mui/icons-material/FaceRetouchingNatural';
|
||||
import LibraryBooksIcon from '@mui/icons-material/LibraryBooks';
|
||||
import { BackstoryLogo } from 'components/ui/BackstoryLogo';
|
||||
import { HomePage } from 'pages/HomePage';
|
||||
import { CandidateChatPage } from 'pages/CandidateChatPage';
|
||||
@ -26,25 +27,20 @@ import { DocsPage } from 'pages/DocsPage';
|
||||
import { CreateProfilePage } from 'pages/candidate/ProfileWizard';
|
||||
import { VectorVisualizerPage } from 'pages/VectorVisualizerPage';
|
||||
import { BetaPage } from 'pages/BetaPage';
|
||||
import { CandidateListingPage } from 'pages/FindCandidatePage';
|
||||
import { JobAnalysisPage } from 'pages/JobAnalysisPage';
|
||||
import { GenerateCandidate } from 'pages/GenerateCandidate';
|
||||
import { Settings } from 'pages/candidate/Settings';
|
||||
import { LoginPage } from 'pages/LoginPage';
|
||||
import { CandidateDashboard } from 'pages/candidate/Dashboard';
|
||||
import { EmailVerificationPage } from 'components/EmailVerificationComponents';
|
||||
import { Box, Typography } from '@mui/material';
|
||||
import { CandidateDashboard } from 'pages/candidate/Dashboard';
|
||||
import { NavigationConfig, NavigationItem } from 'types/navigation';
|
||||
import { HowItWorks } from 'pages/HowItWorks';
|
||||
import SchoolIcon from '@mui/icons-material/School';
|
||||
import { CandidateProfile } from 'pages/candidate/Profile';
|
||||
import { Settings } from 'pages/candidate/Settings';
|
||||
import { VectorVisualizer } from 'components/VectorVisualizer';
|
||||
import { DocumentManager } from 'components/DocumentManager';
|
||||
import { VectorVisualizer } from 'components/VectorVisualizer';
|
||||
import { HowItWorks } from 'pages/HowItWorks';
|
||||
|
||||
// Beta page components for placeholder routes
|
||||
const BackstoryPage = () => (<BetaPage><Typography variant="h4">Backstory</Typography></BetaPage>);
|
||||
const ResumesPage = () => (<BetaPage><Typography variant="h4">Resumes</Typography></BetaPage>);
|
||||
const QASetupPage = () => (<BetaPage><Typography variant="h4">Q&A Setup</Typography></BetaPage>);
|
||||
const SearchPage = () => (<BetaPage><Typography variant="h4">Search</Typography></BetaPage>);
|
||||
const SavedPage = () => (<BetaPage><Typography variant="h4">Saved</Typography></BetaPage>);
|
||||
const JobsPage = () => (<BetaPage><Typography variant="h4">Jobs</Typography></BetaPage>);
|
||||
@ -65,9 +61,7 @@ export const navigationConfig: NavigationConfig = {
|
||||
{ id: 'candidate-docs', label: 'Documents', icon: <BubbleChart />, path: '/candidate/documents', component: <Box sx={{ display: "flex", width: "100%", flexDirection: "column" }}><VectorVisualizer /><DocumentManager /></Box>, userTypes: ['candidate'] },
|
||||
{ id: 'candidate-qa-setup', label: 'Q&A Setup', icon: <QuizIcon />, path: '/candidate/qa-setup', component: <BetaPage><Box>Candidate q&a setup page</Box></BetaPage>, userTypes: ['candidate'] },
|
||||
{ id: 'candidate-analytics', label: 'Analytics', icon: <AnalyticsIcon />, path: '/candidate/analytics', component: <BetaPage><Box>Candidate analytics page</Box></BetaPage>, userTypes: ['candidate'] },
|
||||
{ id: 'candidate-job-analysis', label: 'Job Analysis', path: '/candidate/job-analysis', icon: <WorkIcon />, component: <JobAnalysisPage />, userTypes: ['candidate'], showInNavigation: false,
|
||||
showInUserMenu: true,
|
||||
userMenuGroup: 'profile',},
|
||||
{ id: 'candidate-job-analysis', label: 'Job Analysis', path: '/candidate/job-analysis', icon: <WorkIcon />, component: <JobAnalysisPage />, userTypes: ['candidate'], },
|
||||
{ id: 'candidate-resumes', label: 'Resumes', icon: <DescriptionIcon />, path: '/candidate/resumes', component: <BetaPage><Box>Candidate resumes page</Box></BetaPage>, userTypes: ['candidate'] },
|
||||
{ id: 'candidate-settings', label: 'Settings', path: '/candidate/settings', icon: <SettingsIcon />, component: <Settings />, userTypes: ['candidate'], },
|
||||
],
|
||||
@ -82,101 +76,24 @@ export const navigationConfig: NavigationConfig = {
|
||||
{ id: 'employer-company', label: 'Company', path: '/employer/company', icon: <BusinessIcon />, component: <CompanyPage />, userTypes: ['employer'], },
|
||||
{ id: 'employer-analytics', label: 'Analytics', path: '/employer/analytics', icon: <BarChartIcon />, component: <AnalyticsPage />, userTypes: ['employer'], },
|
||||
{ id: 'employer-settings', label: 'Settings', path: '/employer/settings', icon: <SettingsIcon />, component: <SettingsPage />, userTypes: ['employer'], },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'global-tools',
|
||||
label: 'Tools',
|
||||
icon: <SettingsIcon />,
|
||||
userTypes: ['candidate', 'employer'],
|
||||
showInNavigation: true,
|
||||
children: [
|
||||
{
|
||||
id: 'knowledge-explorer',
|
||||
label: 'Knowledge Explorer',
|
||||
path: '/knowledge-explorer',
|
||||
icon: <WorkIcon />,
|
||||
component: <VectorVisualizerPage />,
|
||||
userTypes: ['candidate', 'employer'],
|
||||
showInNavigation: true,
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'job-analysis',
|
||||
label: 'Job Analysis',
|
||||
path: '/job-analysis',
|
||||
icon: <WorkIcon />,
|
||||
component: <JobAnalysisPage />,
|
||||
userTypes: ['candidate', 'employer'],
|
||||
showInNavigation: true,
|
||||
},
|
||||
{
|
||||
id: 'generate-candidate',
|
||||
label: 'Generate Candidate',
|
||||
path: '/generate-candidate',
|
||||
icon: <PersonIcon />,
|
||||
component: <GenerateCandidate />,
|
||||
userTypes: ['candidate', 'employer'],
|
||||
showInNavigation: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
// User menu only items (not shown in main navigation)
|
||||
// { id: 'find-candidate', label: 'Find a Candidate', path: '/find-a-candidate', icon: <PersonSearchIcon />, component: <CandidateListingPage />, userTypes: ['guest', 'candidate', 'employer'], },
|
||||
{
|
||||
id: 'user-profile',
|
||||
label: 'Profile',
|
||||
path: '/profile',
|
||||
icon: <PersonIcon />,
|
||||
component: <AnalyticsPage />, // Replace with actual profile page
|
||||
userTypes: ['candidate', 'employer'],
|
||||
showInNavigation: false,
|
||||
showInUserMenu: true,
|
||||
userMenuGroup: 'profile',
|
||||
},
|
||||
{
|
||||
id: 'account-settings',
|
||||
label: 'Account Settings',
|
||||
path: '/account/settings',
|
||||
icon: <SettingsIcon />,
|
||||
component: <SettingsPage />,
|
||||
userTypes: ['candidate', 'employer'],
|
||||
showInNavigation: false,
|
||||
showInUserMenu: true,
|
||||
userMenuGroup: 'account',
|
||||
},
|
||||
{
|
||||
id: 'billing',
|
||||
label: 'Billing',
|
||||
path: '/billing',
|
||||
icon: <AttachMoneyIcon />,
|
||||
component: <AnalyticsPage />, // Replace with actual billing page
|
||||
userTypes: ['candidate', 'employer'],
|
||||
showInNavigation: false,
|
||||
showInUserMenu: true,
|
||||
userMenuGroup: 'account',
|
||||
},
|
||||
{
|
||||
id: 'user-menu-divider',
|
||||
label: '',
|
||||
userTypes: ['candidate', 'employer'],
|
||||
showInNavigation: false,
|
||||
showInUserMenu: true,
|
||||
divider: true,
|
||||
},
|
||||
{
|
||||
id: 'logout',
|
||||
label: 'Logout',
|
||||
icon: <PersonIcon />, // This will be handled specially in Header
|
||||
userTypes: ['candidate', 'employer'],
|
||||
showInNavigation: false,
|
||||
showInUserMenu: true,
|
||||
userMenuGroup: 'system',
|
||||
id: 'admin-menu',
|
||||
label: 'Admin',
|
||||
icon: <PersonIcon />,
|
||||
userTypes: ['admin'],
|
||||
children: [
|
||||
{ id: 'generate-candidate', label: 'Generate Candidate', path: '/admin/generate-candidate', icon: <FaceRetouchingNaturalIcon />, component: <GenerateCandidate />, userTypes: ['admin'] },
|
||||
{ id: 'docs', label: 'Docs', path: '/docs/*', icon: <LibraryBooksIcon />, component: <DocsPage />, userTypes: ['admin'], },
|
||||
],
|
||||
},
|
||||
// Auth routes (special handling)
|
||||
{
|
||||
id: 'auth',
|
||||
label: 'Auth',
|
||||
userTypes: ['guest', 'candidate', 'employer'],
|
||||
showInNavigation: false,
|
||||
children: [
|
||||
{
|
||||
id: 'register',
|
||||
@ -184,7 +101,6 @@ export const navigationConfig: NavigationConfig = {
|
||||
path: '/register',
|
||||
component: <BetaPage><CreateProfilePage /></BetaPage>,
|
||||
userTypes: ['guest'],
|
||||
showInNavigation: false,
|
||||
},
|
||||
{
|
||||
id: 'login',
|
||||
@ -192,7 +108,6 @@ export const navigationConfig: NavigationConfig = {
|
||||
path: '/login/*',
|
||||
component: <LoginPage />,
|
||||
userTypes: ['guest', 'candidate', 'employer'],
|
||||
showInNavigation: false,
|
||||
},
|
||||
{
|
||||
id: 'verify-email',
|
||||
@ -200,15 +115,13 @@ export const navigationConfig: NavigationConfig = {
|
||||
path: '/login/verify-email',
|
||||
component: <EmailVerificationPage />,
|
||||
userTypes: ['guest', 'candidate', 'employer'],
|
||||
showInNavigation: false,
|
||||
},
|
||||
{
|
||||
id: 'logout-page',
|
||||
id: 'logout',
|
||||
label: 'Logout',
|
||||
path: '/logout',
|
||||
component: <LogoutPage />,
|
||||
userTypes: ['candidate', 'employer'],
|
||||
showInNavigation: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -219,19 +132,16 @@ export const navigationConfig: NavigationConfig = {
|
||||
path: '*',
|
||||
component: <BetaPage />,
|
||||
userTypes: ['guest', 'candidate', 'employer'],
|
||||
showInNavigation: false,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// Utility functions for working with navigation config
|
||||
export const getNavigationItemsForUser = (userType: 'guest' | 'candidate' | 'employer' | null, isAdmin: boolean = false): NavigationItem[] => {
|
||||
const currentUserType = userType || 'guest';
|
||||
|
||||
const currentUserType = userType || 'guest';
|
||||
const filterItems = (items: NavigationItem[]): NavigationItem[] => {
|
||||
return items
|
||||
.filter(item => !item.userTypes || item.userTypes.includes(currentUserType) || (item.userTypes.includes('admin') && isAdmin))
|
||||
.filter(item => item.showInNavigation !== false) // Default to true if not specified
|
||||
.filter(item => !item.userTypes || item.userTypes.includes(currentUserType) || (item.userTypes.includes('admin') && isAdmin))
|
||||
.map(item => ({
|
||||
...item,
|
||||
children: item.children ? filterItems(item.children) : undefined,
|
||||
@ -249,7 +159,7 @@ export const getAllRoutes = (userType: 'guest' | 'candidate' | 'employer' | null
|
||||
const routes: NavigationItem[] = [];
|
||||
|
||||
items.forEach(item => {
|
||||
if (!item.userTypes || item.userTypes.includes(currentUserType) || (item.userTypes.includes('admin') && isAdmin)) {
|
||||
if (!item.userTypes || item.userTypes.includes(currentUserType) || (item.userTypes.includes('admin') && isAdmin)) {
|
||||
if (item.path && item.component) {
|
||||
routes.push(item);
|
||||
}
|
||||
@ -266,54 +176,10 @@ export const getAllRoutes = (userType: 'guest' | 'candidate' | 'employer' | null
|
||||
};
|
||||
|
||||
export const getMainNavigationItems = (userType: 'guest' | 'candidate' | 'employer' | null, isAdmin: boolean = false): NavigationItem[] => {
|
||||
return getNavigationItemsForUser(userType, isAdmin)
|
||||
return getNavigationItemsForUser(userType, isAdmin)
|
||||
.filter(item =>
|
||||
item.id !== 'auth' &&
|
||||
item.id !== 'catch-all' &&
|
||||
item.showInNavigation !== false &&
|
||||
(item.path || (item.children && item.children.length > 0))
|
||||
);
|
||||
};
|
||||
|
||||
export const getUserMenuItems = (userType: 'candidate' | 'employer' | 'guest' | null): NavigationItem[] => {
|
||||
if (!userType) return [];
|
||||
|
||||
const extractUserMenuItems = (items: NavigationItem[]): NavigationItem[] => {
|
||||
const menuItems: NavigationItem[] = [];
|
||||
|
||||
items.forEach(item => {
|
||||
if (!item.userTypes || item.userTypes.includes(userType)) {
|
||||
if (item.showInUserMenu) {
|
||||
menuItems.push(item);
|
||||
}
|
||||
if (item.children) {
|
||||
menuItems.push(...extractUserMenuItems(item.children));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return menuItems;
|
||||
};
|
||||
|
||||
return extractUserMenuItems(navigationConfig.items);
|
||||
};
|
||||
|
||||
export const getUserMenuItemsByGroup = (userType: 'candidate' | 'employer' | 'guest' | null): { [key: string]: NavigationItem[] } => {
|
||||
const menuItems = getUserMenuItems(userType);
|
||||
const grouped: { [key: string]: NavigationItem[] } = {
|
||||
profile: [],
|
||||
account: [],
|
||||
system: [],
|
||||
other: []
|
||||
};
|
||||
|
||||
menuItems.forEach(item => {
|
||||
const group = item.userMenuGroup || 'other';
|
||||
if (!grouped[group]) {
|
||||
grouped[group] = [];
|
||||
}
|
||||
grouped[group].push(item);
|
||||
});
|
||||
|
||||
return grouped;
|
||||
};
|
||||
@ -1,3 +1,4 @@
|
||||
// types/navigation.ts
|
||||
import { ReactElement } from 'react';
|
||||
|
||||
export interface NavigationItem {
|
||||
@ -10,9 +11,6 @@ export interface NavigationItem {
|
||||
userTypes?: ('candidate' | 'employer' | 'guest' | 'admin')[];
|
||||
exact?: boolean;
|
||||
divider?: boolean;
|
||||
showInNavigation?: boolean; // Controls if item appears in main navigation
|
||||
showInUserMenu?: boolean; // Controls if item appears in user menu
|
||||
userMenuGroup?: 'profile' | 'account' | 'system'; // Groups items in user menu
|
||||
}
|
||||
|
||||
export interface NavigationConfig {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user