apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-07-12 22:42:13 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(playground): enhance Playground layout with new sidebar and navigation functions

Browse source 
- Introduced PlaygroundSidebar component for improved navigation within the API Playground.
- Added utility functions for generating navigation items and groups, enhancing modularity and reusability.
- Updated PlaygroundLayoutShell to utilize new navigation functions, streamlining the layout structure.
- Enhanced RoutedSectionShell to support optional desktop navigation, improving responsiveness and user experience.
This commit is contained in:
Anish Sarkar 2026-07-08 10:06:41 +05:30
parent 3eb963b8b3
commit 2fa8b76b56
8 changed files with 284 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

25
surfsense_web/components/layout/ui/RoutedSectionShell.tsx
View file

@ -38,6 +38,7 @@ interface RoutedSectionShellProps {
groups?: RoutedSectionGroup[];
mobileNav?: "scroll" | "drawer";
contentClassName?: string;
desktopNav?: boolean;
}
function findActiveGroupValue(groups: RoutedSectionGroup[], activeValue: string): string | null {
@ -142,6 +143,7 @@ export function RoutedSectionShell({
groups = [],
mobileNav = "scroll",
contentClassName,
desktopNav = true,
}: RoutedSectionShellProps) {
const [tabScrollPos, setTabScrollPos] = useState<"start" | "middle" | "end">("start");
const [drawerOpen, setDrawerOpen] = useState(false);
@ -196,12 +198,17 @@ export function RoutedSectionShell({
);
return (
<section className="flex h-full min-h-[min(680px,calc(100vh-5rem))] w-full select-none flex-col gap-6 md:flex-row">
<div className="md:w-[220px] md:shrink-0">
<section
className={cn(
"flex h-full min-h-[min(680px,calc(100vh-5rem))] w-full select-none flex-col",
desktopNav ? "gap-6 md:flex-row" : "gap-4 md:block"
)}
>
<div className={cn("md:w-[220px] md:shrink-0", !desktopNav && "md:hidden")}>
<h1 className="mb-4 px-1 text-xl font-semibold tracking-tight text-foreground md:text-2xl">
{title}
</h1>
<nav className="hidden flex-col gap-0.5 md:flex">{renderNav()}</nav>
{desktopNav ? <nav className="hidden flex-col gap-0.5 md:flex">{renderNav()}</nav> : null}
{mobileNav === "drawer" ? (
<Drawer open={drawerOpen} onOpenChange={setDrawerOpen} shouldScaleBackground={false}>
<DrawerTrigger asChild>
@ -256,11 +263,15 @@ export function RoutedSectionShell({
</div>
<div className="min-w-0 flex-1">
<div className="hidden md:block">
<h2 className="text-lg font-semibold">{selectedLabel}</h2>
<Separator className="mt-4 bg-border" />
{desktopNav ? (
<div className="hidden md:block">
<h2 className="text-lg font-semibold">{selectedLabel}</h2>
<Separator className="mt-4 bg-border" />
</div>
) : null}
<div className={cn("min-w-0", desktopNav ? "pt-4" : "pt-4 md:pt-0", contentClassName)}>
{children}
</div>
<div className={cn("min-w-0 pt-4", contentClassName)}>{children}</div>
</div>
</section>
);