feat(ui): add collapsible interaction to sidebar (#3406)

* refactor(ui): admin sidebar refactoring * update: sidebar tooltip * [autofix.ci] apply automated fixes * remove breadcrumb * update * [autofix.ci] apply automated fixes * update: tailwind.config.js * update * update * update --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
TabbyML · Nov 12, 2024 · 6b23503 · 6b23503
1 parent a7d29b8
commit 6b23503
Show file tree

Hide file tree

Showing 21 changed files with 1,015 additions and 199 deletions.
diff --git a/ee/tabby-ui/app/(dashboard)/activities/components/activity.tsx b/ee/tabby-ui/app/(dashboard)/activities/components/activity.tsx
@@ -144,9 +144,9 @@ export default function Activity() {
   return (
     <>
       <div className="flex w-full flex-col">
-        <div className="flex flex-col sm:gap-4 sm:py-4">
+        <div className="flex flex-col sm:gap-4">
           <main className="grid flex-1 items-start gap-4 py-4 sm:py-0">
-            <div className="flex flex-col gap-y-2 xl:flex-row xl:items-center xl:justify-between">
+            <div className="flex min-h-[theme(space.9)] flex-col gap-y-2 xl:flex-row xl:items-center xl:justify-between">
               <p className="text-sm text-muted-foreground">{`View raw events generated by team members' activities while interacting with Tabby.`}</p>
 
               {members.length > 0 && (

diff --git a/ee/tabby-ui/app/(dashboard)/components/main-content.tsx b/ee/tabby-ui/app/(dashboard)/components/main-content.tsx
@@ -1,6 +1,10 @@
 'use client'
 
+import { useEffect, useRef } from 'react'
+import { usePathname } from 'next/navigation'
+
 import { ScrollArea } from '@/components/ui/scroll-area'
+import { SidebarInset } from '@/components/ui/sidebar'
 import { BANNER_HEIGHT, useShowDemoBanner } from '@/components/demo-banner'
 import { Header } from '@/components/header'
 import { useShowLicenseBanner } from '@/components/license-banner'
@@ -10,6 +14,8 @@ export default function MainContent({
 }: {
   children: React.ReactNode
 }) {
+  const pathname = usePathname()
+  const scroller = useRef<HTMLDivElement>(null)
   const [isShowDemoBanner] = useShowDemoBanner()
   const [isShowLicenseBanner] = useShowLicenseBanner()
   const style =
@@ -21,16 +27,19 @@ export default function MainContent({
         }
       : { height: '100vh' }
 
+  useEffect(() => {
+    if (pathname && scroller.current) {
+      scroller.current.scrollTop = 0
+    }
+  }, [pathname])
+
   return (
-    <>
+    <SidebarInset>
       {/* Wraps right hand side into ScrollArea, making scroll bar consistent across all browsers */}
-      <ScrollArea
-        className={'flex flex-1 flex-col transition-all'}
-        style={style}
-      >
+      <ScrollArea ref={scroller} style={style}>
         <Header />
-        <div className="flex-1 p-4 lg:p-10">{children}</div>
+        <div className="p-4 lg:p-10">{children}</div>
       </ScrollArea>
-    </>
+    </SidebarInset>
   )
 }