Skip to content

Feat/settings subpages integration #969

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

Open
Eli1705 wants to merge 5 commits into
base: feat/settings-redesign
Choose a base branch
from
Open

Feat/settings subpages integration #969

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0067cf7
feat(subpages): new Navigation for settings subpages
Eli1705 Mar 20, 2026
ef2efd5
fix(settings): design of settings Page
Eli1705 Mar 23, 2026
c765117
fix(student): update profile Student
Eli1705 Apr 15, 2026
6780a50
fix(#969): small changes
Eli1705 Apr 15, 2026
8dfe091
fix(#969): profile navigate only on desktop
Eli1705 Apr 21, 2026
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
13 changes: 2 additions & 11 deletions src/pages/CalendarPreferencesPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,16 +59,7 @@ const CalendarPreferencesPage = () => {
};

return (
<WithNavigation
previousFallbackRoute="/settings"
headerLeft={
<div className="flex items-center flex-row">
<SwitchLanguageButton />
<NotificationAlert />
</div>
}
>
<Breadcrumb />
<>
<Typography variant="h4" className="mb-5">
{t('navigation.label.calendarPreferences')}
</Typography>
Expand All @@ -84,7 +75,7 @@ const CalendarPreferencesPage = () => {
</Button>
</div>
</div>
</WithNavigation>
</>
);
};

Expand Down
16 changes: 2 additions & 14 deletions src/pages/ChangeEmail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,23 +77,11 @@ const ChangeEmail = () => {
}

return (
<WithNavigation
hideMenu={isMobileSM}
previousFallbackRoute="/settings"
headerLeft={
!isMobileSM && (
<Stack alignItems="center" direction="row">
<SwitchLanguageButton />
<NotificationAlert />
</Stack>
)
}
>
<>
{loading || !data ? (
<CenterLoadingSpinner />
) : (
<Flex overflowY="auto" height="100dvh">
<Breadcrumb />
<Box position="relative" paddingY={space['2']} justifyContent="center" alignItems="center">
<Logo />
<Heading mt={space['1']}>{t('login.setNewEmail')}</Heading>
Expand Down Expand Up @@ -123,7 +111,7 @@ const ChangeEmail = () => {
</VStack>
</Flex>
)}
</WithNavigation>
</>
);
};

Expand Down
64 changes: 26 additions & 38 deletions src/pages/Helpcenter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,45 +39,33 @@ const HelpCenter: React.FC = () => {

return (
<AsNavigationItem path="hilfebereich">
<WithNavigation
previousFallbackRoute="/settings"
headerTitle="Hilfebereich"
headerLeft={
<div className="flex items-center flex-row">
<SwitchLanguageButton />
<NotificationAlert />
</div>
}
>
<div className="h-full flex flex-col">
<div className="w-full max-w-5xl pb-3 px-1.5">
<Breadcrumb />
<Typography variant="h4" className="mb-1.5">
{t('helpcenter.title')}
</Typography>
<SwitchUserType
pupilComponent={<Typography>{t('helpcenter.subtitle.pupil')}</Typography>}
studentComponent={<Typography>{t('helpcenter.subtitle.student')}</Typography>}
/>
</div>
<Tabs className="h-full" defaultValue={defaultValue}>
<TabsList>
{isPupil && <TabsTrigger value="faq-sus">{t('helpcenter.faq.tabName')}</TabsTrigger>}
{isStudent && <TabsTrigger value="faq-huh">{t('helpcenter.faq.tabName')}</TabsTrigger>}
<TabsTrigger value="contact">{t('helpcenter.contact.tabName')}</TabsTrigger>
</TabsList>
<TabsContent value="faq-sus" className="h-full">
<IFrame src="https://www.lern-fair.de/iframe/faq-sus" title="faq" width="100%" />
</TabsContent>
<TabsContent value="faq-huh" className="h-full">
<IFrame src="https://www.lern-fair.de/iframe/faq-huh" title="faq" width="100%" />
</TabsContent>
<TabsContent value="contact" className="h-full pt-4">
<ContactSupportForm />
</TabsContent>
</Tabs>
<div className="h-full flex flex-col">
<div className="w-full max-w-5xl pb-3 px-1.5">
<Typography variant="h4" className="mb-1.5">
{t('helpcenter.title')}
</Typography>
<SwitchUserType
pupilComponent={<Typography>{t('helpcenter.subtitle.pupil')}</Typography>}
studentComponent={<Typography>{t('helpcenter.subtitle.student')}</Typography>}
/>
</div>
</WithNavigation>
<Tabs className="h-full" defaultValue={defaultValue}>
<TabsList>
{isPupil && <TabsTrigger value="faq-sus">{t('helpcenter.faq.tabName')}</TabsTrigger>}
{isStudent && <TabsTrigger value="faq-huh">{t('helpcenter.faq.tabName')}</TabsTrigger>}
<TabsTrigger value="contact">{t('helpcenter.contact.tabName')}</TabsTrigger>
</TabsList>
<TabsContent value="faq-sus" className="h-full">
<IFrame src="https://www.lern-fair.de/iframe/faq-sus" title="faq" width="100%" />
</TabsContent>
<TabsContent value="faq-huh" className="h-full">
<IFrame src="https://www.lern-fair.de/iframe/faq-huh" title="faq" width="100%" />
</TabsContent>
<TabsContent value="contact" className="h-full pt-4">
<ContactSupportForm />
</TabsContent>
</Tabs>
</div>
</AsNavigationItem>
);
};
Expand Down
18 changes: 1 addition & 17 deletions src/pages/ResetPassword.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,6 @@ const ResetPassword: React.FC<Props> = ({ layout }) => {
<>
{layout === 'new-pw' ? (
<>
<Breadcrumb />
<Box paddingY={space['2']} justifyContent="center" alignItems="center">
<Logo />
<Heading mt={space['1']}>{t('set_password.title')}</Heading>
Expand Down Expand Up @@ -183,21 +182,6 @@ const ResetPassword: React.FC<Props> = ({ layout }) => {
return Content;
}

return (
<WithNavigation
hideMenu={isMobileSM}
previousFallbackRoute={'/settings'}
headerLeft={
!isMobileSM && (
<Stack alignItems="center" direction="row">
<SwitchLanguageButton />
<NotificationAlert />
</Stack>
)
}
>
{Content}
</WithNavigation>
);
return <>{Content}</>;
};
export default ResetPassword;
14 changes: 2 additions & 12 deletions src/pages/SessionManager.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,17 +44,7 @@ const SessionManager: React.FC = () => {
};

return (
<WithNavigation
previousFallbackRoute="/settings"
headerTitle={t('sessionManager.title')}
headerLeft={
<div className="flex items-center flex-row">
<SwitchLanguageButton />
<NotificationAlert />
</div>
}
>
<Breadcrumb />
<>
<Typography variant="h2" className="mb-4">
{t('sessionManager.title')}
</Typography>
Expand Down Expand Up @@ -99,7 +89,7 @@ const SessionManager: React.FC = () => {
))
)}
</div>
</WithNavigation>
</>
);
};

Expand Down
64 changes: 33 additions & 31 deletions src/pages/Settings.tsx
View file
Open in desktop
Comment thread
Eli1705 marked this conversation as resolved.
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ import { Typography } from '@/components/Typography';
interface SettingItemType {
title: string;
icon: React.ElementType;
mobileFallbackLink: string;
link: string;
element?: JSX.Element;
onClick?: () => void;
}
Expand All @@ -59,6 +59,8 @@ const Settings: React.FC = () => {
const [showDeactivate, setShowDeactivate] = useState(false);
const [showSwitchLanguage, setShowSwitchLanguage] = useState(false);

const isSettingsRoute = location.pathname === '/settings';

useEffect(() => {
trackPageView({
documentTitle: 'Einstellungen',
Expand All @@ -83,16 +85,16 @@ const Settings: React.FC = () => {
const profileSettings: SettingItemType[] = [
...(userType !== 'screener'
? [
{ title: t('settings.general.profile'), icon: IconUser, mobileFallbackLink: '/profile' },
{ title: t('settings.general.notifications'), icon: IconBell, mobileFallbackLink: '/notifications' },
{ title: t('settings.general.profile'), icon: IconUser, link: '/settings/profile' },
{ title: t('settings.general.notifications'), icon: IconBell, link: '/settings/notifications' },
{
title: t('settings.general.calendarPreferences'),
icon: IconCalendarWeek,
mobileFallbackLink: '/calendar-preferences',
link: '/settings/calendar-preferences',
},
]
: []),
...(userType === 'student' ? [{ title: t('settings.general.certificates'), icon: IconCertificate, mobileFallbackLink: '/certificates' }] : []),
...(userType === 'student' ? [{ title: t('settings.general.certificates'), icon: IconCertificate, link: '/settings/certificates' }] : []),
];

const generalSettings: SettingItemType[] = [
Expand All @@ -101,43 +103,43 @@ const Settings: React.FC = () => {
{
title: t('settings.general.progress'),
icon: IconTrophy,
mobileFallbackLink: '/progress',
link: '/progress',
},
]
: []),
{
title: t('settings.general.faq'),
icon: IconHelpCircle,
mobileFallbackLink: '/hilfebereich',
link: '/settings/hilfebereich',
},
{
title: t('installation.installTitle'),
icon: IconDownload,
mobileFallbackLink: '/install',
link: '/install',
},
{
title: t('settings.general.manageSessions'),
icon: IconDevices,
mobileFallbackLink: '/manage-sessions',
link: '/settings/manage-sessions',
},
...(userType === 'student' && isMobile ? [{ title: t('settings.general.forStudents'), icon: IconBook2, mobileFallbackLink: '/knowledge-helper' }] : []),
...(userType === 'pupil' && isMobile ? [{ title: t('settings.general.forPupils'), icon: IconBook2, mobileFallbackLink: '/knowledge-pupil' }] : []),
...(LESSON_PLAN_GENERATOR_ACTIVE ? [{ title: t('navigation.label.lesson'), icon: IconDownload, mobileFallbackLink: '/lesson' }] : []),
...(isMobile && REFERRALS_ACTIVE ? [{ title: t('navigation.label.referral'), icon: IconSpeakerphone, mobileFallbackLink: '/referral' }] : []),
...(userType === 'student' && isMobile ? [{ title: t('settings.general.forStudents'), icon: IconBook2, link: '/knowledge-helper' }] : []),
...(userType === 'pupil' && isMobile ? [{ title: t('settings.general.forPupils'), icon: IconBook2, link: '/knowledge-pupil' }] : []),
...(LESSON_PLAN_GENERATOR_ACTIVE ? [{ title: t('navigation.label.lesson'), icon: IconDownload, link: '/lesson' }] : []),
...(isMobile && REFERRALS_ACTIVE ? [{ title: t('navigation.label.referral'), icon: IconSpeakerphone, link: '/referral' }] : []),
];

const accountSettings: SettingItemType[] = [
...(!roles.includes('SSO_USER')
? [
{ title: t('settings.account.changeEmail'), icon: IconMail, mobileFallbackLink: '/new-email' },
{ title: t('settings.account.changePassword'), icon: IconPassword, mobileFallbackLink: '/new-password' },
{ title: t('settings.account.changeEmail'), icon: IconMail, link: '/settings/new-email' },
{ title: t('settings.account.changePassword'), icon: IconPassword, link: '/settings/new-password' },
]
: []),
{ title: t('settings.account.deactivateAccount'), icon: IconUserOff, mobileFallbackLink: '#', onClick: () => setShowDeactivate(true) },
{ title: t('settings.account.deactivateAccount'), icon: IconUserOff, link: '#', onClick: () => setShowDeactivate(true) },
{
title: t('settings.account.logout'),
icon: IconLogout,
mobileFallbackLink: '#',
link: '#',
onClick: () => {
trackEvent({
category: 'profil',
Expand All @@ -151,9 +153,9 @@ const Settings: React.FC = () => {
];

const legalSettings: SettingItemType[] = [
{ title: t('settings.legal.imprint'), icon: IconSectionSign, mobileFallbackLink: '/impressum' },
{ title: t('settings.legal.datapolicy'), icon: IconShieldLock, mobileFallbackLink: '/datenschutz' },
{ title: t('settings.legal.agb'), icon: IconLicense, mobileFallbackLink: `/${userType === 'pupil' ? 'agb-schueler' : 'agb-helfer'}` },
{ title: t('settings.legal.imprint'), icon: IconSectionSign, link: '/impressum' },
{ title: t('settings.legal.datapolicy'), icon: IconShieldLock, link: '/datenschutz' },
{ title: t('settings.legal.agb'), icon: IconLicense, link: `/${userType === 'pupil' ? 'agb-schueler' : 'agb-helfer'}` },
];

const settings = [
Expand All @@ -175,13 +177,13 @@ const Settings: React.FC = () => {
</Button>
}
>
<Typography variant={'h3'} className={'mt-4 mb-11'}>
<Typography variant={'h3'} className={'mt-4 mb-5'}>
{t('settings.general.mySettings')}
</Typography>
<div id={'sidebar'}>
<div className="min-w-full md:min-w-72">
<nav className="flex md:min-w-72 min-w-full pr-8 flex-col h-[calc(100vh-120px)] overflow-y-auto fixed pb-10 justify-between">
<div className="flex flex-col gap-y-4 ">
<div className={'flex'}>
<div className={`min-w-full md:min-w-72 ${!isSettingsRoute && isMobile ? 'hidden' : ''}`}>
<nav className="flex md:min-w-72 min-w-full flex-col h-[calc(100vh-120px)] overflow-y-auto fixed pb-10 justify-between">
<div className="flex flex-col gap-y-4">
{settings.map((group) => {
return (
<SettingRow title={group.title}>
Expand All @@ -190,8 +192,8 @@ const Settings: React.FC = () => {
<SettingItem
title={item.title}
Icon={item.icon}
active={'/' + lastLinkItem === item.mobileFallbackLink}
onClick={item.onClick ? item.onClick : () => navigate(item.mobileFallbackLink)}
active={location.pathname.includes(item.link)}
onClick={item.onClick ? item.onClick : () => navigate(item.link)}
/>
);
})}
Expand All @@ -201,9 +203,9 @@ const Settings: React.FC = () => {
</div>
</nav>
</div>
</div>
<div className={'ml-auto w-full lg:w-[80%] pl-4'}>
<Outlet />
<div className={`ml-auto flex-1 lg:pl-10 h-full`}>
<Outlet />
</div>
</div>
</WithNavigation>
<DeactivateAccountModal isOpen={showDeactivate} onOpenChange={setShowDeactivate} />
Expand Down Expand Up @@ -234,7 +236,7 @@ const SettingItem = ({ title, Icon, onClick, active }: { title: string; Icon: Re
<Typography variant={'subtle'} className={'font-medium'}>
{title}
</Typography>
<div className={'ml-auto'}>
<div className={'ml-auto mr-3'}>
<IconChevronRight />
</div>
</div>
Expand Down
Loading