apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-23 19:05:16 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat: add collapsed header content support in LayoutShell and Sidebar components

Browse source
This commit is contained in:
Anish Sarkar 2026-05-19 20:58:19 +05:30
parent 07688263d8
commit f1b3c88354
2 changed files with 22 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

6
surfsense_web/components/layout/ui/shell/LayoutShell.tsx
View file

@ -5,6 +5,7 @@ import { AnimatePresence, motion } from "motion/react";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
import { useCallback, useMemo, useState } from "react"; import { useCallback, useMemo, useState } from "react";
import { activeTabAtom, type Tab } from "@/atoms/tabs/tabs.atom"; import { activeTabAtom, type Tab } from "@/atoms/tabs/tabs.atom";
import { Logo } from "@/components/Logo";
import { Spinner } from "@/components/ui/spinner"; import { Spinner } from "@/components/ui/spinner";
import { TooltipProvider } from "@/components/ui/tooltip"; import { TooltipProvider } from "@/components/ui/tooltip";
import type { InboxItem } from "@/hooks/use-inbox"; import type { InboxItem } from "@/hooks/use-inbox";
@ -502,6 +503,11 @@ export function LayoutShell({
setTheme={setTheme} setTheme={setTheme}
renderUserProfile={false} renderUserProfile={false}
renderCollapseButton={!isMacDesktop} renderCollapseButton={!isMacDesktop}
collapsedHeaderContent={
isMacDesktop ? (
<Logo disableLink priority className="h-7 w-7 rounded-md" />
) : undefined
}
className={cn("flex shrink-0", isMacDesktop && "rounded-tl-xl")} className={cn("flex shrink-0", isMacDesktop && "rounded-tl-xl")}
isLoadingChats={isLoadingChats} isLoadingChats={isLoadingChats}
sidebarWidth={sidebarWidth} sidebarWidth={sidebarWidth}

18
surfsense_web/components/layout/ui/sidebar/Sidebar.tsx
View file

@ -4,7 +4,7 @@ import { CreditCard, Dot, SquarePen, Zap } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import { useParams } from "next/navigation"; import { useParams } from "next/navigation";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { useMemo, useState } from "react"; import { type ReactNode, useMemo, useState } from "react";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Progress } from "@/components/ui/progress"; import { Progress } from "@/components/ui/progress";
@ -96,6 +96,7 @@ interface SidebarProps {
isResizing?: boolean; isResizing?: boolean;
renderUserProfile?: boolean; renderUserProfile?: boolean;
renderCollapseButton?: boolean; renderCollapseButton?: boolean;
collapsedHeaderContent?: ReactNode;
} }
export function Sidebar({ export function Sidebar({
@ -134,6 +135,7 @@ export function Sidebar({
isResizing = false, isResizing = false,
renderUserProfile = true, renderUserProfile = true,
renderCollapseButton = true, renderCollapseButton = true,
collapsedHeaderContent,
}: SidebarProps) { }: SidebarProps) {
const t = useTranslations("sidebar"); const t = useTranslations("sidebar");
const [openDropdownChatId, setOpenDropdownChatId] = useState<number | null>(null); const [openDropdownChatId, setOpenDropdownChatId] = useState<number | null>(null);
@ -162,7 +164,7 @@ export function Sidebar({
)} )}
style={{ width: isCollapsed ? collapsedWidth : sidebarWidth }} style={{ width: isCollapsed ? collapsedWidth : sidebarWidth }}
> >
<div className="flex h-12 shrink-0 items-center gap-0 px-1 border-b"> <div className="relative flex h-12 shrink-0 items-center gap-0 px-1 border-b">
<div <div
className={cn( className={cn(
"min-w-0 overflow-hidden", "min-w-0 overflow-hidden",
@ -178,6 +180,18 @@ export function Sidebar({
onManageMembers={onManageMembers} onManageMembers={onManageMembers}
/> />
</div> </div>
{collapsedHeaderContent ? (
<div
aria-hidden={!isCollapsed}
className={cn(
"pointer-events-none absolute inset-y-0 left-0 flex items-center justify-center transition-opacity duration-150",
isCollapsed ? "opacity-100 delay-150" : "opacity-0"
)}
style={{ width: collapsedWidth }}
>
{collapsedHeaderContent}
</div>
) : null}
{renderCollapseButton ? ( {renderCollapseButton ? (
<div className={cn("shrink-0", isCollapsed && "mx-auto")}> <div className={cn("shrink-0", isCollapsed && "mx-auto")}>
<SidebarCollapseButton <SidebarCollapseButton