126 lines
4.0 KiB
TypeScript
126 lines
4.0 KiB
TypeScript
import { Popover, Transition } from '@headlessui/react'
|
|
import { ActionButton } from './ActionButton'
|
|
import { faHome } from '@fortawesome/free-solid-svg-icons'
|
|
import { ProjectWithEntryPointMetadata, paths } from '../Router'
|
|
import { isTauri } from '../lib/isTauri'
|
|
import { Link } from 'react-router-dom'
|
|
import { ExportButton } from './ExportButton'
|
|
import { Fragment } from 'react'
|
|
|
|
const ProjectSidebarMenu = ({
|
|
project,
|
|
renderAsLink = false,
|
|
}: {
|
|
renderAsLink?: boolean
|
|
project?: Partial<ProjectWithEntryPointMetadata>
|
|
}) => {
|
|
return renderAsLink ? (
|
|
<Link
|
|
to={'../'}
|
|
className="flex items-center gap-4 my-2"
|
|
data-testid="project-sidebar-link"
|
|
>
|
|
<img
|
|
src="/kitt-8bit-winking.svg"
|
|
alt="KittyCAD App"
|
|
className="h-9 w-auto"
|
|
/>
|
|
<span
|
|
className="text-sm text-chalkboard-110 dark:text-chalkboard-20 min-w-max"
|
|
data-testid="project-sidebar-link-name"
|
|
>
|
|
{project?.name ? project.name : 'KittyCAD Modeling App'}
|
|
</span>
|
|
</Link>
|
|
) : (
|
|
<Popover className="relative">
|
|
<Popover.Button
|
|
className="border-0 p-0.5 pr-2 flex items-center gap-4 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-energy-50"
|
|
data-testid="project-sidebar-toggle"
|
|
>
|
|
<img
|
|
src="/kitt-8bit-winking.svg"
|
|
alt="KittyCAD App"
|
|
className="h-9 w-auto"
|
|
/>
|
|
<span className="text-sm text-chalkboard-110 dark:text-chalkboard-20 min-w-max">
|
|
{isTauri() && project?.name ? project.name : 'KittyCAD Modeling App'}
|
|
</span>
|
|
</Popover.Button>
|
|
<Transition
|
|
enter="duration-200 ease-out"
|
|
enterFrom="opacity-0"
|
|
enterTo="opacity-100"
|
|
leave="duration-100 ease-in"
|
|
leaveFrom="opacity-100"
|
|
leaveTo="opacity-0"
|
|
as={Fragment}
|
|
>
|
|
<Popover.Overlay className="fixed z-20 inset-0 bg-chalkboard-110/50" />
|
|
</Transition>
|
|
|
|
<Transition
|
|
enter="duration-100 ease-out"
|
|
enterFrom="opacity-0 -translate-x-1/4"
|
|
enterTo="opacity-100 translate-x-0"
|
|
leave="duration-75 ease-in"
|
|
leaveFrom="opacity-100 translate-x-0"
|
|
leaveTo="opacity-0 -translate-x-4"
|
|
as={Fragment}
|
|
>
|
|
<Popover.Panel className="fixed inset-0 right-auto z-30 w-64 bg-chalkboard-10 dark:bg-chalkboard-100 border border-energy-100 dark:border-energy-100/50 shadow-md rounded-r-lg overflow-hidden">
|
|
<div className="flex items-center gap-4 px-4 py-3 bg-energy-100">
|
|
<img
|
|
src="/kitt-8bit-winking.svg"
|
|
alt="KittyCAD App"
|
|
className="h-9 w-auto"
|
|
/>
|
|
|
|
<div>
|
|
<p
|
|
className="m-0 text-energy-10 text-mono"
|
|
data-testid="projectName"
|
|
>
|
|
{project?.name ? project.name : 'KittyCAD Modeling App'}
|
|
</p>
|
|
{project?.entrypoint_metadata && (
|
|
<p
|
|
className="m-0 text-energy-40 text-xs"
|
|
data-testid="createdAt"
|
|
>
|
|
Created{' '}
|
|
{project?.entrypoint_metadata.createdAt.toLocaleDateString()}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="p-4 flex flex-col gap-2">
|
|
<ExportButton
|
|
className={{
|
|
button:
|
|
'border-transparent dark:border-transparent dark:hover:border-energy-60',
|
|
}}
|
|
>
|
|
Export Model
|
|
</ExportButton>
|
|
{isTauri() && (
|
|
<ActionButton
|
|
Element="link"
|
|
to={paths.HOME}
|
|
icon={{
|
|
icon: faHome,
|
|
}}
|
|
className="border-transparent dark:border-transparent dark:hover:border-energy-60"
|
|
>
|
|
Go to Home
|
|
</ActionButton>
|
|
)}
|
|
</div>
|
|
</Popover.Panel>
|
|
</Transition>
|
|
</Popover>
|
|
)
|
|
}
|
|
|
|
export default ProjectSidebarMenu
|