settings page

- restructuring profile -> settings
- new sidebar

Author: dheidemann

frontend/app/(planner)/layout.tsx

@@ -31,29 +31,6 @@ export default function PlannerLayout({ children }: PlannerLayoutProps) {
 
   const basePath = "/" + pathname.split("/")[1];
 
-  const adminNav = [
-    {
-      title: "Stundenplan",
-      href: basePath,
-    },
-    {
-      title: "Überblick",
-      href: basePath + "/overview",
-    },
-    {
-      title: "Veranstaltungen",
-      href: basePath + "/events",
-    },
-    {
-      title: "Anmeldungen",
-      href: basePath + "/applications",
-    },
-    {
-      title: "Einstellungen",
-      href: basePath + "/settings",
-    },
-  ];
-
   useEffect(() => {
     const fetchData = async () => {
       const client = getClient();

frontend/app/(planner)/sidebar.tsx

@@ -1,4 +1,4 @@
-import { BookCheck, Calendar, GraduationCap } from "lucide-react"
+import { BookCheck, Calendar, GraduationCap } from "lucide-react";
 
 import {
   Sidebar,
@@ -9,43 +9,47 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
-} from "@/components/ui/sidebar"
-import {UmbrellaPopoverSelection} from "@/components/umbrella-popover-selection"
-import {Event} from "@/lib/gql/generated/graphql"
-import {usePathname} from "next/navigation"
+} from "@/components/ui/sidebar";
+import { UmbrellaPopoverSelection } from "@/components/umbrella-popover-selection";
+import { Event } from "@/lib/gql/generated/graphql";
+import { usePathname } from "next/navigation";
 
 interface AdminSidebarProps {
-  umbrellas: Event[]
+  umbrellas: Event[];
 }
 
-export function AdminSidebar({umbrellas}: AdminSidebarProps) {
-  const pathname = usePathname()
+export function AdminSidebar({ umbrellas }: AdminSidebarProps) {
+  const pathname = usePathname();
 
-  const basePath = "/" + pathname.split("/")[1]
+  const basePath = "/" + pathname.split("/")[1];
+
+  const items = [
+    {
+      title: "Stundenplan",
+      url: basePath,
+      icon: Calendar,
+    },
+    {
+      title: "Tutorien",
+      url: basePath + "/tutorials",
+      icon: GraduationCap,
+    },
+    {
+      title: "Anmeldungen",
+      url: basePath + "/registrations",
+      icon: BookCheck,
+    },
+  ];
 
-const items = [
-  {
-    title: "Stundenplan",
-    url: basePath,
-    icon: Calendar,
-  },
-  {
-    title: "Tutorien",
-    url: basePath + "/tutorials",
-    icon: GraduationCap,
-  },
-  {
-    title: "Anmeldungen",
-    url: basePath + "/registrations",
-    icon: BookCheck,
-  },
-]
   return (
     <Sidebar>
       <SidebarHeader>
         <SidebarMenu>
           <SidebarMenuItem>
-            <UmbrellaPopoverSelection umbrellas={umbrellas} className="w-full justify-between" />
+            <UmbrellaPopoverSelection
+              umbrellas={umbrellas}
+              className="w-full justify-between"
+            />
           </SidebarMenuItem>
         </SidebarMenu>
       </SidebarHeader>
@@ -68,5 +72,5 @@ const items = [
         </SidebarGroup>
       </SidebarContent>
     </Sidebar>
-  )
+  );
 }

frontend/app/(profile)/profile/layout.tsx

@@ -0,0 +1,22 @@
+import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
+import { ProfileSidebar } from "./sidebar";
+import { Footer } from "@/components/footer";
+
+interface SettingsLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function SettingsLayout({ children }: SettingsLayoutProps) {
+  return (
+    <SidebarProvider>
+      <ProfileSidebar />
+      <main className="flex-1 mt-[80px]">
+        <div className="p-5">
+          <SidebarTrigger className="mb-2" />
+          {children}
+        </div>
+        <Footer />
+      </main>
+    </SidebarProvider>
+  );
+}

frontend/app/(settings)/layout.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import {
+  BookCheck,
+  CalendarCheck2,
+  GraduationCap,
+  Mail,
+  School,
+  Settings,
+  Users,
+} from "lucide-react";
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/components/ui/sidebar";
+import { useUser } from "@/components/providers";
+import { Role } from "@/lib/gql/generated/graphql";
+
+export function ProfileSidebar() {
+  const { user } = useUser();
+
+  const userItems = [
+    {
+      title: "Einstellungen",
+      url: "/profile",
+      icon: Settings,
+    },
+    {
+      title: "Meine Anmeldungen",
+      url: "/profile/registrations",
+      icon: BookCheck,
+    },
+    {
+      title: "Meine Tutorien",
+      url: "/profile/tutorials",
+      icon: GraduationCap,
+    },
+    {
+      title: "Meine Verfügbarkeiten",
+      url: "/profile/registrations",
+      icon: CalendarCheck2,
+    },
+  ];
+
+  const adminItems = [
+    {
+      title: "E-Mails",
+      url: "/admin/mails",
+      icon: Mail,
+    },
+    {
+      title: "Nutzerverwaltung",
+      url: "/admin/users",
+      icon: Users,
+    },
+    {
+      title: "Räume & Gebäude",
+      url: "/admin/rooms",
+      icon: School,
+    },
+  ];
+
+  return (
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {userItems.map((item) => (
+                <SidebarMenuItem key={item.title}>
+                  <SidebarMenuButton asChild>
+                    <a href={item.url}>
+                      <item.icon />
+                      <span>{item.title}</span>
+                    </a>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+        {user?.role === Role.Admin && (
+          <SidebarGroup>
+            <SidebarGroupLabel>Administration</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {adminItems.map((item) => (
+                  <SidebarMenuItem key={item.title}>
+                    <SidebarMenuButton asChild>
+                      <a href={item.url}>
+                        <item.icon />
+                        <span>{item.title}</span>
+                      </a>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        )}
+      </SidebarContent>
+    </Sidebar>
+  );
+}