File size: 3,168 Bytes
f8b5d42 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
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"
/>
</>
);
}
|