chight/Web-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated color more button by consolidating into one button, it now uses css positioning w respect to state rather then visibility

Browse Source
This commit is contained in:
vkuchenik
2026-09-14 15:31:23 -07:00
parent 8e514418d4
commit 3595599dae
2 changed files with 58 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/layout/Sidebar.jsx
+6 -6
View File
@@ -45,17 +45,17 @@ export default function Sidebar() {
{/* Collapse Sidebar and Theme Footer Buttons */} {/* Collapse Sidebar and Theme Footer Buttons */}
<Flex css={styles.footer}> <Flex css={styles.footer}>
<Flex css={styles.closed_theme_button}> {/*<Flex css={styles.closed_theme_button}>*/}
<ColorModeButton /> {/* <ColorModeButton />*/}
</Flex> {/*</Flex>*/}
<Flex> {/*<Flex>*/}
<IconButton aria-label="Toggle Sidebar" variant="plain" onClick={toggleSidebar} css={styles.collapse_button}> <IconButton aria-label="Toggle Sidebar" variant="plain" onClick={toggleSidebar} css={styles.collapse_button}>
{isOpen ? <PanelLeftClose /> : <PanelLeftOpen />} {isOpen ? <PanelLeftClose /> : <PanelLeftOpen />}
</IconButton> </IconButton>
<Flex css={styles.opened_theme_button}> <Flex css={styles.color_mode_button}>
<ColorModeButton /> <ColorModeButton />
</Flex> </Flex>
</Flex> {/*</Flex>*/}
</Flex> </Flex>
</Box> </Box>
); );
client/src/theme.js
+52 -30
View File
@@ -40,7 +40,7 @@ const headerRecipe = defineSlotRecipe({
// CONSOLIDATED ✔ // CONSOLIDATED ✔
const sidebarRecipe = defineSlotRecipe({ const sidebarRecipe = defineSlotRecipe({
slots: ["root", "logo", "logo_text", "footer", "button_text", "buttons", "collapse_button", "opened_theme_button", "closed_theme_button"], slots: ["root", "logo", "logo_text", "footer", "button_text", "buttons", "collapse_button", "color_mode_button"],
base: { base: {
root: { root: {
// 1. Semi-transparent backgrounds // 1. Semi-transparent backgrounds
@@ -160,7 +160,6 @@ const sidebarRecipe = defineSlotRecipe({
}, },
logo: { logo: {
width: "100%", width: "100%",
height: "2.5rem",
justifyContent: "flex-start", justifyContent: "flex-start",
ml: 2, ml: 2,
textStyle: "4xl", textStyle: "4xl",
@@ -175,10 +174,12 @@ const sidebarRecipe = defineSlotRecipe({
textOverflow: "clip", textOverflow: "clip",
}, },
footer: { footer: {
flexDirection: "column", flexDirection: "row",
justifyContent: "space-between",
width: "100%", width: "100%",
mt: "auto", mt: "auto",
ml: 2, pl: 2,
pr: 2,
}, },
button_text: { button_text: {
transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease", transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease",
@@ -190,28 +191,28 @@ const sidebarRecipe = defineSlotRecipe({
collapse_button: { collapse_button: {
"& svg": {flexShrink: "0"}, "& svg": {flexShrink: "0"},
}, },
opened_theme_button: { // opened_theme_button: {
width: "100%", // width: "100%",
align: "center", // align: "center",
justifyContent: "right", // justifyContent: "right",
mr: 6, // mr: 6,
"& button": { // // "& button": {
alignSelf: "center", // // alignSelf: "center",
transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease", // // transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease",
_hover: { // // _hover: {
bg: "transparent", // // bg: "transparent",
} // // }
} // // }
}, // },
closed_theme_button: { // closed_theme_button: {
ml: 0.9, // // ml: 0.9,
"& button": { // // "& button": {
transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease", // // transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease",
_hover: { // // _hover: {
bg: "transparent", // // bg: "transparent",
} // // }
} // // }
}, // },
}, },
variants: { variants: {
state: { state: {
@@ -219,15 +220,36 @@ const sidebarRecipe = defineSlotRecipe({
root: {width: "190px"}, root: {width: "190px"},
button_text: {ml: 3, opacity: 1, visibility: "visible"}, button_text: {ml: 3, opacity: 1, visibility: "visible"},
logo_text: {ml: 3, opacity: 1, visibility: "visible", transition: "opacity 0.5s ease, visibility 0.5s ease, margin 0.5s ease"}, logo_text: {ml: 3, opacity: 1, visibility: "visible", transition: "opacity 0.5s ease, visibility 0.5s ease, margin 0.5s ease"},
opened_theme_button: {"& button": {opacity: 1, visibility: "visible"}}, color_mode_button: {
closed_theme_button: {"& button": {opacity: 0, visibility: "hidden"}}, // the css below makes sure the icon doesn't jump out of the bounds of the sidebar while it's transitioning from closed to open
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "clip",
},
// closed_theme_button: {"& button": {opacity: 0, visibility: "hidden"}},
}, },
closed: { closed: {
root: {width: "71px"}, root: {width: "71px"},
button_text: {opacity: 0, visibility: "hidden"}, button_text: {opacity: 0, visibility: "hidden"},
logo_text: {opacity: 0, visibility: "hidden", transition: "opacity 0.2s ease, visibility 0.2s ease, margin 0.2s ease"}, logo_text: {opacity: 0, visibility: "hidden", transition: "opacity 0.2s ease, visibility 0.2s ease, margin 0.2s ease"},
opened_theme_button: {"& button": {opacity: 0, visibility: "hidden"}}, color_mode_button: {
closed_theme_button: {"& button": {opacity: 1, visibility: "visible"}}, "& button": {
position: "relative",
bottom: "50px",
right: "37px",
}
},
// closed_theme_button: {
// ml: 0.9,
// "& button": {
// transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease",
// _hover: {
// bg: "transparent",
// },
// opacity: 1,
// visibility: "visible",
// }
// },
} }
} }
} }