29 lines
1 KiB
TypeScript
29 lines
1 KiB
TypeScript
|
import { useCallback, useState } from "react";
|
||
|
|
|
||
|
|
export type sidebarVisibilityOptions = "full" | "small" | "hidden";
|
||
|
|
|
||
|
|
function useSidebarVisibility() {
|
||
|
|
const [sidebarVisibility, setSideBarVisibility] =
|
||
|
|
useState<sidebarVisibilityOptions>("full");
|
||
|
|
|
||
|
|
const sidebarToggleText = getSidebarToggleText(sidebarVisibility);
|
||
|
|
|
||
|
|
const toggleSidebarVisibility = useCallback(() => {
|
||
|
|
if (sidebarVisibility == "full") {
|
||
|
|
setSideBarVisibility("small");
|
||
|
|
} else if (sidebarVisibility == "small") {
|
||
|
|
setSideBarVisibility("hidden");
|
||
|
|
} else if (sidebarVisibility == "hidden") {
|
||
|
|
setSideBarVisibility("full");
|
||
|
|
}
|
||
|
|
}, [setSideBarVisibility, sidebarVisibility, sidebarToggleText]);
|
||
|
|
|
||
|
|
return { sidebarVisibility, toggleSidebarVisibility, sidebarToggleText };
|
||
|
|
}
|
||
|
|
const getSidebarToggleText = (sidebarVisibility: sidebarVisibilityOptions) => {
|
||
|
|
if (sidebarVisibility === "full") return "<-";
|
||
|
|
if (sidebarVisibility === "small") return "<-";
|
||
|
|
if (sidebarVisibility === "hidden") return "->";
|
||
|
|
};
|
||
|
|
export default useSidebarVisibility;
|