Skip to content
Sign up

flagon-io/g1t

public
0

Commit

A project's pin sits at the end of its row in the sidebar, and shows only on hover or keyboard focus. It was set in from the end to leave room for a chevron that only showed on hover, and it stayed lit after a click, since it showed on any focus and a clicked button keeps the mouse's. The rows drop the chevron; the pin is their hover action.

syntaqxcommitted Parentd89c457Browse files
1 file+4−20/1 viewed
+4−2
677677 <SidebarLink
678678 to={`/${project.namespace}/${project.name}`}
679679 icon={project.isPrivate ? <Lock /> : <Box />}
680− drill="hover"
681680 bare={isPinned}
682681 action={
682+ // At the row's end, where the row's other actions sit, and only on
683+ // hover or keyboard focus: a pin clicked keeps the mouse's focus,
684+ // and showing it on any focus left it lit on a row no one was over.
683685 <PinButton
684686 workspace={slug}
685687 slug={project.name}
686688 name={project.title ?? project.name}
687689 pinned={isPinned}
688690 small
689− className="absolute top-1/2 right-6 -translate-y-1/2 opacity-0 transition-opacity group-hover/menu-item:opacity-100 focus-within:opacity-100 [@media(hover:none)]:opacity-100"
691+ className="absolute top-1/2 right-1 -translate-y-1/2 opacity-0 transition-opacity group-hover/menu-item:opacity-100 has-focus-visible:opacity-100 [@media(hover:none)]:opacity-100"
690692 />
691693 }
692694 >