orcs-design-system 3.3.63 → 3.3.65

package/es/components/SideNavV2/SideNav.js

@@ -132,8 +132,8 @@ const SideNavV2 = _ref => {
         className: "toggle-icon",
         children: /*#__PURE__*/_jsx(Icon, {
           icon: ["fas", toggleIcon],
-          size: "xs",
-          fontSize: "12px"
+          size: "sm",
+          fontSize: "15px"
         })
       })
     }), allItems.map((item, index) => {

package/es/components/SideNavV2/SideNavV2.stories.js

@@ -6,13 +6,14 @@ import { BrowserRouter as Router, Route, Link, useLocation, matchPath, Switch, R
 import { H5, P } from "../Typography";
 import Box from "../Box";
 import { far } from "@fortawesome/free-regular-svg-icons";
+import { fas } from "@fortawesome/free-solid-svg-icons";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import Flex from "../Flex";
 import Spacer from "../Spacer/index";
 import Card from "../Card/index";
 import RenderCurrentViewSection from "./components/RenderCurrentViewSection";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-library.add(far);
+library.add(far, fas);
 export default {
   title: "Components/SideNavV2",
   decorators: [storyFn => /*#__PURE__*/_jsx(Box, {

package/es/components/SideNavV2/components/BaseSection.js

@@ -30,7 +30,8 @@ export const AvatarLink = _ref => {
     gradient
   } = _ref;
   const location = useLocation();
-  const isActive = location.pathname === link;
+  // Check if current path starts with the link path to handle nested routes
+  const isActive = link && location.pathname.startsWith(link);
   return /*#__PURE__*/_jsxs(Link, {
     to: link || "#",
     "aria-label": name,

package/es/components/SideNavV2/components/ExpandedPanel.js

@@ -61,7 +61,7 @@ const ExpandedPanel = _ref => {
   return /*#__PURE__*/_jsxs(Box, {
     position: "relative",
     height: "100%",
-    zIndex: "1",
+    zIndex: "15",
     children: [/*#__PURE__*/_jsxs(SideNavExpanded, {
       ref: el => {
         expandedRef.current = el;
@@ -78,13 +78,17 @@ const ExpandedPanel = _ref => {
       }), item.component()]
     }), /*#__PURE__*/_jsx(ResizeHandle, {
       onMouseDown: onResizeStart,
-      children: /*#__PURE__*/_jsx(ToggleIcon, {
+      children: /*#__PURE__*/_jsxs(ToggleIcon, {
         className: "resize-icon",
-        children: /*#__PURE__*/_jsx(Icon, {
-          icon: isSmallScreen ? ["fas", "up-down"] : ["fas", "left-right"],
-          size: "xs",
-          fontSize: "12px"
-        })
+        children: [/*#__PURE__*/_jsx(Icon, {
+          icon: isSmallScreen ? ["fas", "chevron-up"] : ["fas", "chevron-left"],
+          size: "sm",
+          fontSize: "15px"
+        }), /*#__PURE__*/_jsx(Icon, {
+          icon: isSmallScreen ? ["fas", "chevron-down"] : ["fas", "chevron-right"],
+          size: "sm",
+          fontSize: "15px"
+        })]
       })
     })]
   });

package/es/components/SideNavV2/styles/SideNavV2.styles.js

@@ -109,7 +109,7 @@ export const ResizeHandle = /*#__PURE__*/styled("div").withConfig({
   padding: "0 5px",
   backgroundClip: "content-box",
   height: "100%",
-  zIndex: "10",
+  zIndex: "13",
   cursor: "col-resize",
   backgroundColor: "transparent",
   transition: themeGet("transition.transitionDefault")(props),
@@ -182,11 +182,11 @@ export const ToggleIcon = /*#__PURE__*/styled("div").withConfig({
   height: "28px",
   width: "28px",
   backgroundColor: themeGet("colors.white")(props),
-  borderRadius: "50%",
+  borderRadius: "4px",
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  color: themeGet("colors.primary")(props),
+  color: themeGet("colors.white")(props),
   fontSize: "12px",
   fontWeight: "bold",
   transform: "translateX(-50%)",
@@ -194,7 +194,7 @@ export const ToggleIcon = /*#__PURE__*/styled("div").withConfig({
   boxShadow: "0 2px 6px rgba(0,0,0,0.15)",
   pointerEvents: "none",
   svg: {
-    color: themeGet("colors.primary")(props)
+    color: themeGet("colors.white")(props)
   },
   "&.resize-icon": {
     width: "28px",
@@ -202,19 +202,25 @@ export const ToggleIcon = /*#__PURE__*/styled("div").withConfig({
     top: "20px",
     left: "50%",
     right: "auto",
-    borderRadius: "50%",
+    borderRadius: "4px",
     transform: "translateX(-50%)",
     boxShadow: "0 2px 6px rgba(0,0,0,0.15)"
   },
   [`@media screen and (max-width: ${BREAKPOINTS.SMALL_SCREEN}px)`]: {
     "&.resize-icon": {
       left: "50%",
-      top: "50%",
-      width: "28px",
-      height: "28px",
-      borderRadius: "50%",
+      top: "6px",
+      flexDirection: "column",
       transform: "translate(-50%, -50%)",
-      boxShadow: "0 2px 6px rgba(0,0,0,0.15)"
+      width: "93px",
+      borderRadius: "0 0 2px 2px",
+      height: "15px",
+      "& > span": {
+        height: "6px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }
     }
   }
 }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.3.63",
+  "version": "3.3.65",
   "engines": {
     "node": "20.12.2"
   },
@@ -226,4 +226,4 @@
   "eslintConfig": {
     "extends": "react-app"
   }
-}
+}