θΏ™ζ˜―indexlocζδΎ›ηš„ζœεŠ‘οΌŒδΈθ¦θΎ“ε…₯任何密码
Skip to content

Add support for hiding sidebar #2809

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Dec 12, 2024
Merged

Add support for hiding sidebar #2809

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
56eab7b
Add support for hiding sidebar
timothycarambat Dec 12, 2024
66d6918
Merge branch 'master' into sidebar-toggle
timothycarambat Dec 12, 2024
1a59bd0
patch sidebar padding on collapse
timothycarambat Dec 12, 2024
fecda2e
Merge branch 'sidebar-toggle' of github.com:Mintplex-Labs/anything-ll…
timothycarambat Dec 12, 2024
361fcb1
update Key for sidebar setting
timothycarambat Dec 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/ThreadItem/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,8 @@ export default function ThreadItem({
style={{ width: THREAD_CALLOUT_DETAIL_WIDTH / 2 }}
className={`${
isActive
? "border-l-2 border-b-2 border-white light:border-theme-sidebar-border z-30"
: "border-l border-b border-[#6F6F71] light:border-theme-sidebar-border z-10"
? "border-l-2 border-b-2 border-white light:border-theme-sidebar-border z-[2]"
: "border-l border-b border-[#6F6F71] light:border-theme-sidebar-border z-[1]"
} h-[50%] absolute top-0 left-2 rounded-bl-lg`}
></div>
{/* Downstroke border for next item */}
Expand All @@ -51,8 +51,8 @@ export default function ThreadItem({
style={{ width: THREAD_CALLOUT_DETAIL_WIDTH / 2 }}
className={`${
idx <= activeIdx && !isActive
? "border-l-2 border-white light:border-theme-sidebar-border z-20"
: "border-l border-[#6F6F71] light:border-theme-sidebar-border z-10"
? "border-l-2 border-white light:border-theme-sidebar-border z-[2]"
: "border-l border-[#6F6F71] light:border-theme-sidebar-border z-[1]"
} h-[100%] absolute top-0 left-2`}
></div>
)}
Expand Down
105 changes: 105 additions & 0 deletions frontend/src/components/Sidebar/SidebarToggle/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
import React, { useEffect, useState } from "react";
import { SidebarSimple } from "@phosphor-icons/react";
import paths from "@/utils/paths";
import { Tooltip } from "react-tooltip";
const SIDEBAR_TOGGLE_STORAGE_KEY = "anythingllm_sidebar_toggle";

/**
* Returns the previous state of the sidebar from localStorage.
* If the sidebar was closed, returns false.
* If the sidebar was open, returns true.
* If the sidebar state is not set, returns true.
* @returns {boolean}
*/
function previousSidebarState() {
const previousState = window.localStorage.getItem(SIDEBAR_TOGGLE_STORAGE_KEY);
if (previousState === "closed") return false;
return true;
}

export function useSidebarToggle() {
const [showSidebar, setShowSidebar] = useState(previousSidebarState());
const [canToggleSidebar, setCanToggleSidebar] = useState(true);

useEffect(() => {
function checkPath() {
const currentPath = window.location.pathname;
const isVisible =
currentPath === paths.home() ||
/^\/workspace\/[^\/]+$/.test(currentPath) ||
/^\/workspace\/[^\/]+\/t\/[^\/]+$/.test(currentPath);
setCanToggleSidebar(isVisible);
}
checkPath();
}, [window.location.pathname]);

useEffect(() => {
function toggleSidebar(e) {
if (!canToggleSidebar) return;
if (
(e.ctrlKey || e.metaKey) &&
e.shiftKey &&
e.key.toLowerCase() === "s"
) {
setShowSidebar((prev) => {
const newState = !prev;
window.localStorage.setItem(
SIDEBAR_TOGGLE_STORAGE_KEY,
newState ? "open" : "closed"
);
return newState;
});
}
}
window.addEventListener("keydown", toggleSidebar);
return () => {
window.removeEventListener("keydown", toggleSidebar);
};
}, []);

useEffect(() => {
window.localStorage.setItem(
SIDEBAR_TOGGLE_STORAGE_KEY,
showSidebar ? "open" : "closed"
);
}, [showSidebar]);

return { showSidebar, setShowSidebar, canToggleSidebar };
}

export function ToggleSidebarButton({ showSidebar, setShowSidebar }) {
const isMac = navigator.userAgent.includes("Mac");
const shortcut = isMac ? "⌘ + Shift + S" : "Ctrl + Shift + S";

return (
<>
<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"}`}
onClick={() => setShowSidebar((prev) => !prev)}
data-tooltip-id="sidebar-toggle"
data-tooltip-content={
showSidebar
? `Hide Sidebar (${shortcut})`
: `Show Sidebar (${shortcut})`
}
aria-label={
showSidebar
? `Hide Sidebar (${shortcut})`
: `Show Sidebar (${shortcut})`
}
>
<SidebarSimple
className="text-theme-text-secondary hover:text-theme-text-primary"
size={24}
/>
</button>
<Tooltip
id="sidebar-toggle"
place="top"
delayShow={300}
className="tooltip !text-xs z-99"
/>
</>
);
}
88 changes: 52 additions & 36 deletions frontend/src/components/Sidebar/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,13 @@ import SettingsButton from "../SettingsButton";
import { Link } from "react-router-dom";
import paths from "@/utils/paths";
import { useTranslation } from "react-i18next";
import { useSidebarToggle, ToggleSidebarButton } from "./SidebarToggle";

export default function Sidebar() {
const { user } = useUser();
const { logo } = useLogo();
const sidebarRef = useRef(null);
const { showSidebar, setShowSidebar, canToggleSidebar } = useSidebarToggle();
const {
showing: showingNewWsModal,
showModal: showNewWsModal,
Expand All @@ -24,50 +26,64 @@ export default function Sidebar() {
const { t } = useTranslation();

return (
<div>
<Link
to={paths.home()}
className="flex shrink-0 max-w-[55%] items-center justify-start mx-[38px] my-[18px]"
aria-label="Home"
>
<img
src={logo}
alt="Logo"
className="rounded max-h-[24px] object-contain"
/>
</Link>
<>
<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)]"
style={{
width: showSidebar ? "292px" : "0px",
paddingLeft: showSidebar ? "0px" : "16px",
}}
className="transition-all duration-500"
>
<div className="flex flex-col h-full overflow-x-hidden">
<div className="flex-grow flex flex-col min-w-[235px]">
<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-2 pb-[60px] overflow-y-scroll no-scroll">
<div className="flex gap-x-2 items-center justify-between">
{(!user || user?.role !== "default") && (
<button
onClick={showNewWsModal}
className="light:bg-[#C2E7FE] light:hover:bg-[#7CD4FD] flex flex-grow w-[75%] h-[44px] gap-x-2 py-[5px] px-2.5 mb-2 bg-white rounded-[8px] text-sidebar justify-center items-center hover:bg-opacity-80 transition-all duration-300"
>
<Plus size={18} weight="bold" />
<p className="text-sidebar text-sm font-semibold">
{t("new-workspace.title")}
</p>
</button>
)}
<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}
/>
)}
</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-x-hidden">
<div className="flex-grow flex flex-col min-w-[235px]">
<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-2 pb-[60px] overflow-y-scroll no-scroll">
<div className="flex gap-x-2 items-center justify-between">
{(!user || user?.role !== "default") && (
<button
onClick={showNewWsModal}
className="light:bg-[#C2E7FE] light:hover:bg-[#7CD4FD] flex flex-grow w-[75%] h-[44px] gap-x-2 py-[5px] px-2.5 mb-2 bg-white rounded-[8px] text-sidebar justify-center items-center hover:bg-opacity-80 transition-all duration-300"
>
<Plus size={18} weight="bold" />
<p className="text-sidebar text-sm font-semibold">
{t("new-workspace.title")}
</p>
</button>
)}
</div>
<ActiveWorkspaces />
</div>
<ActiveWorkspaces />
</div>
</div>
<div className="absolute bottom-0 left-0 right-0 pt-4 pb-3 rounded-b-[16px] bg-theme-bg-sidebar bg-opacity-80 backdrop-filter backdrop-blur-md z-10">
<Footer />
<div className="absolute bottom-0 left-0 right-0 pt-4 pb-3 rounded-b-[16px] bg-theme-bg-sidebar bg-opacity-80 backdrop-filter backdrop-blur-md z-1">
<Footer />
</div>
</div>
</div>
</div>
{showingNewWsModal && <NewWorkspaceModal hideModal={hideNewWsModal} />}
</div>
{showingNewWsModal && <NewWorkspaceModal hideModal={hideNewWsModal} />}
</div>
</>
);
}

Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/WorkspaceChat/ChatContainer/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -264,7 +264,7 @@ export default function ChatContainer({ workspace, knownHistory = [] }) {
return (
<div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-theme-bg-secondary w-full h-full overflow-y-scroll no-scroll"
className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-theme-bg-secondary w-full h-full overflow-y-scroll no-scroll z-[2]"
>
{isMobile && <SidebarMobileHeader />}
<DnDFileUploaderWrapper>
Expand Down