eliott/anything-llm
1
0
Fork 0
mirror of https://github.com/Mintplex-Labs/anything-llm synced 2026-04-25 17:15:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix Sidebar Clipping When Closed (#4970)

Browse Source 
fix sidebar clipping when closed
This commit is contained in:
Marcello Fitton
2026-02-10 08:55:38 -08:00
committed by GitHub
parent 1c91d369c3
commit 48e6e268a7
2 changed files with 33 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/Sidebar/SidebarToggle/index.jsx
View File

@@ -75,7 +75,7 @@ export function ToggleSidebarButton({ showSidebar, setShowSidebar }) {
<>
<button
type="button"
className={`hidden md:block border-none bg-transparent outline-none ring-0 transition-left duration-500 ${showSidebar ? "left-[247px]" : "absolute top-[20px] left-[30px] z-10"}`}
className={`hidden md:block border-none bg-transparent outline-none ring-0 absolute transition-all duration-500 z-10 ${showSidebar ? "top-[18px] left-[248px]" : "top-[20px] left-[30px]"}`}
onClick={() => setShowSidebar((prev) => !prev)}
data-tooltip-id="sidebar-toggle"
data-tooltip-content={

62
frontend/src/components/Sidebar/index.jsx
View File

@@ -34,39 +34,41 @@ export default function Sidebar() {
width: showSidebar ? "292px" : "0px",
paddingLeft: showSidebar ? "0px" : "16px",
}}
className="transition-all duration-500"
className="relative transition-all duration-500"
>
<div className="flex shrink-0 w-full justify-center my-[18px]">
<div className="flex justify-between w-[250px] min-w-[250px]">
<Link to={paths.home()} aria-label="Home">
<img
src={logo}
alt="Logo"
className={`rounded max-h-[24px] object-contain transition-opacity duration-500 ${showSidebar ? "opacity-100" : "opacity-0"}`}
/>
</Link>
{canToggleSidebar && (
<ToggleSidebarButton
showSidebar={showSidebar}
setShowSidebar={setShowSidebar}
/>
)}
{canToggleSidebar && (
<ToggleSidebarButton
showSidebar={showSidebar}
setShowSidebar={setShowSidebar}
/>
)}
<div className="overflow-hidden h-full">
<div className="flex shrink-0 w-full justify-center my-[18px]">
<div className="flex w-[250px] min-w-[250px]">
<Link to={paths.home()} aria-label="Home">
<img
src={logo}
alt="Logo"
className={`rounded max-h-[24px] object-contain transition-opacity duration-500 ${showSidebar ? "opacity-100" : "opacity-0"}`}
/>
</Link>
</div>
</div>
</div>
<div
ref={sidebarRef}
className="relative m-[16px] rounded-[16px] bg-theme-bg-sidebar border-[2px] border-theme-sidebar-border light:border-none min-w-[250px] p-[10px] h-[calc(100%-76px)]"
>
<div className="flex flex-col h-full overflow-hidden">
<div className="flex-grow flex flex-col min-w-[235px] min-h-0">
<div className="relative h-[calc(100%-60px)] flex flex-col w-full justify-between pt-[10px] overflow-y-scroll no-scroll">
<div className="flex flex-col gap-y-[14px]">
<SearchBox user={user} showNewWsModal={showNewWsModal} />
<ActiveWorkspaces />
<div
ref={sidebarRef}
className="relative m-[16px] rounded-[16px] bg-theme-bg-sidebar border-[2px] border-theme-sidebar-border light:border-none min-w-[250px] p-[10px] h-[calc(100%-76px)]"
>
<div className="flex flex-col h-full overflow-hidden">
<div className="flex-grow flex flex-col min-w-[235px] min-h-0">
<div className="relative h-[calc(100%-60px)] flex flex-col w-full justify-between pt-[10px] overflow-y-scroll no-scroll">
<div className="flex flex-col gap-y-[14px]">
<SearchBox user={user} showNewWsModal={showNewWsModal} />
<ActiveWorkspaces />
</div>
</div>
<div className="absolute bottom-0 left-0 right-0 pb-3 rounded-b-[16px] bg-theme-bg-sidebar bg-opacity-80 backdrop-filter backdrop-blur-md z-10">
<Footer />
</div>
</div>
<div className="absolute bottom-0 left-0 right-0 pb-3 rounded-b-[16px] bg-theme-bg-sidebar bg-opacity-80 backdrop-filter backdrop-blur-md z-10">
<Footer />
</div>
</div>
</div>