import React, { useEffect, useRef, useState } from "react";
import { Wrench, Plus, List } from "@phosphor-icons/react";
import NewWorkspaceModal, {
useNewWorkspaceModal,
} from "../Modals/NewWorkspace";
import ActiveWorkspaces from "./ActiveWorkspaces";
import paths from "@/utils/paths";
import { USER_BACKGROUND_COLOR } from "@/utils/constants";
import useLogo from "@/hooks/useLogo";
import useUser from "@/hooks/useUser";
import Footer from "../Footer";
export default function Sidebar() {
const { user } = useUser();
const { logo } = useLogo();
const sidebarRef = useRef(null);
const {
showing: showingNewWsModal,
showModal: showNewWsModal,
hideModal: hideNewWsModal,
} = useNewWorkspaceModal();
return (
<>
{/* Header Information */}
{(!user || user?.role !== "default") && (
)}
{/* Primary Body */}
{(!user || user?.role !== "default") && (
)}
{showingNewWsModal && }
>
);
}
export function SidebarMobileHeader() {
const { logo } = useLogo();
const sidebarRef = useRef(null);
const [showSidebar, setShowSidebar] = useState(false);
const [showBgOverlay, setShowBgOverlay] = useState(false);
const {
showing: showingNewWsModal,
showModal: showNewWsModal,
hideModal: hideNewWsModal,
} = useNewWorkspaceModal();
const { user } = useUser();
useEffect(() => {
// Darkens the rest of the screen
// when sidebar is open.
function handleBg() {
if (showSidebar) {
setTimeout(() => {
setShowBgOverlay(true);
}, 300);
} else {
setShowBgOverlay(false);
}
}
handleBg();
}, [showSidebar]);
return (
<>
setShowSidebar(false)}
/>
{/* Header Information */}
{(!user || user?.role !== "default") && (
)}
{/* Primary Body */}
{(!user || user?.role !== "default") && (
)}
{showingNewWsModal &&
}
>
);
}
function SettingsButton() {
const { user } = useUser();
return (
);
}