Add settings sidebar

frontend/src/components/routes/event/Settings/Sections/EventDetailsForm/index.tsx

@@ -62,7 +62,7 @@ export const EventDetailsForm = () => {
     return (
         <Card>
             <HeadingWithDescription
-                heading={t`Basic Details`}
+                heading={t`Event Details`}
                 description={t`Update event name, description and dates`}
             />
             <form onSubmit={form.onSubmit(handleSubmit)}>

frontend/src/components/routes/event/Settings/index.tsx

@@ -7,22 +7,109 @@ import {PageTitle} from "../../../common/PageTitle";
 import {t} from "@lingui/macro";
 import {SeoSettings} from "./Sections/SeoSettings";
 import {MiscSettings} from "./Sections/MiscSettings";
+import {Box, Group, NavLink as MantineNavLink, Stack} from "@mantine/core";
+import {
+    IconAdjustments,
+    IconAt,
+    IconBrandGoogleAnalytics,
+    IconBuildingStore,
+    IconHome,
+    IconMapPin,
+} from "@tabler/icons-react";
+import {useMediaQuery} from "@mantine/hooks";
+import {useState} from "react";
+import {Card} from "../../../common/Card";
+
+const SECTIONS = [
+    {
+        id: 'event-details',
+        label: t`Event Details`,
+        icon: IconBuildingStore,
+        component: EventDetailsForm
+    },
+    {
+        id: 'location-settings',
+        label: t`Location`,
+        icon: IconMapPin,
+        component: LocationSettings
+    },
+    {
+        id: 'homepage-settings',
+        label: t`Checkout`,
+        icon: IconHome,
+        component: HomepageAndCheckoutSettings
+    },
+    {
+        id: 'seo-settings',
+        label: t`SEO`,
+        icon: IconBrandGoogleAnalytics,
+        component: SeoSettings
+    },
+    {
+        id: 'email-settings',
+        label: t`Email`,
+        icon: IconAt,
+        component: EmailSettings
+    },
+    {
+        id: 'misc-settings',
+        label: t`Miscellaneous`,
+        icon: IconAdjustments,
+        component: MiscSettings
+    }
+];
 
 export const Settings = () => {
+    const isLargeScreen = useMediaQuery('(min-width: 1200px)');
+    const [activeSection, setActiveSection] = useState(SECTIONS[0].id);
+
+    const handleClick = (sectionId: string) => {
+        setActiveSection(sectionId);
+        document.getElementById(sectionId)?.scrollIntoView({behavior: 'smooth'});
+    };
+
+    const sideMenu = (
+        <Card style={{padding: '15px'}}>
+            <Stack gap="xs">
+                {SECTIONS.map((section) => (
+                    <MantineNavLink
+                        style={{borderRadius: '5px'}}
+                        key={section.id}
+                        active={activeSection === section.id}
+                        label={section.label}
+                        leftSection={<section.icon size={16} stroke={1.5}/>}
+                        onClick={() => handleClick(section.id)}
+                    />
+                ))}
+            </Stack>
+        </Card>
+    );
+
+    const content = SECTIONS.map(({id, component: Component}) => (
+        <div key={id} id={id} style={{scrollMarginTop: '20px'}}>
+            <Component/>
+        </div>
+    ));
+
     return (
-        <PageBody isFluid={false}>
-            <PageTitle>
-                {t`Settings`}
-            </PageTitle>
-
-            <EventDetailsForm/>
-            <LocationSettings/>
-            <HomepageAndCheckoutSettings/>
-            <SeoSettings/>
-            <EmailSettings/>
-            <MiscSettings/>
+        <PageBody>
+            <PageTitle>{t`Settings`}</PageTitle>
+
+            {isLargeScreen ? (
+                <Group align="flex-start" gap="xl">
+                    <Box w={240} style={{position: 'sticky', top: 20}}>
+                        {sideMenu}
+                    </Box>
+                    <Box style={{flex: 1}}>{content}</Box>
+                </Group>
+            ) : (
+                <Stack>
+                    {sideMenu}
+                    {content}
+                </Stack>
+            )}
         </PageBody>
     );
 };
 
-export default Settings;
+export default Settings;