import React, { useEffect, useRef, useState } from "react";
import {
Wrench,
GithubLogo,
BookOpen,
DiscordLogo,
DotsThree,
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";
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 (
);
}