From 1c6951d245390540b172d2c0e3464cd63de6b3b3 Mon Sep 17 00:00:00 2001 From: vkuchenik Date: Thu, 3 Sep 2026 11:21:50 -0700 Subject: [PATCH 01/12] fixed sidebar animation issues by truncating btn text and using css transitions on footer icons --- client/src/components/layout/Sidebar.jsx | 46 ++++--- client/src/theme.js | 161 +++++++++++++---------- 2 files changed, 121 insertions(+), 86 deletions(-) diff --git a/client/src/components/layout/Sidebar.jsx b/client/src/components/layout/Sidebar.jsx index 2ea67ef..0d80cf0 100644 --- a/client/src/components/layout/Sidebar.jsx +++ b/client/src/components/layout/Sidebar.jsx @@ -1,9 +1,8 @@ -import {useSlotRecipe, Box, Button, IconButton} from "@chakra-ui/react"; +import {useSlotRecipe, Box, Button, IconButton, Text, Flex} from "@chakra-ui/react"; 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, PanelLeftClose, PanelLeftOpen} from 'lucide-react'; +import {Mountain, House, Earth, MapPin, ShieldUser, PanelLeftClose, PanelLeftOpen} from 'lucide-react'; const SIDEBAR_DEFAULT_BUTTONS = [ {icon: House, name: "Home", url: "/home"}, @@ -27,17 +26,19 @@ export default function Sidebar() { return ( - {/* Home Link Logo */} + {/* Logo Navigates to Home Page */} - {/* Navigation Buttons */} {visibleButtons.map((button) => { const Icon = button.icon; @@ -55,21 +56,26 @@ export default function Sidebar() { ); })} - - {/* Menu Trigger */} - - {isOpen ? : } - - {/* Theme Toggler */} + + - - + + + + {isOpen ? : } + + + + + + + ); } \ No newline at end of file diff --git a/client/src/theme.js b/client/src/theme.js index 41e836d..f19c6ae 100644 --- a/client/src/theme.js +++ b/client/src/theme.js @@ -1,6 +1,6 @@ import {defineSlotRecipe, createSystem, defaultConfig, defineConfig, defineRecipe} from "@chakra-ui/react"; -// RECIPES +//β€”β€”β€”β€”β€”RECIPESβ€”β€”β€”β€”β€”// const headerRecipe = defineRecipe({ base: { bg: "{transparent}", @@ -14,8 +14,9 @@ const headerRecipe = defineRecipe({ } }); +// CONSOLIDATED βœ” const sidebarRecipe = defineSlotRecipe({ - slots: ["root", "logo", "footer", "button_text","buttons", "collapse_button"], + slots: ["root", "logo", "logo_text", "footer", "button_text", "buttons", "collapse_button", "opened_theme_button", "closed_theme_button"], base: { root: { // 1. Semi-transparent backgrounds @@ -47,7 +48,7 @@ const sidebarRecipe = defineSlotRecipe({ justifyContent: "start", alignItems: "stretch", gap: 4, - transition: "width 0.4s ease", + transition: "width 0.5s ease", // CRITICAL: Adjust padding and overflow to allow the button to touch the right edge pl: 2, // Keep left padding @@ -62,7 +63,7 @@ const sidebarRecipe = defineSlotRecipe({ bg: "transparent", justifyContent: "flex-start", - transition: "background-color 0.4s ease, color 0.4s ease", + transition: "background-color 0.3s ease, color 0.3s ease", "& svg": { transition: "stroke-width 0.4s ease", @@ -131,41 +132,68 @@ const sidebarRecipe = defineSlotRecipe({ }, logo: { width: "100%", - height: "auto", + height: "2.5rem", + justifyContent: "flex-start", + ml: 2, + textStyle: "4xl", overflow: "hidden", fontWeight: "bold", + fontSize: "2rem", px: 0, }, + logo_text: { + transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease", + whiteSpace: "nowrap", + overflow: "hidden", + textOverflow: "clip", + }, footer: { + flexDirection: "column", + width: "100%", 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" + ml: 2, }, button_text: { transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease", - whiteSpace: "nowrap" + whiteSpace: "nowrap", + overflow: "hidden", + textOverflow: "clip", }, collapse_button: { "& svg": { flexShrink: "0" }, }, + opened_theme_button: { + width: "100%" , + align: "center", + justifyContent: "right", + mr: 6, + "& button": { + alignSelf: "center", + transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease", + } + }, + closed_theme_button: { + ml: 0.9, + "& button": { + transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease", + } + }, }, 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"}, + logo_text: {ml: 3, opacity: 1, visibility: "visible"}, + opened_theme_button: {"& button": {opacity: 1, visibility: "visible"}}, + closed_theme_button: {"& button": {opacity: 0, visibility: "hidden"}}, }, 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"}, + button_text: {opacity: 0, visibility: "hidden"}, + logo_text: {opacity: 0, visibility: "hidden"}, + opened_theme_button: {"& button": {opacity: 0, visibility: "hidden"}}, + closed_theme_button: {"& button": {opacity: 1, visibility: "visible"}}, } } } @@ -185,43 +213,43 @@ const canvasRecipe = defineRecipe({ } }); -const widgetRecipe = defineSlotRecipe({ - slots: ["root", "header", "canvas"], - base: { - root: { - flexDirection: "column", - gap: "1", - position: "relative", - bg: "base100", - borderRadius: "md", - p: "1", - paddingBottom: "2", - border: "1px solid", - borderColor: "{base300}", - textAlign: "center", - height: "100%", - position: "fixed" - }, - header: { - flexShrink: "0", - bg: "{base300}", - color: "{text}", - cursor: "move", - borderRadius: "sm", - whiteSpace: "nowrap", - textAlign: "left", - pl: "2" - }, - canvas: { - flex: "1 1 auto", - bg: "transparent", - color: "{text}", - cursor: "default", - borderRadius: "md", - overflow: "auto", - } - } -}); +// const widgetRecipe = defineSlotRecipe({ +// slots: ["root", "header", "canvas"], +// base: { +// root: { +// flexDirection: "column", +// gap: "1", +// position: "relative", +// bg: "base100", +// borderRadius: "md", +// p: "1", +// paddingBottom: "2", +// border: "1px solid", +// borderColor: "{base300}", +// textAlign: "center", +// height: "100%", +// // position: "fixed" +// }, +// header: { +// flexShrink: "0", +// bg: "{base300}", +// color: "{text}", +// cursor: "move", +// borderRadius: "sm", +// whiteSpace: "nowrap", +// textAlign: "left", +// pl: "2" +// }, +// canvas: { +// flex: "1 1 auto", +// bg: "transparent", +// color: "{text}", +// cursor: "default", +// borderRadius: "md", +// overflow: "auto", +// } +// } +// }); const glassPanelRecipe = defineSlotRecipe({ slots: ["root", "header", "body"], @@ -348,7 +376,7 @@ const glassTabRecipe = defineRecipe({ } }); -const config = defineConfig({ +const config= defineConfig({ globalCss: { ".react-grid-placeholder": { background: "#c0d2e3ff !important", @@ -423,16 +451,17 @@ const config = defineConfig({ theme: { semanticTokens: { colors: { - base100: {value: {base: "#f6f9faff", _dark: "#1617199e"}}, - base200: {value: {base: "#e6ecf1ff", _dark: "#242424"}}, - base300: {value: {base: "#d3dae4ff", _dark: "#0a0b0bff"}}, - primary: {value: {base: "#2B98F8", _dark: "#2B98F8"}}, - primaryLt: {value: {base: "#98cdffff", _dark: "#98cdffff"}}, - secondaryBG: {value: {base: "#EDF1F1", _dark: "#121212"}}, - border: {value: {base: "#000000", _dark: "#cbcbcb84"}}, - text: {value: {base: "#000000", _dark: "#FFFFFF"}}, - textInverted: {value: {base: "#000000", _dark: "#FFFFFF"}}, - icon: {value: {base: "#000000", _dark: "#FFFFFF"}}, + // base100: {value: {base: "#f6f9faff", _dark: "#1617199e"}}, + // base200: {value: {base: "#e6ecf1ff", _dark: "#242424"}}, + // base300: {value: {base: "#d3dae4ff", _dark: "#0a0b0bff"}}, + // primary: {value: {base: "#2B98F8", _dark: "#2B98F8"}}, + // primaryLt: {value: {base: "#98cdffff", _dark: "#98cdffff"}}, + // secondaryBG: {value: {base: "#EDF1F1", _dark: "#121212"}}, + // border: {value: {base: "#000000", _dark: "#cbcbcb84"}}, + // text: {value: {base: "#000000", _dark: "#FFFFFF"}}, + // textInverted: {value: {base: "#000000", _dark: "#FFFFFF"}}, + // icon: {value: {base: "#000000", _dark: "#FFFFFF"}}, + gooeyButtonBackground: {value: {base: "rgba(255, 255, 255, 0.1)", _dark: "rgba(255, 255, 255, 0.1)"}}, MainBackground: {value: {base: "#F9F9F9", _dark: "#141414"}}, titleColor: {value: {base: "gray.800", _dark: "#FFFFFF"}}, @@ -453,7 +482,7 @@ const config = defineConfig({ }, slotRecipes: { sidebar: sidebarRecipe, - widget: widgetRecipe, + // widget: widgetRecipe, glassPanel: glassPanelRecipe, }, }, From cde2c4660bcb61da97e4e06da38b8e2fc97934c0 Mon Sep 17 00:00:00 2001 From: vkuchenik Date: Thu, 3 Sep 2026 12:32:49 -0700 Subject: [PATCH 02/12] updated themes file to further reduce styling in sidebar component page --- client/src/components/layout/Sidebar.jsx | 41 +++++++----------------- client/src/theme.js | 13 ++++++-- 2 files changed, 22 insertions(+), 32 deletions(-) diff --git a/client/src/components/layout/Sidebar.jsx b/client/src/components/layout/Sidebar.jsx index 0d80cf0..ba6c641 100644 --- a/client/src/components/layout/Sidebar.jsx +++ b/client/src/components/layout/Sidebar.jsx @@ -1,8 +1,8 @@ +import {Mountain, House, Earth, MapPin, ShieldUser, PanelLeftClose, PanelLeftOpen} from 'lucide-react'; import {useSlotRecipe, Box, Button, IconButton, Text, Flex} from "@chakra-ui/react"; import {ColorModeButton} from "@/components/ui/color-mode.jsx"; -import {useState} from "react"; import {NavLink} from "react-router-dom"; -import {Mountain, House, Earth, MapPin, ShieldUser, PanelLeftClose, PanelLeftOpen} from 'lucide-react'; +import {useState} from "react"; const SIDEBAR_DEFAULT_BUTTONS = [ {icon: House, name: "Home", url: "/home"}, @@ -13,27 +13,18 @@ const SIDEBAR_DEFAULT_BUTTONS = [ ]; export default function Sidebar() { - const [isOpen, setIsOpen] = useState(true); - const recipe = useSlotRecipe({key: "sidebar"}); 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; + const visibleButtons = SIDEBAR_DEFAULT_BUTTONS; // TODO: call btns here according to users authorization const toggleSidebar = () => setIsOpen((prev) => !prev); return ( {/* Logo Navigates to Home Page */} -