@capillarytech/blaze-ui 6.1.4 → 6.1.6-beta.1

package/CapNavigationSPA/CapNavigationSPASidebar/index.js

@@ -0,0 +1,373 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useRef, useState, useCallback } from "react";
+import CapIcon from "../../CapIcon/index.js";
+import styles from "./styles.module.scss.js";
+const SIDEBAR_DIVIDER_BEFORE_KEY = "data-management";
+const DEFAULT_ICON_MAP = {
+  loyalty: "loyalty-tag",
+  // Figma 583:6938 – heart inside tag
+  engage: "engage-nav",
+  // Figma 646-59790 – megaphone with settings
+  rewards: "rewards-outline",
+  insights: "insights-nav",
+  // Figma 646-59984 – bar chart in frame
+  aira: "aira-nav",
+  // Figma 646-59790 – three sparkles, stroke icon
+  members: "members",
+  audiences: "groups",
+  creatives: "creatives-nav",
+  // Figma 646-59984 – document with pen
+  "data-management": "data-management",
+  extensions: "code",
+  settings: "settings"
+};
+const CapNavigationSPASidebar = ({
+  items,
+  selectedKey = "",
+  onItemClick,
+  settingsLabel = "Settings",
+  logo,
+  className,
+  collapsed = false,
+  onCollapseExpand,
+  navigateToLink = true
+}) => {
+  const wrapperRef = useRef(null);
+  const [hoverExpandedKey, setHoverExpandedKey] = useState(null);
+  const [clickExpandedKey, setClickExpandedKey] = useState(null);
+  const [hoverL1TooltipKey, setHoverL1TooltipKey] = useState(null);
+  const expandedParentKey = clickExpandedKey ?? hoverExpandedKey;
+  const closeFlyout = useCallback(() => {
+    setHoverExpandedKey(null);
+    setClickExpandedKey(null);
+    setHoverL1TooltipKey(null);
+  }, []);
+  const handleClick = useCallback(
+    (item) => {
+      if (navigateToLink && item.link && item.link !== window.location.pathname) {
+        window.location.pathname = item.link;
+      }
+      onItemClick == null ? void 0 : onItemClick(item);
+    },
+    [navigateToLink, onItemClick]
+  );
+  const toggleParentExpanded = useCallback(
+    (parentKey) => {
+      if (expandedParentKey === parentKey) {
+        closeFlyout();
+      } else {
+        setHoverExpandedKey(null);
+        setClickExpandedKey(parentKey);
+      }
+    },
+    [expandedParentKey, closeFlyout]
+  );
+  const handleItemClick = useCallback(
+    (item) => {
+      var _a, _b;
+      if (collapsed) {
+        if (onCollapseExpand) {
+          onCollapseExpand();
+        }
+        if ((_a = item.children) == null ? void 0 : _a.length) {
+          setHoverExpandedKey(null);
+          setClickExpandedKey(item.key);
+        } else {
+          closeFlyout();
+          handleClick(item);
+        }
+        return;
+      }
+      if ((_b = item.children) == null ? void 0 : _b.length) {
+        toggleParentExpanded(item.key);
+      } else {
+        closeFlyout();
+        handleClick(item);
+      }
+    },
+    [collapsed, onCollapseExpand, toggleParentExpanded, closeFlyout, handleClick]
+  );
+  const getIconType = (item) => item.iconType ?? DEFAULT_ICON_MAP[item.key] ?? void 0;
+  const handleWrapperMouseLeave = useCallback(() => {
+    setHoverExpandedKey(null);
+    setHoverL1TooltipKey(null);
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: wrapperRef,
+      className: styles["cap-navigation-spa-sidebar__wrapper"],
+      onMouseLeave: handleWrapperMouseLeave,
+      children: /* @__PURE__ */ jsxs(
+        "aside",
+        {
+          className: classNames(
+            styles["cap-navigation-spa-sidebar"],
+            collapsed && styles["cap-navigation-spa-sidebar--collapsed"],
+            className
+          ),
+          "data-testid": "cap-navigation-spa-sidebar",
+          children: [
+            /* @__PURE__ */ jsx("div", { className: styles["cap-navigation-spa-sidebar__logo"], children: logo !== void 0 ? logo : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                CapIcon,
+                {
+                  type: "capillary",
+                  size: "s",
+                  className: styles["cap-navigation-spa-sidebar__logo-icon"]
+                }
+              ),
+              !collapsed && /* @__PURE__ */ jsx("span", { className: styles["cap-navigation-spa-sidebar__logo-text"], children: "capillary" })
+            ] }) }),
+            /* @__PURE__ */ jsx("nav", { className: styles["cap-navigation-spa-sidebar__nav"], children: items.flatMap((item) => {
+              var _a, _b, _c, _d;
+              const isExpandedWithChildren = !collapsed && ((_a = item.children) == null ? void 0 : _a.length) && expandedParentKey === item.key;
+              const parentButton = /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: classNames(
+                    styles["cap-navigation-spa-sidebar__item"],
+                    expandedParentKey === item.key && styles["cap-navigation-spa-sidebar__item--expanded"],
+                    expandedParentKey === item.key && item.key === "loyalty" && styles["cap-navigation-spa-sidebar__item--expanded-loyalty"],
+                    expandedParentKey === item.key && item.key === "engage" && styles["cap-navigation-spa-sidebar__item--expanded-engage"],
+                    expandedParentKey === item.key && item.key === "insights" && styles["cap-navigation-spa-sidebar__item--expanded-insights"],
+                    expandedParentKey === item.key && item.key === "members" && styles["cap-navigation-spa-sidebar__item--expanded-members"],
+                    expandedParentKey === item.key && item.key === "rewards" && styles["cap-navigation-spa-sidebar__item--expanded-rewards"],
+                    expandedParentKey === item.key && item.key === "audiences" && styles["cap-navigation-spa-sidebar__item--expanded-audiences"],
+                    expandedParentKey === item.key && item.key === "data-management" && styles["cap-navigation-spa-sidebar__item--expanded-data-management"],
+                    expandedParentKey === item.key && item.key === "extensions" && styles["cap-navigation-spa-sidebar__item--expanded-extensions"],
+                    expandedParentKey === item.key && item.key === "settings" && styles["cap-navigation-spa-sidebar__item--expanded-settings"]
+                  ),
+                  onClick: () => handleItemClick(item),
+                  onMouseEnter: () => {
+                    var _a2;
+                    if ((_a2 = item.children) == null ? void 0 : _a2.length) {
+                      if (collapsed) {
+                        setHoverExpandedKey(item.key);
+                      }
+                      setHoverL1TooltipKey(null);
+                    } else if (collapsed) {
+                      setHoverL1TooltipKey(item.key);
+                    }
+                  },
+                  "data-testid": `cap-navigation-spa-sidebar-item-${item.key}`,
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: styles["cap-navigation-spa-sidebar__item-icon"], children: getIconType(item) ? /* @__PURE__ */ jsx(CapIcon, { type: getIconType(item), size: "s" }) : /* @__PURE__ */ jsx("span", { className: styles["cap-navigation-spa-sidebar__item-dot"] }) }),
+                    !collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx("span", { className: styles["cap-navigation-spa-sidebar__item-label"], children: item.title }),
+                      ((_b = item.children) == null ? void 0 : _b.length) ? /* @__PURE__ */ jsx(
+                        CapIcon,
+                        {
+                          type: expandedParentKey === item.key ? "chevron-down" : "chevron-right",
+                          size: "s",
+                          className: styles["cap-navigation-spa-sidebar__item-chevron"]
+                        }
+                      ) : null
+                    ] })
+                  ]
+                },
+                item.key
+              );
+              const showCollapsedFlyout = collapsed && ((_c = item.children) == null ? void 0 : _c.length) && expandedParentKey === item.key;
+              const showL1TooltipFlyout = collapsed && !((_d = item.children) == null ? void 0 : _d.length) && hoverL1TooltipKey === item.key;
+              const l2Inline = isExpandedWithChildren ? /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: styles["cap-navigation-spa-sidebar__l2-wrapper"],
+                  children: [
+                    /* @__PURE__ */ jsx("div", { className: styles["cap-navigation-spa-sidebar__l2-divider"], "aria-hidden": true }),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: styles["cap-navigation-spa-sidebar__l2-inline"],
+                        onMouseEnter: () => setHoverExpandedKey(item.key),
+                        "data-testid": `cap-navigation-spa-sidebar-l2-${item.key}`,
+                        children: item.children.map((child) => /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            className: classNames(
+                              styles["cap-navigation-spa-sidebar__l2-inline-item"],
+                              selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-inline-item--selected"],
+                              item.key === "loyalty" && selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-inline-item--selected-loyalty"],
+                              item.key === "engage" && selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-inline-item--selected-engage"],
+                              item.key === "insights" && selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-inline-item--selected-insights"],
+                              item.key === "members" && selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-inline-item--selected-members"],
+                              item.key === "rewards" && selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-inline-item--selected-rewards"],
+                              item.key === "audiences" && selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-inline-item--selected-audiences"],
+                              item.key === "data-management" && selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-inline-item--selected-data-management"],
+                              item.key === "extensions" && selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-inline-item--selected-extensions"],
+                              item.key === "settings" && selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-inline-item--selected-settings"]
+                            ),
+                            onClick: () => {
+                              handleClick(child);
+                            },
+                            "data-testid": `cap-navigation-spa-sidebar-l2-item-${child.key}`,
+                            children: child.title
+                          },
+                          child.key
+                        ))
+                      },
+                      `${item.key}-l2`
+                    )
+                  ]
+                },
+                `${item.key}-l2-wrapper`
+              ) : null;
+              const collapsedFlyout = showCollapsedFlyout ? /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: styles["cap-navigation-spa-sidebar__l2-flyout"],
+                  onMouseEnter: () => setHoverExpandedKey(item.key),
+                  "data-testid": `cap-navigation-spa-sidebar-l2-flyout-${item.key}`,
+                  role: "menu",
+                  "aria-label": item.title,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: styles["cap-navigation-spa-sidebar__l2-flyout-arrow"],
+                        "aria-hidden": true
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("div", { className: styles["cap-navigation-spa-sidebar__l2-flyout-card"], children: [
+                      /* @__PURE__ */ jsx("div", { className: styles["cap-navigation-spa-sidebar__l2-flyout-parent"], children: item.title }),
+                      item.children.map((child) => /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          className: classNames(
+                            styles["cap-navigation-spa-sidebar__l2-flyout-item"],
+                            selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-flyout-item--selected"]
+                          ),
+                          onClick: () => {
+                            setClickExpandedKey(item.key);
+                            if (collapsed && onCollapseExpand) {
+                              onCollapseExpand();
+                            }
+                            handleClick(child);
+                          },
+                          "data-testid": `cap-navigation-spa-sidebar-l2-flyout-item-${child.key}`,
+                          role: "menuitem",
+                          children: child.title
+                        },
+                        child.key
+                      ))
+                    ] })
+                  ]
+                },
+                `${item.key}-l2-flyout`
+              ) : null;
+              const l1TooltipFlyout = showL1TooltipFlyout ? /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: styles["cap-navigation-spa-sidebar__l1-tooltip-flyout"],
+                  onMouseEnter: () => setHoverL1TooltipKey(item.key),
+                  "data-testid": `cap-navigation-spa-sidebar-l1-tooltip-${item.key}`,
+                  role: "tooltip",
+                  "aria-label": item.title,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: styles["cap-navigation-spa-sidebar__l2-flyout-arrow"],
+                        "aria-hidden": true
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("div", { className: styles["cap-navigation-spa-sidebar__l1-tooltip-card"], children: /* @__PURE__ */ jsx("div", { className: styles["cap-navigation-spa-sidebar__l1-tooltip-label"], children: item.title }) })
+                  ]
+                },
+                `${item.key}-l1-tooltip`
+              ) : null;
+              const wrapForCollapsedFlyout = collapsed;
+              const renderedButton = wrapForCollapsedFlyout ? /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: styles["cap-navigation-spa-sidebar__item-flyout-wrap"],
+                  onMouseLeave: closeFlyout,
+                  children: [
+                    parentButton,
+                    collapsedFlyout,
+                    l1TooltipFlyout
+                  ]
+                },
+                `${item.key}-flyout-wrap`
+              ) : parentButton;
+              if (item.key === SIDEBAR_DIVIDER_BEFORE_KEY) {
+                return [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: styles["cap-navigation-spa-sidebar__divider"],
+                      "aria-hidden": true
+                    },
+                    `divider-${item.key}`
+                  ),
+                  renderedButton,
+                  ...l2Inline ? [l2Inline] : []
+                ];
+              }
+              if (item.key === "settings") {
+                return [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: styles["cap-navigation-spa-sidebar__divider"],
+                      "aria-hidden": true
+                    },
+                    "divider-settings"
+                  ),
+                  renderedButton,
+                  ...l2Inline ? [l2Inline] : []
+                ];
+              }
+              return [renderedButton, ...l2Inline ? [l2Inline] : []];
+            }) }),
+            /* @__PURE__ */ jsxs("div", { className: styles["cap-navigation-spa-sidebar__footer"], children: [
+              !items.some((i) => i.key === "settings") && /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: styles["cap-navigation-spa-sidebar__item"],
+                  onClick: () => {
+                    closeFlyout();
+                    const settingsItem = { key: "settings", title: settingsLabel, link: "/settings" };
+                    handleClick(settingsItem);
+                  },
+                  "data-testid": "cap-navigation-spa-sidebar-settings",
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: styles["cap-navigation-spa-sidebar__item-icon"], children: /* @__PURE__ */ jsx(CapIcon, { type: "settings", size: "s" }) }),
+                    !collapsed && /* @__PURE__ */ jsx("span", { className: styles["cap-navigation-spa-sidebar__item-label"], children: settingsLabel })
+                  ]
+                }
+              ),
+              onCollapseExpand && /* @__PURE__ */ jsx("div", { className: styles["cap-navigation-spa-sidebar__collapse-wrap"], children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: styles["cap-navigation-spa-sidebar__collapse-btn"],
+                  onClick: onCollapseExpand,
+                  "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+                  "data-testid": "cap-navigation-spa-sidebar-collapse-toggle",
+                  children: /* @__PURE__ */ jsx(
+                    CapIcon,
+                    {
+                      type: collapsed ? "sidebar-expand" : "sidebar-collapse",
+                      size: "s",
+                      className: styles["cap-navigation-spa-sidebar__collapse-btn-icon"]
+                    }
+                  )
+                }
+              ) })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  CapNavigationSPASidebar as default
+};

package/CapNavigationSPA/CapNavigationSPASidebar/styles.css

@@ -0,0 +1,318 @@
+/* Color Palette */
+/* Fonts */
+/* Backward Compatibility Aliases */
+/* Component Heights */
+/* Border Radius */
+/* Border Width */
+/* Transition */
+/* Timezones Footer */
+.cap-navigation-spa-sidebar__wrapper {
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+}
+.cap-navigation-spa-sidebar {
+  width: 17.143rem;
+  min-width: 17.143rem;
+  height: 100%;
+  background-color: #fafbfc;
+  border-right: 1px solid #dfe2e7;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  transition: width 0.2s ease, min-width 0.2s ease;
+}
+.cap-navigation-spa-sidebar--collapsed {
+  width: 5.714rem;
+  min-width: 5.714rem;
+  background-color: #fafbfc;
+}
+.cap-navigation-spa-sidebar__logo {
+  height: 5rem;
+  padding: 1rem 0.857rem 1rem 1.429rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+.cap-navigation-spa-sidebar--collapsed .cap-navigation-spa-sidebar__logo {
+  padding: 1rem 0.571rem;
+  justify-content: center;
+}
+.cap-navigation-spa-sidebar__logo-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.cap-navigation-spa-sidebar__logo-text {
+  font-family: "Roboto", sans-serif;
+  font-size: 1.143rem;
+  font-weight: 500;
+  color: #091e42;
+}
+.cap-navigation-spa-sidebar__nav {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: 0;
+}
+.cap-navigation-spa-sidebar__item {
+  display: flex;
+  align-items: center;
+  height: 2.857rem;
+  padding: 0 1.429rem 0 1.429rem;
+  gap: 1rem;
+  width: 100%;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-family: "Roboto", sans-serif;
+  font-size: 1rem;
+  font-weight: 400;
+  color: #091e42;
+  text-align: left;
+  transition: background-color 0.15s ease;
+}
+.cap-navigation-spa-sidebar__item:hover {
+  background-color: #ebecf0;
+}
+.cap-navigation-spa-sidebar--collapsed .cap-navigation-spa-sidebar__item {
+  padding: 0 0.571rem;
+  justify-content: center;
+}
+.cap-navigation-spa-sidebar__item-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  color: #091e42;
+}
+.cap-navigation-spa-sidebar__item-dot {
+  width: 0.25rem;
+  height: 0.25rem;
+  border-radius: 50%;
+  background-color: currentColor;
+}
+.cap-navigation-spa-sidebar__item-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.cap-navigation-spa-sidebar__item--expanded {
+  background-color: #ebecf0;
+}
+.cap-navigation-spa-sidebar__item--expanded-loyalty,
+.cap-navigation-spa-sidebar__item--expanded-engage,
+.cap-navigation-spa-sidebar__item--expanded-insights,
+.cap-navigation-spa-sidebar__item--expanded-members,
+.cap-navigation-spa-sidebar__item--expanded-rewards,
+.cap-navigation-spa-sidebar__item--expanded-audiences,
+.cap-navigation-spa-sidebar__item--expanded-data-management,
+.cap-navigation-spa-sidebar__item--expanded-extensions,
+.cap-navigation-spa-sidebar__item--expanded-settings {
+  background-color: #e9f0fe;
+}
+.cap-navigation-spa-sidebar__item-chevron {
+  flex-shrink: 0;
+  margin-left: auto;
+  color: #091e42;
+}
+.cap-navigation-spa-sidebar__l2-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.cap-navigation-spa-sidebar__l2-divider {
+  height: 1px;
+  background-color: #dfe2e7;
+  width: 100%;
+  flex-shrink: 0;
+}
+.cap-navigation-spa-sidebar__l2-inline {
+  display: flex;
+  flex-direction: column;
+  margin-left: 2.286rem;
+  padding: 0;
+  border-left: 2px solid #dfe2e7;
+  background-color: #fafbfc;
+}
+.cap-navigation-spa-sidebar__l2-inline-item {
+  display: flex;
+  align-items: center;
+  height: 2.857rem;
+  padding: 0 1.714rem 0 1.286rem;
+  width: 100%;
+  border: none;
+  background-color: #fafbfc;
+  cursor: pointer;
+  font-family: "Roboto", sans-serif;
+  font-size: 1rem;
+  font-weight: 400;
+  color: #091e42;
+  text-align: left;
+  transition: background-color 0.15s ease;
+}
+.cap-navigation-spa-sidebar__l2-inline-item:hover {
+  background-color: #ebecf0;
+}
+.cap-navigation-spa-sidebar__l2-inline-item--selected {
+  background-color: #e9f0fe;
+}
+.cap-navigation-spa-sidebar__l2-inline-item--selected-loyalty,
+.cap-navigation-spa-sidebar__l2-inline-item--selected-engage,
+.cap-navigation-spa-sidebar__l2-inline-item--selected-insights,
+.cap-navigation-spa-sidebar__l2-inline-item--selected-members,
+.cap-navigation-spa-sidebar__l2-inline-item--selected-rewards,
+.cap-navigation-spa-sidebar__l2-inline-item--selected-audiences,
+.cap-navigation-spa-sidebar__l2-inline-item--selected-data-management,
+.cap-navigation-spa-sidebar__l2-inline-item--selected-extensions,
+.cap-navigation-spa-sidebar__l2-inline-item--selected-settings {
+  margin-left: -2px;
+  background-color: #ebecf0;
+  box-shadow: inset 2px 0 0 #2466ea;
+}
+.cap-navigation-spa-sidebar__divider {
+  height: 1px;
+  background-color: #dfe2e7;
+  margin: 1rem 0.857rem;
+  flex-shrink: 0;
+}
+.cap-navigation-spa-sidebar__footer {
+  padding: 0.571rem 0 1rem;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.cap-navigation-spa-sidebar--collapsed .cap-navigation-spa-sidebar__footer {
+  padding: 0.571rem 0.571rem 1rem;
+}
+.cap-navigation-spa-sidebar__collapse-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 5.714rem;
+  height: 2.857rem;
+  padding: 0;
+  margin-top: 0;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  color: #091e42;
+  border-radius: 0;
+  transition: background-color 0.15s ease;
+  flex-shrink: 0;
+}
+.cap-navigation-spa-sidebar__collapse-btn:hover {
+  background-color: #ebecf0;
+}
+.cap-navigation-spa-sidebar__collapse-btn-icon {
+  font-size: 16px;
+}
+.cap-navigation-spa-sidebar__collapse-wrap {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
+.cap-navigation-spa-sidebar--collapsed .cap-navigation-spa-sidebar__collapse-wrap {
+  justify-content: center;
+}
+.cap-navigation-spa-sidebar__item-flyout-wrap {
+  position: relative;
+}
+.cap-navigation-spa-sidebar__l2-flyout {
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  padding-left: 4px;
+  z-index: 10;
+  pointer-events: auto;
+}
+.cap-navigation-spa-sidebar__l2-flyout-arrow {
+  width: 0;
+  height: 0;
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+  border-right: 5px solid #ffffff;
+  align-self: center;
+  margin-left: -3px;
+  filter: drop-shadow(0 0 1px rgba(9, 30, 66, 0.15));
+}
+.cap-navigation-spa-sidebar__l2-flyout-card {
+  background-color: #ffffff;
+  border: 1px solid #dfe2e7;
+  border-radius: 6px;
+  box-shadow: 0 4px 4px rgba(9, 30, 66, 0.15), 0 0 1px rgba(9, 30, 66, 0.15);
+  min-width: 200px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.cap-navigation-spa-sidebar__l2-flyout-parent {
+  padding: 8px 16px 10px;
+  font-family: "Roboto", sans-serif;
+  font-size: 1rem;
+  font-weight: 500;
+  color: #091e42;
+  border-bottom: 1px solid #dfe2e7;
+  flex-shrink: 0;
+}
+.cap-navigation-spa-sidebar__l2-flyout-item {
+  display: flex;
+  align-items: center;
+  height: 2.857rem;
+  padding: 0 1rem;
+  width: 100%;
+  border: none;
+  background-color: #fafbfc;
+  cursor: pointer;
+  font-family: "Roboto", sans-serif;
+  font-size: 1rem;
+  font-weight: 400;
+  color: #091e42;
+  text-align: left;
+  transition: background-color 0.15s ease;
+}
+.cap-navigation-spa-sidebar__l2-flyout-item:hover {
+  background-color: #ebecf0;
+}
+.cap-navigation-spa-sidebar__l2-flyout-item--selected {
+  background-color: #e9f0fe;
+}
+.cap-navigation-spa-sidebar__l1-tooltip-flyout {
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  padding-left: 4px;
+  z-index: 10;
+  pointer-events: auto;
+}
+.cap-navigation-spa-sidebar__l1-tooltip-card {
+  background-color: #ffffff;
+  border: 1px solid #dfe2e7;
+  border-radius: 6px;
+  box-shadow: 0 4px 4px rgba(9, 30, 66, 0.15), 0 0 1px rgba(9, 30, 66, 0.15);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.cap-navigation-spa-sidebar__l1-tooltip-label {
+  padding: 8px 16px 10px;
+  font-family: "Roboto", sans-serif;
+  font-size: 1rem;
+  font-weight: 400;
+  color: #091e42;
+  white-space: nowrap;
+}