Refactor, cleaned up sidebar and theme
This commit is contained in:
@@ -14,9 +14,11 @@ const SIDEBAR_DEFAULT_BUTTONS = [
|
||||
];
|
||||
|
||||
export default function Sidebar() {
|
||||
|
||||
const [isOpen, setIsOpen] = useState(true);
|
||||
|
||||
const recipe = useSlotRecipe({key: "sidebar"});
|
||||
const styles = recipe();
|
||||
const styles = recipe({state: isOpen ? "open" : "closed"});
|
||||
|
||||
// TODO we will need to call buttons here by authorized user, for now we update the visible buttons as simply the default buttons
|
||||
const visibleButtons = SIDEBAR_DEFAULT_BUTTONS;
|
||||
@@ -24,86 +26,45 @@ export default function Sidebar() {
|
||||
const toggleSidebar = () => setIsOpen((prev) => !prev);
|
||||
|
||||
return (
|
||||
<Box
|
||||
css={styles.root}
|
||||
width={isOpen ? "190px" : "71px"}
|
||||
transition="width 0.4s ease"
|
||||
position="relative"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
gap={4} // Increased gap slightly to help with the squashed look
|
||||
pt={4} // Added top padding to give the logo room to breathe
|
||||
>
|
||||
<Box css={styles.root}>
|
||||
{/* Home Link Logo */}
|
||||
<Button
|
||||
as={NavLink}
|
||||
to="/home"
|
||||
color="color"
|
||||
css={styles.logo}
|
||||
variant="plain"
|
||||
fontWeight="bold"
|
||||
height="auto" // Prevents the large text from squashing vertically
|
||||
overflow="hidden"
|
||||
width="100%"
|
||||
px={0}
|
||||
justifyContent={isOpen ? "flex-start" : "center"} // Center the 'V' when collapsed
|
||||
ml={isOpen ? 2 : -1} // Align with other buttons when open
|
||||
textStyle={isOpen ? "4xl" : "3xl"} // Scale down slightly when closed
|
||||
>
|
||||
{isOpen ? "🌋 VDAP" : "🌋"}
|
||||
</Button>
|
||||
|
||||
|
||||
|
||||
{/* Navigation Buttons */}
|
||||
{visibleButtons.map((button) => {
|
||||
const Icon = button.icon;
|
||||
return (
|
||||
// <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
|
||||
>
|
||||
<Icon style={{ flexShrink: 0 }} /> {/* Prevents icon from squishing */}
|
||||
|
||||
{/* Cleaned conditional transition styling */}
|
||||
<Box
|
||||
as="span"
|
||||
ml={isOpen ? 3 : 0}
|
||||
opacity={isOpen ? 1 : 0}
|
||||
visibility={isOpen ? "visible" : "hidden"} // Prevents phantom width calculations and overflow into canvas
|
||||
transition="opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease"
|
||||
whiteSpace="nowrap"
|
||||
>
|
||||
{/* Navigation buttons are [icon text] */}
|
||||
<Icon/>
|
||||
<Box as="span" css={styles.button_text}>
|
||||
{button.name}
|
||||
</Box>
|
||||
</Button>
|
||||
// </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"
|
||||
>
|
||||
<Box css={styles.footer}>
|
||||
{/* 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"
|
||||
css={styles.collapse_button}
|
||||
>
|
||||
{isOpen ? <PanelLeftClose style={{ flexShrink: 0 }} /> : <PanelLeftOpen style={{ flexShrink: 0 }} />}
|
||||
{isOpen ? <PanelLeftClose /> : <PanelLeftOpen />}
|
||||
</IconButton>
|
||||
|
||||
{/* Theme Toggler */}
|
||||
|
||||
+47
-3
@@ -29,7 +29,7 @@ const canvasRecipe = defineRecipe({
|
||||
});
|
||||
|
||||
const sidebarRecipe = defineSlotRecipe({
|
||||
slots: ["root", "close_button", "buttons", "dark_mode_button"],
|
||||
slots: ["root", "logo", "footer", "button_text","buttons", "collapse_button"],
|
||||
base: {
|
||||
root: {
|
||||
// 1. Semi-transparent backgrounds
|
||||
@@ -57,14 +57,17 @@ const sidebarRecipe = defineSlotRecipe({
|
||||
margin: "8px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
position: "relative",
|
||||
justifyContent: "start",
|
||||
alignItems: "stretch",
|
||||
gap: 2,
|
||||
gap: 4,
|
||||
transition: "width 0.4s ease",
|
||||
|
||||
// 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
|
||||
pt: 4, // Added top padding to give the logo room to breathe
|
||||
overflow: "visible", // Allows the curved corner patches to render outside the button
|
||||
zIndex: 10,
|
||||
},
|
||||
@@ -72,10 +75,12 @@ const sidebarRecipe = defineSlotRecipe({
|
||||
position: "relative", // Required to anchor the corner patches
|
||||
bg: "transparent",
|
||||
|
||||
justifyContent: "flex-start",
|
||||
transition: "background-color 0.4s ease, color 0.4s ease",
|
||||
|
||||
"& svg": {
|
||||
transition: "stroke-width 0.4s ease"
|
||||
transition: "stroke-width 0.4s ease",
|
||||
flexShrink: "0"
|
||||
},
|
||||
|
||||
_hover: {
|
||||
@@ -138,6 +143,45 @@ const sidebarRecipe = defineSlotRecipe({
|
||||
}
|
||||
},
|
||||
},
|
||||
logo: {
|
||||
width: "100%",
|
||||
height: "auto",
|
||||
overflow: "hidden",
|
||||
fontWeight: "bold",
|
||||
px: 0,
|
||||
},
|
||||
footer: {
|
||||
mt: "auto",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
pb: 4,
|
||||
pr: 2,
|
||||
transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease"
|
||||
},
|
||||
button_text: {
|
||||
transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease",
|
||||
whiteSpace: "nowrap"
|
||||
},
|
||||
collapse_button: {
|
||||
"& svg": { flexShrink: "0" },
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
state: {
|
||||
open: {
|
||||
root: { width: "190px" },
|
||||
logo: { justifyContent: "flex-start", ml: 2, textStyle: "4xl" },
|
||||
footer: { gap: 16, flexDirection: "row" },
|
||||
button_text: {ml: 3, opacity: 1, visibility: "visible"},
|
||||
},
|
||||
closed: {
|
||||
root: { width: "71px" },
|
||||
logo: { justifyContent: "center", ml: -1, textStyle: "3xl" },
|
||||
footer: { gap: 2, flexDirection: "column-reverse" },
|
||||
button_text: {ml: 0, opacity: 0, visibility: "hidden"},
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user