splitted inside course sidebar into general and course

Author: niclasheun

clients/core/src/Sidebar/AppSidebar.tsx

@@ -1,148 +1,16 @@
 'use client'
 
 import * as React from 'react'
-import {
-  BellElectric,
-  BookOpen,
-  Bot,
-  FileUser,
-  Settings2,
-  SquareTerminal,
-  Users,
-} from 'lucide-react'
 
 import { Sidebar } from '@/components/ui/sidebar'
-import { InsideCourseSidebar } from './InsideCourseSidebar'
+import { InsideSidebar } from './InsideSidebar/InsideSidebar'
 import { CourseSwitchSidebar } from './CourseSwitchSidebar/CourseSwitchSidebar'
 
-const data = {
-  user: {
-    name: 'shadcn',
-    email: '[email protected]',
-    avatar: '/avatars/shadcn.jpg',
-  },
-  navMain: [
-    {
-      title: 'iPraktikum',
-      url: '#',
-      icon: SquareTerminal,
-      isActive: true,
-      items: [
-        {
-          title: 'Application',
-          url: '#',
-          icon: FileUser,
-          items: [
-            {
-              title: 'Dashboard',
-              url: '#',
-            },
-            {
-              title: 'Applications',
-              url: '#',
-            },
-            {
-              title: 'Application Questions',
-              url: '#',
-            },
-          ],
-        },
-        {
-          title: 'Intro Course',
-          url: '#',
-          icon: BellElectric,
-        },
-        {
-          title: 'Team Phase',
-          url: '#',
-          icon: Users,
-        },
-        {
-          title: 'Settings',
-          url: '#',
-          icon: Settings2,
-        },
-      ],
-    },
-    {
-      title: 'Models',
-      url: '#',
-      icon: Bot,
-      items: [
-        {
-          title: 'Genesis',
-          url: '#',
-          icon: Settings2,
-        },
-        {
-          title: 'Explorer',
-          url: '#',
-          icon: Settings2,
-        },
-        {
-          title: 'Quantum',
-          url: '#',
-          icon: Settings2,
-        },
-      ],
-    },
-    {
-      title: 'Documentation',
-      url: '#',
-      icon: BookOpen,
-      items: [
-        {
-          title: 'Introduction',
-          url: '#',
-        },
-        {
-          title: 'Get Started',
-          url: '#',
-        },
-        {
-          title: 'Tutorials',
-          url: '#',
-        },
-        {
-          title: 'Changelog',
-          url: '#',
-        },
-      ],
-    },
-    {
-      title: 'Settings',
-      url: '#',
-      icon: Settings2,
-      items: [
-        {
-          title: 'General',
-          url: '#',
-        },
-        {
-          title: 'Team',
-          url: '#',
-        },
-        {
-          title: 'Billing',
-          url: '#',
-        },
-        {
-          title: 'Limits',
-          url: '#',
-        },
-      ],
-    },
-  ],
-}
-
 interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
   onLogout: () => void
 }
 
 export function AppSidebar({ onLogout, ...props }: AppSidebarProps): JSX.Element {
-  // TODO this will be replaced with router logic
-  const [activeItem] = React.useState(data.navMain[0])
-
   return (
     <Sidebar
       collapsible='icon'
@@ -151,7 +19,7 @@ export function AppSidebar({ onLogout, ...props }: AppSidebarProps): JSX.Element
     >
       {/* This is the first sidebar */}
       <CourseSwitchSidebar onLogout={onLogout} />
-      <InsideCourseSidebar activeItem={activeItem} />
+      <InsideSidebar />
     </Sidebar>
   )
 }

clients/core/src/Sidebar/InsideCourseSidebar.tsx

@@ -0,0 +1,5 @@
+import { SidebarMenu } from '@/components/ui/sidebar'
+
+export const InsideCourseSidebar = (): JSX.Element => {
+  return <SidebarMenu></SidebarMenu>
+}

clients/core/src/Sidebar/InsideSidebar/InsideCourseSidebar.tsx

@@ -0,0 +1,44 @@
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from '@/components/ui/sidebar'
+import { ChevronRight, Settings } from 'lucide-react'
+
+export const InsideGeneralSidebar = (): JSX.Element => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <Collapsible key={'settings'} asChild defaultOpen={false} className='group/collapsible'>
+          <SidebarMenuItem>
+            <CollapsibleTrigger asChild>
+              <SidebarMenuButton tooltip={'Settings'}>
+                <Settings />
+                <span>Settings</span>
+                <ChevronRight className='ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90' />
+              </SidebarMenuButton>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <SidebarMenuSub>
+                <SidebarMenuSubItem key={'Something'}>
+                  <SidebarMenuSubButton asChild>
+                    <span>Something</span>
+                  </SidebarMenuSubButton>
+                </SidebarMenuSubItem>
+                <SidebarMenuSubItem key={'Something else'}>
+                  <SidebarMenuSubButton asChild>
+                    <span>Something else</span>
+                  </SidebarMenuSubButton>
+                </SidebarMenuSubItem>
+              </SidebarMenuSub>
+            </CollapsibleContent>
+          </SidebarMenuItem>
+        </Collapsible>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}

clients/core/src/Sidebar/InsideSidebar/InsideGeneralSidebar.tsx

@@ -0,0 +1,41 @@
+import { Label } from '@/components/ui/label'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarHeader,
+} from '@/components/ui/sidebar'
+import { useCourseStore } from '@/zustand/useCourseStore'
+import { useLocation, useParams } from 'react-router-dom'
+import { InsideCourseSidebar } from './InsideCourseSidebar'
+import { InsideGeneralSidebar } from './InsideGeneralSidebar'
+
+export const InsideSidebar = (): JSX.Element => {
+  const { courses } = useCourseStore()
+  const { courseId } = useParams<{ courseId: string }>()
+  const currentCourse = courses.find((course) => course.id === courseId)
+
+  // set the correct header
+  const location = useLocation()
+  const isCourseSidebar = location.pathname.startsWith('/management/course')
+  const headerName = isCourseSidebar ? currentCourse?.name || 'Unknown Course' : 'General'
+
+  return (
+    <Sidebar collapsible='none' className='flex-1 flex'>
+      <SidebarHeader className='gap-3.5 border-b p-4'>
+        <div className='flex w-full items-center justify-between'>
+          <div className='text-base font-medium text-foreground'>{headerName}</div>
+          <Label className='flex items-center gap-2 text-sm'></Label>
+        </div>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup className='px-2 py-4'>
+          <SidebarGroupContent>
+            {isCourseSidebar ? <InsideCourseSidebar /> : <InsideGeneralSidebar />}
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  )
+}

clients/core/src/Sidebar/InsideSidebar/InsideSidebar.tsx

@@ -66,6 +66,8 @@ export const ManagementRoot = ({ children }: { children?: React.ReactNode }): JS
     return <UnauthorizedPage />
   }
 
+  // TODO: when calling /management -> check for course in local storage, else redirect to /management/general
+
   // TODO do course id management here
   // store latest selected course in local storage
   // check authorization