Add subtle transitions to sidebars (#344)

src/components/ProjectSidebarMenu.tsx

@@ -1,10 +1,11 @@
-import { Popover } from '@headlessui/react'
+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,
@@ -34,7 +35,7 @@ const ProjectSidebarMenu = ({
   ) : (
     <Popover className="relative">
       <Popover.Button
-        className="border-0 px-1 pr-2 pl-0 flex items-center gap-4 focus:outline-none focus:ring-2 focus:ring-energy-50"
+        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
@@ -46,9 +47,28 @@ const ProjectSidebarMenu = ({
           {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>
 
-      <Popover.Panel className="fixed inset-0 right-auto z-30 w-64 bg-chalkboard-10 dark:bg-chalkboard-100 border border-energy-100 shadow-md rounded-r-lg overflow-hidden">
+      <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"
@@ -64,7 +84,10 @@ const ProjectSidebarMenu = ({
                 {project?.name ? project.name : 'KittyCAD Modeling App'}
               </p>
               {project?.entrypoint_metadata && (
-              <p className="m-0 text-energy-40 text-xs" data-testid="createdAt">
+                <p
+                  className="m-0 text-energy-40 text-xs"
+                  data-testid="createdAt"
+                >
                   Created{' '}
                   {project?.entrypoint_metadata.createdAt.toLocaleDateString()}
                 </p>
@@ -94,6 +117,7 @@ const ProjectSidebarMenu = ({
             )}
           </div>
         </Popover.Panel>
+      </Transition>
     </Popover>
   )
 }

src/components/UserSidebarMenu.tsx

@@ -1,9 +1,9 @@
-import { Popover } from '@headlessui/react'
+import { Popover, Transition } from '@headlessui/react'
 import { ActionButton } from './ActionButton'
 import { faBars, faGear, faSignOutAlt } from '@fortawesome/free-solid-svg-icons'
 import { faGithub } from '@fortawesome/free-brands-svg-icons'
 import { useNavigate } from 'react-router-dom'
-import { useState } from 'react'
+import { Fragment, useState } from 'react'
 import { paths } from '../Router'
 import makeUrlPathRelative from '../lib/makeUrlPathRelative'
 import { Models } from '@kittycad/lib'
@@ -61,9 +61,28 @@ const UserSidebarMenu = ({ user }: { user?: User }) => {
           Menu
         </ActionButton>
       )}
+      <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>
 
-      <Popover.Panel className="fixed inset-0 left-auto z-30 w-64 bg-chalkboard-10 dark:bg-chalkboard-100 border border-liquid-100 shadow-md rounded-l-lg overflow-hidden">
+      <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 left-auto z-30 w-64 bg-chalkboard-10 dark:bg-chalkboard-100 border border-liquid-100 dark:border-liquid-100/50 shadow-md rounded-l-lg overflow-hidden">
           {({ close }) => (
             <>
               {user && (
@@ -137,6 +156,7 @@ const UserSidebarMenu = ({ user }: { user?: User }) => {
             </>
           )}
         </Popover.Panel>
+      </Transition>
     </Popover>
   )
 }