@natoora-libs/drawer-menu 0.0.1

package/dist/index.js

@@ -0,0 +1,931 @@
+// src/components/LeftDrawer/LeftDrawer.tsx
+import { Fragment, useState } from "react";
+import { useNavigate } from "react-router";
+import {
+  PushPinOutlined,
+  FiberManualRecord,
+  ExpandLess
+} from "@mui/icons-material";
+import {
+  AppBar,
+  Collapse,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  ListSubheader,
+  SwipeableDrawer,
+  Toolbar,
+  ListItemButton,
+  Box
+} from "@mui/material";
+import Icon from "@mui/material/Icon";
+import { RoundButton, UserBust } from "@natoora-libs/core/components";
+import { makeStyles } from "tss-react/mui";
+
+// src/resources/styles/colors/darkPalette.ts
+var darkPalette = {
+  // General colors
+  white: "#FFFFFF",
+  black: "#000000",
+  // Neutral
+  neutral50: "#1C1B1A",
+  neutral100: "#1F1F1F",
+  neutral150: "#262626",
+  neutral200: "#2E2E2E",
+  neutral250: "#383838",
+  neutral300: "#424242",
+  neutral400: "#4C4C4C",
+  neutral500: "#666666",
+  neutral600: "#808080",
+  neutral700: "#A3A3A3",
+  neutral750: "#B3B3B3",
+  neutral800: "#CCCCCC",
+  neutral900: "#F5F5F5",
+  // Input and contrast
+  contrast: "#FFFFFF",
+  constrastOpacity50: "rgba(255,255,255,0.5)",
+  // Icon and Material UI colors
+  iconSearch: "#B0B0B0",
+  default: "#444444",
+  muiPrimary: "#E9FB62",
+  muiPrimaryBlack: "#FFFFFF",
+  lightMuiPrimaryColorBackground: "#e9fb6214",
+  lightBlueBackground: "#e9fb6214",
+  muiPrimaryAlternate: "#07BAF1",
+  muiPrimaryHover: "#1890d5",
+  muiSecondary: "#DE5B99",
+  muiSecondaryAlternate: "#EC613C",
+  muiSuccess: "#66BB6A",
+  muiSuccessAlternate: "#81C784",
+  // Transparency variants
+  blackOpacity10: "inherit",
+  blackOpacity20: "inherit",
+  blackOpacity30: "inherit",
+  blackOpacity50: "inherit",
+  blackOpacity80: "inherit",
+  primaryOpacity10: "rgba(233, 251, 98, 0.10)",
+  primaryOpacity20: "rgba(233, 251, 98, 0.20)",
+  primaryOpacity30: "rgba(233, 251, 98, 0.30)",
+  secondaryAlternateOpacity30: "rgba(236, 97, 60, .3)",
+  blueOpacity08: "rgba(25, 118, 210, 0.08)",
+  whiteOpacity10: "rgba(255,255,255,0.1)",
+  whiteOpacity20: "rgba(255,255,255,0.2)",
+  whiteOpacity40: "rgba(255,255,255,0.4)",
+  // Table rows and top bar
+  topBar: "#2e3133",
+  // Button colors
+  // Round Button (default)
+  buttonHoverBackground: "rgba(255, 255, 255, 0.08)",
+  // Active Button
+  buttonActiveText: "#E9FB62",
+  // Contrast Button
+  buttonContrastBorder: "#CECECE",
+  buttonContrastText: "#CECECE",
+  // Error Button
+  error: "#EF5350"
+};
+var darkPalette_default = darkPalette;
+
+// src/resources/styles/colors/lightPalette.ts
+var lightPalette = {
+  // General colors
+  white: "#FFFFFF",
+  black: "#000000",
+  // Neutral
+  neutral50: "#F0EBE6",
+  neutral100: "#FAFAFA",
+  neutral150: "#F4F4F4",
+  neutral200: "#F1F1F1",
+  neutral250: "#ECECEC",
+  neutral300: "#E0E0E0",
+  neutral400: "#C8C8C8",
+  neutral500: "#BDBDBD",
+  neutral600: "#999999",
+  neutral700: "#878787",
+  neutral750: "#6c6c6c",
+  neutral800: "#555555",
+  neutral900: "#4D4D4D",
+  // Input and contrast
+  contrast: "#000000",
+  constrastOpacity50: "rgba(0,0,0,0.5)",
+  // Icon and Material UI colors
+  iconSearch: "#606060",
+  default: "#E0E0E0",
+  muiPrimary: "#0781CE",
+  muiPrimaryBlack: "#000000",
+  lightMuiPrimaryColorBackground: "#eff4fb",
+  lightBlueBackground: "#eff4fb",
+  muiPrimaryAlternate: "#07BAF1",
+  muiPrimaryHover: "#1565c0",
+  muiSecondary: "#A42966",
+  muiSecondaryAlternate: "#EC613C",
+  muiSuccess: "#4caf50",
+  muiSuccessAlternate: "#357a38",
+  // Transparency variants
+  blackOpacity10: "rgba(0,0,0,0.1)",
+  blackOpacity20: "rgba(0,0,0,0.2)",
+  blackOpacity30: "rgba(0,0,0,0.3)",
+  blackOpacity50: "rgba(0,0,0,0.5)",
+  blackOpacity80: "rgba(0,0,0,0.8)",
+  primaryOpacity10: "rgba(7, 129, 206, 0.10)",
+  primaryOpacity20: "rgba(7, 129, 206, 0.20)",
+  primaryOpacity30: "rgba(7, 129, 206, 0.30)",
+  secondaryAlternateOpacity30: "rgba(236, 97, 60, 0.3)",
+  blueOpacity08: "rgba(25, 118, 210, 0.08)",
+  whiteOpacity10: "rgba(255,255,255,0.1)",
+  whiteOpacity20: "rgba(255,255,255,0.2)",
+  whiteOpacity40: "rgba(255,255,255,0.4)",
+  // Table rows and top bar
+  topBar: "#2e3133",
+  // Button colors
+  // Round Button (default)
+  buttonHoverBackground: "rgba(0, 0, 0, 0.04)",
+  // Active Button
+  buttonActiveText: "#0781CE",
+  // Contrast Button
+  buttonContrastBorder: "#CECECE",
+  buttonContrastText: "#CECECE",
+  // Error Button
+  error: "#D32F2F"
+};
+var lightPalette_default = lightPalette;
+
+// src/resources/styles/colors.ts
+var stylesheet = localStorage.getItem("@stylesheet");
+var isDarkModeEnabled = stylesheet === "styles/style-dark.css";
+var palette = isDarkModeEnabled ? darkPalette_default : lightPalette_default;
+var colors = {
+  white: palette.white,
+  black: palette.black,
+  neutral50: palette.neutral50,
+  neutral100: palette.neutral100,
+  neutral150: palette.neutral150,
+  neutral200: palette.neutral200,
+  neutral250: palette.neutral250,
+  neutral300: palette.neutral300,
+  neutral400: palette.neutral400,
+  neutral500: palette.neutral500,
+  neutral600: palette.neutral600,
+  neutral700: palette.neutral700,
+  neutral750: palette.neutral750,
+  neutral800: palette.neutral800,
+  neutral900: palette.neutral900,
+  // Input and contrast
+  contrast: palette.contrast,
+  constrastOpacity50: palette.constrastOpacity50,
+  iconSearch: palette.iconSearch,
+  default: palette.default,
+  muiPrimary: palette.muiPrimary,
+  muiPrimaryBlack: palette.muiPrimaryBlack,
+  lightMuiPrimaryColorBackground: palette.lightMuiPrimaryColorBackground,
+  lightBlueBackground: palette.lightBlueBackground,
+  muiPrimaryAlternate: palette.muiPrimaryAlternate,
+  muiPrimaryHover: palette.muiPrimaryHover,
+  muiSecondary: palette.muiSecondary,
+  muiSecondaryAlternate: palette.muiSecondaryAlternate,
+  muiSuccess: palette.muiSuccess,
+  muiSuccessAlternate: palette.muiSuccessAlternate,
+  // Transparency
+  blackOpacity10: palette.blackOpacity10,
+  blackOpacity20: palette.blackOpacity20,
+  blackOpacity30: palette.blackOpacity30,
+  blackOpacity50: palette.blackOpacity50,
+  blackOpacity80: palette.blackOpacity80,
+  primaryOpacity10: palette.primaryOpacity10,
+  primaryOpacity20: palette.primaryOpacity20,
+  primaryOpacity30: palette.primaryOpacity30,
+  secondaryAlternateOpacity30: palette.secondaryAlternateOpacity30,
+  blueOpacity08: palette.blueOpacity08,
+  whiteOpacity10: palette.whiteOpacity10,
+  whiteOpacity20: palette.whiteOpacity20,
+  whiteOpacity40: palette.whiteOpacity40,
+  topBar: palette.topBar,
+  error: palette.error,
+  roundButton: {
+    default: {
+      border: palette.neutral600,
+      color: palette.contrast,
+      disabled: {
+        color: palette.blackOpacity20
+      },
+      hover: {
+        background: palette.buttonHoverBackground
+      }
+    },
+    filled: {
+      background: palette.neutral100,
+      color: palette.blackOpacity80,
+      hover: {
+        background: palette.neutral250
+      }
+    },
+    active: {
+      color: palette.buttonActiveText,
+      hover: {
+        background: palette.primaryOpacity20
+      }
+    },
+    contrast: {
+      border: palette.buttonContrastBorder,
+      color: palette.buttonContrastText,
+      hover: {
+        background: palette.whiteOpacity10
+      }
+    },
+    tableButton: {
+      color: palette.neutral800
+    },
+    focused: {
+      background: palette.primaryOpacity20,
+      color: palette.buttonActiveText,
+      hover: {
+        background: palette.primaryOpacity30
+      }
+    },
+    error: palette.error
+  },
+  movementCard: {
+    default: {
+      background: palette.neutral100
+    },
+    disabled: {
+      background: palette.neutral250
+    },
+    pill: {
+      color: palette.neutral200,
+      background: palette.neutral600
+    }
+  },
+  rowProductCard: {
+    locationSubtitle: palette.neutral800
+  }
+};
+
+// src/config/drawerAppList.tsx
+import { useMemo } from "react";
+import { icons } from "@natoora-libs/core/components";
+
+// src/config/features.ts
+var featureNames = {
+  ACCOUNTS: "accounts",
+  ADMIN: "admin",
+  AIRCALL: "aircall",
+  BULK_UPDATE: "product_bulk_update",
+  CONTENT_MANAGEMENT: "content_management",
+  CUSTOMERS: "customers",
+  GOODS_IN: "goods_in",
+  KANBAN: "kanban_cards",
+  LOCATIONS: "locations",
+  NOTIFICATIONS: "notifications",
+  OPS_METRICS: "ops_metrics",
+  ORDERS: "orders",
+  PICKING_STATIONS: "picking_stations",
+  PRICE_LIST: "price_list",
+  PRODUCTS: "products",
+  PROMO_CODES: "promo_codes",
+  PURCHASE_ORDERS: "purchase_orders",
+  QUALITY_CONTROL: "quality_control",
+  REPORTS: "reports",
+  RETAIL: "retail",
+  RETURNS: "returns",
+  SEARCH_CATEGORIES: "search_categories",
+  SERVICE_DELIVERY: "service_delivery",
+  SPECIAL_PRICES: "special_prices",
+  STOCK: "stock",
+  STOCK_MOVEMENTS: "stock_movements",
+  SUPPLIERS: "suppliers",
+  SUPPLIER_PRICES: "supplier_prices",
+  USER_MANAGEMENT: "users"
+};
+function featuresAreEnabled({
+  enabledFeatures,
+  featureNames: featureNames2,
+  requireAll = true
+}) {
+  const storedPermissions = localStorage.getItem("permissions") || "";
+  let enabled = false;
+  if (requireAll) {
+    enabled = featureNames2.every(
+      (feature) => enabledFeatures.includes(feature) && storedPermissions.includes(`${feature}_read`)
+    );
+  } else {
+    enabled = featureNames2.some(
+      (feature) => enabledFeatures.includes(feature) && storedPermissions.includes(`${feature}_read`)
+    );
+  }
+  return enabled;
+}
+
+// src/config/drawerAppList.tsx
+import { jsx } from "react/jsx-runtime";
+var drawerAppList = [
+  {
+    groupName: "Home",
+    apps: [
+      {
+        name: "Home",
+        routeName: "home",
+        alwaysDisplay: true,
+        featureNames: [],
+        pinned: null,
+        icon: /* @__PURE__ */ jsx(icons.SvgIconHome, {}),
+        url: "/#/",
+        shouldReload: true
+      }
+    ]
+  },
+  {
+    groupName: "App",
+    apps: [
+      {
+        name: "Notifications",
+        routeName: "appNotifications",
+        alwaysDisplay: false,
+        featureNames: [featureNames.NOTIFICATIONS],
+        pinned: "notifications",
+        icon: /* @__PURE__ */ jsx(icons.SvgIconNotification, {}),
+        url: "/#/notifications",
+        shouldReload: true
+      },
+      {
+        name: "Promo Codes",
+        routeName: "promo_codes",
+        alwaysDisplay: false,
+        featureNames: [featureNames.PROMO_CODES],
+        pinned: "promo_codes",
+        icon: /* @__PURE__ */ jsx(icons.SvgIconPromoCode, {}),
+        url: "/promo_codes"
+      },
+      {
+        name: "Search Categories",
+        routeName: "search-categories",
+        alwaysDisplay: false,
+        featureNames: [featureNames.SEARCH_CATEGORIES],
+        pinned: "search_categories",
+        icon: /* @__PURE__ */ jsx(icons.SvgIconSearchCategories, {}),
+        url: "/search-categories"
+      },
+      {
+        name: "Content Management",
+        routeName: "content-management",
+        alwaysDisplay: false,
+        featureNames: [featureNames.CONTENT_MANAGEMENT],
+        pinned: "content_management",
+        icon: /* @__PURE__ */ jsx(icons.SvgIconContentManagement, {}),
+        url: "/content-management"
+      }
+    ]
+  },
+  {
+    groupName: "Customer Service",
+    apps: [
+      {
+        name: "Aircall",
+        routeName: "recordedcalls",
+        alwaysDisplay: false,
+        featureNames: [featureNames.AIRCALL],
+        pinned: "aircall",
+        icon: /* @__PURE__ */ jsx(icons.SvgIconPhone, {}),
+        url: "/air-call"
+      },
+      {
+        name: "Customers",
+        routeName: "customers",
+        alwaysDisplay: false,
+        featureNames: [featureNames.CUSTOMERS],
+        pinned: "customers",
+        icon: /* @__PURE__ */ jsx(icons.SvgIconAccount, {}),
+        url: "/customers",
+        children: [
+          {
+            name: "Sites",
+            routeName: "customer-sites",
+            pinned: "customer-sites",
+            url: "/customers/sites"
+          },
+          {
+            name: "Groups",
+            routeName: "customer-groups",
+            pinned: "customer-groups",
+            url: "/customers/groups"
+          }
+        ]
+      },
+      {
+        name: "Orders",
+        routeName: "orders",
+        alwaysDisplay: false,
+        featureNames: [featureNames.ORDERS],
+        pinned: "orders",
+        icon: /* @__PURE__ */ jsx(icons.SvgIconOrders, {}),
+        url: "/#/orders",
+        shouldReload: true
+      },
+      {
+        name: "Price Lists",
+        routeName: "price_list",
+        alwaysDisplay: false,
+        featureNames: [featureNames.PRICE_LIST],
+        pinned: "price_list",
+        icon: /* @__PURE__ */ jsx(icons.SvgIconPriceList, {}),
+        url: "/#/price-list",
+        shouldReload: true
+      },
+      {
+        name: "Special Prices",
+        routeName: "special_prices",
+        alwaysDisplay: false,
+        featureNames: [featureNames.SPECIAL_PRICES],
+        pinned: "special_prices",
+        icon: /* @__PURE__ */ jsx(icons.SvgIconSpecialPrice, {}),
+        url: "/#/pricing/special-prices",
+        shouldReload: true
+      }
+    ]
+  },
+  {
+    groupName: "Buying",
+    apps: [
+      {
+        name: "Purchase Orders",
+        routeName: "purchaseOrders",
+        alwaysDisplay: false,
+        featureNames: [featureNames.PURCHASE_ORDERS],
+        pinned: "purchase_orders",
+        icon: /* @__PURE__ */ jsx(icons.SvgIconBuying, {}),
+        url: "/react/purchase-orders",
+        shouldReload: true
+      },
+      {
+        name: "Products",
+        routeName: "products",
+        alwaysDisplay: false,
+        featureNames: [featureNames.PRODUCTS],
+        pinned: "products",
+        icon: /* @__PURE__ */ jsx(icons.SvgIconProducts, {}),
+        url: "/#/product-base-list",
+        shouldReload: true
+      },
+      {
+        name: "Suppliers",
+        routeName: "suppliers",
+        alwaysDisplay: false,
+        featureNames: [featureNames.SUPPLIERS],
+        pinned: "suppliers",
+        icon: /* @__PURE__ */ jsx(icons.SvgIconSupplier, {}),
+        url: "/suppliers"
+      },
+      {
+        name: "Supplier Prices",
+        routeName: "supplier_prices",
+        alwaysDisplay: false,
+        featureNames: [featureNames.SUPPLIER_PRICES],
+        pinned: "supplier_prices",
+        icon: /* @__PURE__ */ jsx(icons.SvgIconSupplierPrices, {}),
+        url: "/#/supplier-prices",
+        shouldReload: true
+      },
+      {
+        name: "Product Bulk Update",
+        routeName: "bulk-update",
+        alwaysDisplay: false,
+        featureNames: [featureNames.BULK_UPDATE],
+        pinned: "product_bulk_update",
+        icon: /* @__PURE__ */ jsx(icons.SvgIconImport, {}),
+        url: "/bulk_update"
+      }
+    ]
+  },
+  {
+    groupName: "Operations",
+    apps: [
+      {
+        name: "Retail",
+        routeName: "retail",
+        alwaysDisplay: false,
+        featureNames: [featureNames.RETAIL],
+        pinned: "retail",
+        icon: /* @__PURE__ */ jsx(icons.SvgIconRetail, {}),
+        url: "/#/retail/product-availability",
+        shouldReload: true
+      },
+      {
+        name: "Goods In",
+        routeName: "goodsin-list",
+        alwaysDisplay: false,
+        featureNames: [featureNames.GOODS_IN],
+        pinned: "goods_in",
+        icon: /* @__PURE__ */ jsx(icons.SvgIconGoodsin, {}),
+        url: "/goodsin-list"
+      },
+      {
+        name: "Returns",
+        routeName: "goods-in-list",
+        alwaysDisplay: false,
+        featureNames: [featureNames.RETURNS],
+        pinned: "returns",
+        icon: /* @__PURE__ */ jsx(icons.SvgIconGoodsin, {}),
+        url: "/returns"
+      },
+      {
+        icon: /* @__PURE__ */ jsx(icons.SvgIconLocation, {}),
+        name: "Stock and Locations",
+        pinned: "stock",
+        routeName: "locations",
+        featureNames: [featureNames.STOCK, featureNames.LOCATIONS],
+        alwaysDisplay: false,
+        url: "/locations",
+        children: [
+          {
+            name: "Movements",
+            routeName: "movements",
+            url: "/movements",
+            featureName: featureNames.STOCK_MOVEMENTS
+          }
+        ]
+      },
+      {
+        name: "Kanban Cards",
+        routeName: "kanban",
+        alwaysDisplay: false,
+        featureNames: [featureNames.KANBAN],
+        pinned: "kanban_cards",
+        icon: /* @__PURE__ */ jsx(icons.SvgIconVkc, {}),
+        url: "/#/kanban",
+        shouldReload: true
+      },
+      {
+        name: "Picking Stations",
+        routeName: "picking",
+        alwaysDisplay: false,
+        featureNames: [featureNames.PICKING_STATIONS],
+        pinned: "picking_stations",
+        icon: /* @__PURE__ */ jsx(icons.SvgIconScales, {}),
+        url: "/#/pickingstation",
+        shouldReload: true
+      },
+      {
+        name: "Quality Control",
+        routeName: "qualityControl",
+        alwaysDisplay: false,
+        featureNames: [featureNames.QUALITY_CONTROL],
+        pinned: "quality_control",
+        icon: /* @__PURE__ */ jsx(icons.SvgIconQc, {}),
+        url: "/#/quality-control",
+        shouldReload: true
+      },
+      {
+        name: "Service Delivery",
+        routeName: "runs",
+        alwaysDisplay: false,
+        featureNames: [featureNames.SERVICE_DELIVERY],
+        pinned: "service_delivery",
+        icon: /* @__PURE__ */ jsx(icons.SvgIconRuns, {}),
+        url: "/#/runs",
+        shouldReload: true
+      },
+      {
+        name: "Ops Metrics",
+        routeName: "ops-metrics",
+        alwaysDisplay: false,
+        featureNames: [featureNames.OPS_METRICS],
+        pinned: "ops_metrics",
+        icon: /* @__PURE__ */ jsx(icons.SvgIconOpsMetrics, {}),
+        url: "/ops-metrics"
+      }
+    ]
+  },
+  {
+    groupName: "Tools",
+    apps: [
+      {
+        name: "Accounts",
+        routeName: "accounts",
+        alwaysDisplay: false,
+        featureNames: [featureNames.ACCOUNTS],
+        pinned: "accounts",
+        icon: /* @__PURE__ */ jsx(icons.SvgIconAccounts, {}),
+        url: "/#/accounts",
+        shouldReload: true
+      },
+      {
+        name: "Reports",
+        routeName: "reports",
+        alwaysDisplay: false,
+        featureNames: [featureNames.REPORTS],
+        pinned: "reports",
+        icon: /* @__PURE__ */ jsx(icons.SvgIconReports, {}),
+        url: "/#/reports",
+        shouldReload: true
+      }
+    ]
+  },
+  {
+    groupName: "Settings",
+    apps: [
+      {
+        name: "Admin",
+        routeName: "admin",
+        alwaysDisplay: false,
+        featureNames: [featureNames.ADMIN],
+        pinned: "admin",
+        icon: /* @__PURE__ */ jsx(icons.SvgIconSetting, {}),
+        url: "/#/admin",
+        shouldReload: true
+      },
+      {
+        name: "User Management",
+        routeName: "user-management",
+        alwaysDisplay: false,
+        featureNames: [featureNames.USER_MANAGEMENT],
+        pinned: "users",
+        icon: /* @__PURE__ */ jsx(icons.SvgIconUserManagement, {}),
+        url: "/user-management"
+      },
+      {
+        name: "Logout",
+        routeName: "logout",
+        alwaysDisplay: true,
+        featureNames: [],
+        pinned: null,
+        icon: /* @__PURE__ */ jsx(icons.SvgIconLogin, {}),
+        url: "/logout"
+      }
+    ]
+  },
+  {
+    groupName: "Release Notes",
+    apps: [
+      {
+        name: "Release Notes",
+        routeName: "release-notes",
+        alwaysDisplay: true,
+        featureNames: [],
+        pinned: null,
+        // icon: <icons.SvgIconReleaseNote />,
+        icon: /* @__PURE__ */ jsx(icons.SvgIconLogin, {}),
+        url: "/release-notes"
+      }
+    ]
+  }
+];
+var useGetDrawerAppList = (enabledFeatures) => {
+  return useMemo(() => {
+    if (!enabledFeatures?.length) {
+      return [];
+    }
+    return drawerAppList.map((group) => {
+      const enabledApps = group.apps.filter(
+        (app) => app.alwaysDisplay || featuresAreEnabled({
+          enabledFeatures,
+          featureNames: app.featureNames,
+          requireAll: false
+        })
+      ).map((app) => {
+        if (app.children) {
+          const filteredChildren = app.children.filter(
+            (child) => {
+              if (child.featureName) {
+                return enabledFeatures.includes(child.featureName);
+              }
+              return true;
+            }
+          );
+          return { ...app, children: filteredChildren };
+        }
+        return app;
+      });
+      return { ...group, apps: enabledApps };
+    }).filter((group) => group.apps.length > 0);
+  }, [enabledFeatures]);
+};
+
+// src/components/LeftDrawer/LeftDrawer.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var useStyles = makeStyles()((theme) => ({
+  subheader: {
+    textTransform: "uppercase",
+    fontSize: theme.spacing(1.5)
+  },
+  menuButton: {
+    marginRight: theme.spacing(2)
+  },
+  inputRoot: {
+    color: "inherit"
+  },
+  inputInput: {
+    transition: theme.transitions.create("width"),
+    width: "100%"
+  },
+  topBar: {
+    backgroundColor: theme.palette.secondary.dark,
+    width: theme.spacing(40),
+    padding: theme.spacing(2),
+    display: "flex",
+    alignItems: "end",
+    justifyContent: "space-between"
+  },
+  drawer: {
+    alignContent: "space-between",
+    flexDirection: "column",
+    minWidth: theme.spacing(80)
+  },
+  drawerBody: {
+    minWidth: "300px",
+    flexGrow: 1,
+    padding: theme.spacing(3)
+  },
+  drawerItem: {
+    width: "300px",
+    marginBottom: theme.spacing(1)
+  },
+  button: {
+    color: theme.palette.primary.contrastText
+  },
+  iconMenu: {
+    height: "40px",
+    width: "40px",
+    opacity: 1,
+    fill: colors.neutral700
+  },
+  pinIcon: {
+    height: "16px",
+    width: "16px",
+    fill: colors.neutral700,
+    opacity: 0.5,
+    "&:hover": {
+      opacity: 1,
+      cursor: "pointer"
+    }
+  },
+  expandIcon: {
+    height: "22px",
+    width: "22px",
+    fill: colors.neutral700
+  },
+  nested: {
+    paddingLeft: theme.spacing(6),
+    border: colors.neutral200
+  },
+  appName: {
+    "& .MuiTypography-body2": {
+      fontWeight: 700
+    }
+  }
+}));
+var LeftDrawer = ({
+  enabledFeatures,
+  pinnedApps,
+  open,
+  user,
+  handleClose,
+  handleOpen,
+  onLogout,
+  onTogglePinnedApp
+}) => {
+  const navigate = useNavigate();
+  const [openCollapse, setOpenCollapse] = useState({});
+  const drawerAppList2 = useGetDrawerAppList(enabledFeatures);
+  const { classes } = useStyles();
+  const navigateTo = (url, shouldReload) => {
+    if (shouldReload) {
+      const fullUrl = `${window.location.origin}${url}`;
+      window.location.href = fullUrl;
+      return;
+    }
+    return navigate(url);
+  };
+  console.log({ drawerAppList: drawerAppList2 });
+  return /* @__PURE__ */ jsxs(
+    SwipeableDrawer,
+    {
+      className: classes.drawer,
+      id: "primary-menu",
+      onClose: handleClose,
+      onOpen: handleOpen,
+      open,
+      children: [
+        /* @__PURE__ */ jsx2(AppBar, { position: "static", children: /* @__PURE__ */ jsxs(Toolbar, { className: classes.topBar, children: [
+          /* @__PURE__ */ jsx2(
+            UserBust,
+            {
+              user,
+              avatarProps: { height: 50, width: 50 },
+              typographyProps: {
+                name: { variant: "subtitle1", component: "div" },
+                username: { variant: "caption", component: "div" }
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            RoundButton,
+            {
+              icon: "edit",
+              isContrast: true,
+              onClick: () => navigateTo(`/#/user-settings`, true),
+              size: "small",
+              tooltip: "User Settings"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx2(List, { children: drawerAppList2.map((group) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx2(ListSubheader, { disableSticky: true, className: classes.subheader, children: group.groupName }),
+          group.apps.map((app) => /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(
+              ListItem,
+              {
+                title: app.url,
+                onClick: () => {
+                  if (app.routeName === "logout") {
+                    return onLogout();
+                  }
+                  return navigateTo(app.url, app.shouldReload);
+                },
+                children: [
+                  /* @__PURE__ */ jsx2(ListItemIcon, { children: /* @__PURE__ */ jsx2(Icon, { className: classes.iconMenu, children: app.icon }) }),
+                  /* @__PURE__ */ jsx2(
+                    ListItemText,
+                    {
+                      className: classes.appName,
+                      primary: app.name,
+                      slotProps: { primary: { variant: "body2" } }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    Box,
+                    {
+                      display: "flex",
+                      gap: 2,
+                      alignItems: "center",
+                      justifyContent: "center",
+                      children: [
+                        app.children?.length > 0 && /* @__PURE__ */ jsx2(
+                          ExpandLess,
+                          {
+                            className: classes.expandIcon,
+                            style: {
+                              rotate: openCollapse[app.routeName] ? "0deg" : "180deg"
+                            },
+                            "data-testid": "svg-close-collapse",
+                            onClick: (event) => {
+                              event.stopPropagation();
+                              setOpenCollapse({
+                                ...openCollapse,
+                                [app.routeName]: !openCollapse[app.routeName]
+                              });
+                            }
+                          }
+                        ),
+                        app.pinned && /* @__PURE__ */ jsx2(
+                          PushPinOutlined,
+                          {
+                            className: classes.pinIcon,
+                            style: { opacity: pinnedApps[app.pinned] ? 1 : 0.3 },
+                            onClick: (event) => {
+                              event.stopPropagation();
+                              onTogglePinnedApp(
+                                app.pinned,
+                                !pinnedApps[app.pinned]
+                              );
+                            }
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ]
+              },
+              app.name
+            ),
+            app.children?.length > 0 && /* @__PURE__ */ jsx2(Collapse, { in: openCollapse[app.routeName], children: /* @__PURE__ */ jsx2(List, { children: app.children.map((child) => /* @__PURE__ */ jsxs(
+              ListItemButton,
+              {
+                className: classes.nested,
+                disabled: child.disabled,
+                onClick: () => navigateTo(child.url, child.shouldReload),
+                title: child.url,
+                children: [
+                  /* @__PURE__ */ jsx2(ListItemIcon, { children: /* @__PURE__ */ jsx2(FiberManualRecord, { style: { height: 12 } }) }),
+                  /* @__PURE__ */ jsx2(
+                    ListItemText,
+                    {
+                      primary: child.name,
+                      slotProps: { primary: { variant: "body2" } }
+                    }
+                  )
+                ]
+              },
+              child.name
+            )) }) })
+          ] }, `${group.groupName}_${app.name}`))
+        ] }, group.groupName)) })
+      ]
+    }
+  );
+};
+var LeftDrawer_default = LeftDrawer;
+export {
+  LeftDrawer_default as LeftDrawer
+};
+//# sourceMappingURL=index.js.map