wip moving menu nav buttons in widget menu
This commit is contained in:
@@ -31,20 +31,23 @@ export function SettingsButton() {
|
||||
const cancelEdit = useDashboardStore(state => state.cancelEdit);
|
||||
const addWidget = useDashboardStore(state => state.addWidget);
|
||||
|
||||
const recipe = useRecipe({key: "glassTab"});
|
||||
const tabStyles = recipe();
|
||||
const glassTabRecipe = useRecipe({key: "glassTab"});
|
||||
const settingsButtonRecipe = useRecipe({key: "settingsButton"});
|
||||
const tabStyles = glassTabRecipe();
|
||||
const settingsButtonStyles = settingsButtonRecipe();
|
||||
|
||||
const [canScrollLeft, setCanScrollLeft] = useState(false);
|
||||
const [canScrollRight, setCanScrollRight] = useState(false);
|
||||
|
||||
// Pull the glass container styles for the dropdown and modal
|
||||
const panelRecipe = useSlotRecipe({key: "glassPanel"});
|
||||
const panelStyles = panelRecipe({layout: "dropdown"});
|
||||
const modalStyles = panelRecipe({layout: "popover"});
|
||||
const modalStyles = panelRecipe({layout: "popover", leftScroll: canScrollLeft ? "visible" : "hidden", rightScroll: canScrollRight ? "visible" : "hidden"});
|
||||
|
||||
const [isLibraryOpen, setIsLibraryOpen] = useState(false);
|
||||
|
||||
// ⬅️ ➡️ This is the callbacks and scroll control to add the chevron arrows in the tab list
|
||||
const tabsRef = useRef(null);
|
||||
const [canScrollLeft, setCanScrollLeft] = useState(false);
|
||||
const [canScrollRight, setCanScrollRight] = useState(false);
|
||||
|
||||
const checkScroll = useCallback(() => {
|
||||
if (tabsRef.current) {
|
||||
@@ -92,7 +95,7 @@ export function SettingsButton() {
|
||||
<>
|
||||
{isEditing ? (
|
||||
// 📝 EDIT MODE: The 3-Pill Layout
|
||||
<HStack gap={2}>
|
||||
<HStack css={settingsButtonStyles.root}>
|
||||
{/* 1. The Add Widget Button */}
|
||||
<Box
|
||||
as="button"
|
||||
@@ -137,7 +140,7 @@ export function SettingsButton() {
|
||||
<Menu.Root positioning={{getAnchorRect}}>
|
||||
<Menu.Trigger asChild>
|
||||
<Box ref={menuRef} as="button" css={tabStyles}>
|
||||
{/* size increased to 24 to match tabs. flexShrink: 0 is CRITICAL */}
|
||||
{/* settings icon size set to 24 to match tabs. flexShrink 0 is CRITICAL */}
|
||||
<Settings size={24} style={{flexShrink: 0}}/>
|
||||
<Box as="span">Dashboard Settings</Box>
|
||||
</Box>
|
||||
@@ -174,27 +177,24 @@ export function SettingsButton() {
|
||||
<Dialog.Root
|
||||
open={isLibraryOpen}
|
||||
onOpenChange={(e) => setIsLibraryOpen(e.open)}
|
||||
size="xl"
|
||||
placement="center"
|
||||
closeOnInteractOutside={true}
|
||||
closeOnEscapeKeyDown={true}
|
||||
size="xl"
|
||||
placement="center"
|
||||
>
|
||||
{/* Soft blur can be added to the background behind the modal */}
|
||||
{/*<Dialog.Backdrop bg="blackAlpha.100" backdropFilter="blur(2px)"/>*/}
|
||||
<Dialog.Positioner>
|
||||
|
||||
<Dialog.Content css={modalStyles.root} overflow="hidden" maxW="60%" minH="80%" p={0}>
|
||||
|
||||
<Dialog.Header bg="transparent" color={{base: "gray.800", _dark: "white"}} py={4}
|
||||
borderColor={{base: "gray.200", _dark: "whiteAlpha.200"}}>
|
||||
<Dialog.Title fontSize="xl" fontWeight="bold">Widgets Shop</Dialog.Title>
|
||||
<Dialog.Content css={modalStyles.root}>
|
||||
<Dialog.Header>
|
||||
<Dialog.Title>Widgets Shop</Dialog.Title>
|
||||
</Dialog.Header>
|
||||
|
||||
<Dialog.Body p={0}>
|
||||
<Dialog.Body>
|
||||
<Tabs.Root defaultValue={categories[0]} variant="unstyled">
|
||||
<Box position="relative" display="flex" mx="auto" maxWidth="100%" mx={5} mt={4} mb={6}>
|
||||
|
||||
{/* LEFT GLASS CRESCENT */}
|
||||
{/* HORIZONTAL SCROLLABLE MENU OF WIDGET CATEGORIES */}
|
||||
<Box position="relative" display="flex" maxWidth="100%" mx={5} mt={4} mb={6}>
|
||||
{/* left glass crescent */}
|
||||
{canScrollLeft && (
|
||||
<Flex
|
||||
position="absolute"
|
||||
@@ -224,55 +224,20 @@ export function SettingsButton() {
|
||||
<ChevronLeft size={18} style={{ marginLeft: "-30px" }}/>
|
||||
</Flex>
|
||||
)}
|
||||
<Tabs.List
|
||||
ref={tabsRef}
|
||||
onScroll={checkScroll}
|
||||
bg={{base: "rgba(0, 0, 0, 0.04)", _dark: "rgba(255, 255, 255, 0.05)"}}
|
||||
p={1}
|
||||
borderRadius="full"
|
||||
display="flex"
|
||||
flexWrap="nowrap"
|
||||
overflowX="auto"
|
||||
maxWidth="100%"
|
||||
border="1px solid"
|
||||
borderColor={{base: "blackAlpha.50", _dark: "whiteAlpha.100"}}
|
||||
css={{
|
||||
scrollbarWidth: "none",
|
||||
"&::-webkit-scrollbar": {display: "none"},
|
||||
}}
|
||||
// This is for desktop users not on trackpad to scroll the
|
||||
onWheel={(e) => {
|
||||
if (e.currentTarget) {
|
||||
e.currentTarget.scrollLeft += e.deltaY;
|
||||
}
|
||||
}}
|
||||
|
||||
{/* the categories */}
|
||||
<Tabs.List ref={tabsRef} onScroll={checkScroll}
|
||||
// For desktop users (not on trackpad) to scroll
|
||||
onWheel={(e) => { if (e.currentTarget) e.currentTarget.scrollLeft += e.deltaY; }}
|
||||
>
|
||||
{categories.map(cat => (
|
||||
<Tabs.Trigger
|
||||
key={cat}
|
||||
value={cat}
|
||||
px={5}
|
||||
py={2}
|
||||
borderRadius="full"
|
||||
whiteSpace="nowrap"
|
||||
flexShrink={0}
|
||||
color={{base: "gray.500", _dark: "gray.400"}}
|
||||
fontWeight="medium"
|
||||
transition="background-color 0.2s, color 0.2s, box-shadow 0.2s"
|
||||
_hover={{
|
||||
color: {base: "gray.800", _dark: "gray.200"}
|
||||
}}
|
||||
_selected={{
|
||||
bg: {base: "white", _dark: "rgba(255, 255, 255, 0.12)"},
|
||||
color: {base: "blue.600", _dark: "blue.200"},
|
||||
boxShadow: "sm",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
<Tabs.Trigger key={cat} value={cat}>
|
||||
{cat}
|
||||
</Tabs.Trigger>
|
||||
))}
|
||||
</Tabs.List>
|
||||
|
||||
{/* right glass crescent */}
|
||||
{canScrollRight && (
|
||||
<Flex
|
||||
position="absolute"
|
||||
@@ -302,8 +267,9 @@ export function SettingsButton() {
|
||||
<ChevronRight size={18} style={{ marginRight: "-30px" }}/>
|
||||
</Flex>
|
||||
)}
|
||||
|
||||
</Box>
|
||||
|
||||
{/* THE WIDGET OPTIONS W/IN EACH CATEGORY */}
|
||||
{categories.map(cat => (
|
||||
<Tabs.Content key={cat} value={cat} p={6}>
|
||||
<Grid templateColumns="repeat(auto-fill, minmax(300px, 1fr))" gap={4}>
|
||||
|
||||
Reference in New Issue
Block a user