wip(app): full-height sidebar

Author: adamdotdevin

packages/app/src/pages/layout.tsx

@@ -137,7 +137,7 @@ export default function Layout(props: ParentProps) {
   const [hoverSession, setHoverSession] = createSignal<string | undefined>()
   const [hoverProject, setHoverProject] = createSignal<string | undefined>()
 
-  const navRef = { current: undefined as HTMLElement | undefined }
+  const [nav, setNav] = createSignal<HTMLElement | undefined>(undefined)
 
   const sidebarHovering = createMemo(() => !layout.sidebar.opened() && hoverProject() !== undefined)
   const sidebarExpanded = createMemo(() => layout.sidebar.opened() || sidebarHovering())
@@ -1702,10 +1702,11 @@ export default function Layout(props: ParentProps) {
         >
           <HoverCard
             openDelay={1000}
-            closeDelay={0}
+            closeDelay={sidebarHovering() ? 300 : 0}
             placement="right"
             gutter={28}
             trigger={item}
+            mount={!props.mobile ? nav() : undefined}
             open={hoverSession() === props.session.id}
             onOpenChange={(open) => setHoverSession(open ? props.session.id : undefined)}
           >
@@ -1743,7 +1744,7 @@ export default function Layout(props: ParentProps) {
             "group-focus-within/session:opacity-100 group-focus-within/session:pointer-events-auto": true,
           }}
         >
-          <DropdownMenu open={menuOpen()} onOpenChange={setMenuOpen}>
+          <DropdownMenu modal={!sidebarHovering()} open={menuOpen()} onOpenChange={setMenuOpen}>
             <Tooltip value={language.t("common.moreOptions")} placement="top">
               <DropdownMenu.Trigger
                 as={IconButton}
@@ -1753,7 +1754,7 @@ export default function Layout(props: ParentProps) {
                 aria-label={language.t("common.moreOptions")}
               />
             </Tooltip>
-            <DropdownMenu.Portal mount={!props.mobile ? navRef.current : undefined}>
+            <DropdownMenu.Portal mount={!props.mobile ? nav() : undefined}>
               <DropdownMenu.Content
                 onCloseAutoFocus={(event) => {
                   if (!pendingRename()) return
@@ -1993,7 +1994,7 @@ export default function Layout(props: ParentProps) {
                     "group-focus-within/workspace:opacity-100 group-focus-within/workspace:pointer-events-auto": true,
                   }}
                 >
-                  <DropdownMenu open={menuOpen()} onOpenChange={setMenuOpen}>
+                  <DropdownMenu modal={!sidebarHovering()} open={menuOpen()} onOpenChange={setMenuOpen}>
                     <Tooltip value={language.t("common.moreOptions")} placement="top">
                       <DropdownMenu.Trigger
                         as={IconButton}
@@ -2003,7 +2004,7 @@ export default function Layout(props: ParentProps) {
                         aria-label={language.t("common.moreOptions")}
                       />
                     </Tooltip>
-                    <DropdownMenu.Portal mount={!props.mobile ? navRef.current : undefined}>
+                    <DropdownMenu.Portal mount={!props.mobile ? nav() : undefined}>
                       <DropdownMenu.Content
                         onCloseAutoFocus={(event) => {
                           if (!pendingRename()) return
@@ -2411,15 +2412,15 @@ export default function Layout(props: ParentProps) {
                     </Tooltip>
                   </div>
 
-                  <DropdownMenu>
+                  <DropdownMenu modal={!sidebarHovering()}>
                     <DropdownMenu.Trigger
                       as={IconButton}
                       icon="dot-grid"
                       variant="ghost"
                       class="shrink-0 size-6 rounded-md opacity-0 group-hover/project:opacity-100 data-[expanded]:opacity-100 data-[expanded]:bg-surface-base-active"
                       aria-label={language.t("common.moreOptions")}
                     />
-                    <DropdownMenu.Portal mount={!panelProps.mobile ? navRef.current : undefined}>
+                    <DropdownMenu.Portal mount={!panelProps.mobile ? nav() : undefined}>
                       <DropdownMenu.Content class="mt-1">
                         <DropdownMenu.Item onSelect={() => dialog.show(() => <DialogEditProject project={p} />)}>
                           <DropdownMenu.ItemLabel>{language.t("common.edit")}</DropdownMenu.ItemLabel>
@@ -2660,7 +2661,7 @@ export default function Layout(props: ParentProps) {
           }}
           style={{ width: layout.sidebar.opened() ? `${Math.max(layout.sidebar.width(), 244)}px` : "64px" }}
           ref={(el) => {
-            navRef.current = el
+            setNav(el)
           }}
           onMouseLeave={() => {
             setHoverSession(undefined)

packages/ui/src/components/hover-card.tsx

@@ -3,19 +3,20 @@ import { ComponentProps, JSXElement, ParentProps, splitProps } from "solid-js"
 
 export interface HoverCardProps extends ParentProps, Omit<ComponentProps<typeof Kobalte>, "children"> {
   trigger: JSXElement
+  mount?: HTMLElement
   class?: ComponentProps<"div">["class"]
   classList?: ComponentProps<"div">["classList"]
 }
 
 export function HoverCard(props: HoverCardProps) {
-  const [local, rest] = splitProps(props, ["trigger", "class", "classList", "children"])
+  const [local, rest] = splitProps(props, ["trigger", "mount", "class", "classList", "children"])
 
   return (
     <Kobalte gutter={4} {...rest}>
       <Kobalte.Trigger as="div" data-slot="hover-card-trigger">
         {local.trigger}
       </Kobalte.Trigger>
-      <Kobalte.Portal>
+      <Kobalte.Portal mount={local.mount}>
         <Kobalte.Content
           data-component="hover-card-content"
           classList={{