Refactor the UI for light mode is at an acceptable point
This commit is contained in:
@@ -3,7 +3,7 @@ import { ColorModeButton } from "@/components/ui/color-mode.jsx";
|
||||
import { useState } from "react";
|
||||
import { NavLink } from "react-router-dom";
|
||||
import Tooltip from "../ui/Tooltip.jsx";
|
||||
import { Mountain, House, Earth, MapPin, ShieldUser, Menu } from 'lucide-react';
|
||||
import { Mountain, House, Earth, MapPin, ShieldUser, Menu, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
|
||||
|
||||
const SIDEBAR_DEFAULT_BUTTONS = [
|
||||
{ icon: House, name: "Home", url: "/home" },
|
||||
@@ -26,7 +26,7 @@ export default function Sidebar() {
|
||||
return (
|
||||
<Box
|
||||
css={styles.root}
|
||||
width={isOpen ? "210px" : "71px"}
|
||||
width={isOpen ? "190px" : "71px"}
|
||||
transition="width 0.4s ease"
|
||||
position="relative"
|
||||
display="flex"
|
||||
@@ -51,31 +51,20 @@ export default function Sidebar() {
|
||||
{isOpen ? "🌋 VDAP" : "🌋"}
|
||||
</Button>
|
||||
|
||||
{/* Menu Trigger */}
|
||||
<IconButton
|
||||
aria-label="Toggle Sidebar"
|
||||
variant="plain"
|
||||
size="md"
|
||||
onClick={toggleSidebar}
|
||||
width="54px"
|
||||
alignSelf={isOpen ? "flex-start" : "center"} // Center the icon when collapsed
|
||||
ml={isOpen ? 3 : 0} // Align with other buttons when open
|
||||
>
|
||||
<Menu />
|
||||
</IconButton>
|
||||
|
||||
|
||||
{/* Navigation Buttons */}
|
||||
{visibleButtons.map((button) => {
|
||||
const Icon = button.icon;
|
||||
return (
|
||||
<Tooltip key={button.name} content={button.name} sidebarIsOpen={isOpen}>
|
||||
// <Tooltip key={button.name} content={button.name} sidebarIsOpen={isOpen}>
|
||||
<Button
|
||||
as={NavLink}
|
||||
to={button.url}
|
||||
css={styles.buttons}
|
||||
justifyContent="flex-start"
|
||||
width="100%"
|
||||
overflow="hidden" // Prevents text popout on collapse
|
||||
// overflow="hidden" // Prevents text popout on collapse
|
||||
>
|
||||
<Icon style={{ flexShrink: 0 }} /> {/* Prevents icon from squishing */}
|
||||
|
||||
@@ -91,17 +80,34 @@ export default function Sidebar() {
|
||||
{button.name}
|
||||
</Box>
|
||||
</Button>
|
||||
</Tooltip>
|
||||
// </Tooltip>
|
||||
);
|
||||
})}
|
||||
<Box
|
||||
mt="auto"
|
||||
display="flex"
|
||||
flexDirection={isOpen ? "row" : "column-reverse"}
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
gap={isOpen ? 16 : 2}
|
||||
pb={4}
|
||||
pr={2}
|
||||
transition="opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease"
|
||||
>
|
||||
{/* Menu Trigger */}
|
||||
<IconButton
|
||||
aria-label="Toggle Sidebar"
|
||||
variant="plain"
|
||||
size="md"
|
||||
onClick={toggleSidebar}
|
||||
transition="opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease"
|
||||
>
|
||||
{isOpen ? <PanelLeftClose style={{ flexShrink: 0 }} /> : <PanelLeftOpen style={{ flexShrink: 0 }} />}
|
||||
</IconButton>
|
||||
|
||||
{/* Theme Toggler */}
|
||||
<ColorModeButton
|
||||
position="absolute"
|
||||
bottom="4"
|
||||
left={isOpen ? "4" : "50%"} // Center the toggle when collapsed
|
||||
transform={isOpen ? "none" : "translateX(-50%)"} // Exact centering logic
|
||||
/>
|
||||
<ColorModeButton />
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -78,7 +78,7 @@ export const WIDGET_REGISTRY = {
|
||||
|
||||
// The baseline data every new VAA widget starts with
|
||||
defaultSettings: {
|
||||
yAxisScale: 'normal' // Options: 'normal' | 'symlog'
|
||||
yAxisScale: 'log' // Options: 'normal' | 'symlog'
|
||||
},
|
||||
allowedSizes: {
|
||||
medium: { w: 6, h: 12 }
|
||||
|
||||
+81
-12
@@ -33,38 +33,107 @@ const sidebarRecipe = defineSlotRecipe({
|
||||
base: {
|
||||
root: {
|
||||
// 1. Semi-transparent backgrounds
|
||||
bg: { base: "linear-gradient(to bottom right, #BBBBBB4C, #FFFFFF4C)", _dark: "rgba(20, 20, 20, 0.4)" },
|
||||
bg: { base: "linear-gradient(to bottom right, #99000040 20%, #FF660040 60%, #EEEE0040 100%)", _dark: "rgba(20, 20, 20, 0.4)" },
|
||||
|
||||
// 2. The glass blur effect
|
||||
backdropFilter: "blur(12px)",
|
||||
WebkitBackdropFilter: "blur(12px)", // For Safari compatibility
|
||||
WebkitBackdropFilter: "blur(12px)",
|
||||
|
||||
// 3. Subtle semi-transparent borders to catch the light
|
||||
// 3. Subtle semi-transparent borders
|
||||
border: "1px solid",
|
||||
borderColor: { base: "rgba(255, 255, 255, 0.3)", _dark: "rgba(255, 255, 255, 0.1)" },
|
||||
borderColor: { base: "rgba(255, 255, 255, 0.8)", _dark: "rgba(255, 255, 255, 0.1)" },
|
||||
|
||||
// CRITICAL: Remove the right border so it doesn't draw a line through your cutout
|
||||
borderRight: "none",
|
||||
|
||||
// Your existing layout properties
|
||||
borderRadius: "2xl",
|
||||
boxShadow: "0 4px 30px rgba(0, 0, 0, 0.1)", // A softer shadow helps the glass pop
|
||||
// boxShadow: "0 4px 30px rgba(0, 0, 0, 0.1)",
|
||||
// boxShadow: "-10px 4px 30px rgba(0, 0, 0, 0.1)",
|
||||
width: "100%",
|
||||
height: "calc(100% - 16px)",
|
||||
margin: "8px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "start",
|
||||
alignItems: "start",
|
||||
alignItems: "stretch",
|
||||
gap: 2,
|
||||
p: 2,
|
||||
|
||||
// CRITICAL: Adjust padding and overflow to allow the button to touch the right edge
|
||||
pl: 2, // Keep left padding
|
||||
py: 2, // Keep top/bottom padding
|
||||
pr: 0, // Remove right padding
|
||||
overflow: "visible", // Allows the curved corner patches to render outside the button
|
||||
zIndex: 10,
|
||||
},
|
||||
buttons: {
|
||||
position: "relative", // Required to anchor the corner patches
|
||||
bg: "transparent",
|
||||
_hover: {bg: "{testButton}", color: "{textInverted}"},
|
||||
"&.active": {bg: "{testButton}", color: "{textInverted}"},
|
||||
fontSize: "xl",
|
||||
|
||||
transition: "background-color 0.4s ease, color 0.4s ease",
|
||||
|
||||
"& svg": {
|
||||
transition: "stroke-width 0.4s ease"
|
||||
},
|
||||
|
||||
_hover: {
|
||||
bg: "rgba(255, 255, 255, 0.1)",
|
||||
color: "{text}",
|
||||
fontWeight: "semibold",
|
||||
"& svg": {
|
||||
strokeWidth: "3"
|
||||
}
|
||||
},
|
||||
|
||||
fontSize: "l",
|
||||
color: {base: "{text}"},
|
||||
variant: "ghost",
|
||||
width: "100%",
|
||||
|
||||
// Flat on the right, rounded on the left
|
||||
borderRightRadius: "0",
|
||||
borderLeftRadius: "4xl",
|
||||
|
||||
"&.active": {
|
||||
bg: "{testBackground}",
|
||||
color: "{textInverted}",
|
||||
|
||||
_hover: {
|
||||
bg: "{testBackground}",
|
||||
color: "{textInverted}",
|
||||
fontWeight: "normal",
|
||||
"& svg": {
|
||||
strokeWidth: "2" // Keeps the active icon at normal thickness on hover
|
||||
}
|
||||
},
|
||||
|
||||
// The Top Inverted Curve
|
||||
_before: {
|
||||
content: '""',
|
||||
position: "absolute",
|
||||
right: "-1px",
|
||||
top: "-25px",
|
||||
width: "25px",
|
||||
height: "25px",
|
||||
bg: "inherit", // This forces the curve to match {testButton}
|
||||
WebkitMaskImage: "radial-gradient(circle at top left, transparent 25px, black 25.5px)",
|
||||
maskImage: "radial-gradient(circle at top left, transparent 25px, black 25.5px)",
|
||||
pointerEvents: "none",
|
||||
},
|
||||
|
||||
// The Bottom Inverted Curve
|
||||
_after: {
|
||||
content: '""',
|
||||
position: "absolute",
|
||||
right: "-1px",
|
||||
bottom: "-25px",
|
||||
width: "25px",
|
||||
height: "25px",
|
||||
bg: "inherit",
|
||||
WebkitMaskImage: "radial-gradient(circle at bottom left, transparent 25px, black 25.5px)",
|
||||
maskImage: "radial-gradient(circle at bottom left, transparent 25px, black 25.5px)",
|
||||
pointerEvents: "none",
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
});
|
||||
@@ -192,7 +261,7 @@ const config = defineConfig({
|
||||
text: {value: {base: "#000000", _dark: "lightgrey"}},
|
||||
textInverted: {value: "#000000"},
|
||||
icon: {value: {base: "#000000", _dark: "lightgrey"}},
|
||||
testBackground: { value: {base: "linear-gradient(to bottom right, #BBBBBB, #FFFFFF)", _dark: "#191613"} },
|
||||
testBackground: { value: {base: "#F9F9F9", _dark: "#191613"} },
|
||||
testSidebar: { value: {base: "#FBFBFB", _dark: "#272421"} },
|
||||
testButton: { value: {base: "#FFFFFF", _dark: "#C09754"} },
|
||||
|
||||
|
||||
Reference in New Issue
Block a user