@opensite/ui 1.0.1 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1092,6 +1092,16 @@ function SheetContent({
1092
1092
  )
1093
1093
  ] });
1094
1094
  }
1095
+ function SheetHeader({ className, ...props }) {
1096
+ return /* @__PURE__ */ jsxRuntime.jsx(
1097
+ "div",
1098
+ {
1099
+ "data-slot": "sheet-header",
1100
+ className: cn("flex flex-col gap-1.5 p-4", className),
1101
+ ...props
1102
+ }
1103
+ );
1104
+ }
1095
1105
  function SheetTitle({
1096
1106
  className,
1097
1107
  ...props
@@ -1292,8 +1302,11 @@ var NavbarIconLinks = ({
1292
1302
  /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
1293
1303
  Pressable,
1294
1304
  {
1295
- asButton: true,
1296
- className: actionClassName,
1305
+ className: cn(
1306
+ "flex h-10 w-10 items-center justify-center rounded-md transition-colors",
1307
+ "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
1308
+ actionClassName
1309
+ ),
1297
1310
  ...pressableProps,
1298
1311
  children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1299
1312
  icon,
@@ -1330,16 +1343,87 @@ var NavbarIconLinks = ({
1330
1343
  patternOpacity,
1331
1344
  containerClassName: sectionContainerClassName,
1332
1345
  containerMaxWidth: sectionContainerMaxWidth,
1333
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(
1334
- "nav",
1335
- {
1336
- className: cn(
1337
- "flex items-center justify-between py-3",
1338
- navClassName
1339
- ),
1340
- children: [
1341
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-6", children: [
1346
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: innerContainerClasses, children: [
1347
+ /* @__PURE__ */ jsxRuntime.jsxs(
1348
+ "nav",
1349
+ {
1350
+ className: cn(
1351
+ "hidden items-center justify-between py-3 lg:flex",
1352
+ navClassName
1353
+ ),
1354
+ children: [
1355
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-6", children: [
1356
+ /* @__PURE__ */ jsxRuntime.jsx(
1357
+ NavbarLogo,
1358
+ {
1359
+ logo,
1360
+ logoSlot,
1361
+ logoClassName,
1362
+ optixFlowConfig
1363
+ }
1364
+ ),
1365
+ /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsxRuntime.jsx(
1366
+ NavigationMenu,
1367
+ {
1368
+ className: cn("flex", navigationMenuClassName),
1369
+ children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuList, { className: "gap-1", children: navItemsSlot ? navItemsSlot : renderNavItems?.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
1370
+ /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
1371
+ Pressable,
1372
+ {
1373
+ href: item.url,
1374
+ onClick: () => setActiveItem(item.title),
1375
+ className: cn(
1376
+ "flex h-10 w-10 items-center justify-center rounded-md transition-colors",
1377
+ activeItem === item.title ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
1378
+ ),
1379
+ children: [
1380
+ /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.icon, size: 20 }),
1381
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: item.title })
1382
+ ]
1383
+ }
1384
+ ) }) }),
1385
+ /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: item.title }) })
1386
+ ] }) }, index)) })
1387
+ }
1388
+ ) })
1389
+ ] }),
1342
1390
  /* @__PURE__ */ jsxRuntime.jsx(
1391
+ "div",
1392
+ {
1393
+ className: cn(
1394
+ "flex items-center gap-2",
1395
+ actionsClassName
1396
+ ),
1397
+ children: renderAuthActions
1398
+ }
1399
+ )
1400
+ ]
1401
+ }
1402
+ ),
1403
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "block py-3 lg:hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
1404
+ /* @__PURE__ */ jsxRuntime.jsx(
1405
+ NavbarLogo,
1406
+ {
1407
+ logo,
1408
+ logoSlot,
1409
+ logoClassName,
1410
+ optixFlowConfig
1411
+ }
1412
+ ),
1413
+ /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { open: isOpen, onOpenChange: setIsOpen, children: [
1414
+ /* @__PURE__ */ jsxRuntime.jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
1415
+ Pressable,
1416
+ {
1417
+ variant: "outline",
1418
+ size: "icon",
1419
+ asButton: true,
1420
+ onClick: () => {
1421
+ },
1422
+ children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/menu", size: 16 })
1423
+ }
1424
+ ) }),
1425
+ /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { className: "overflow-y-auto", children: [
1426
+ /* @__PURE__ */ jsxRuntime.jsx(SheetHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { children: /* @__PURE__ */ jsxRuntime.jsx(
1343
1427
  NavbarLogo,
1344
1428
  {
1345
1429
  logo,
@@ -1347,98 +1431,45 @@ var NavbarIconLinks = ({
1347
1431
  logoClassName,
1348
1432
  optixFlowConfig
1349
1433
  }
1350
- ),
1351
- /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsxRuntime.jsx(
1352
- NavigationMenu,
1353
- {
1354
- className: cn("hidden lg:flex", navigationMenuClassName),
1355
- children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuList, { className: "gap-1", children: navItemsSlot ? navItemsSlot : renderNavItems?.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
1356
- /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
1357
- Pressable,
1358
- {
1359
- href: item.url,
1360
- onClick: () => setActiveItem(item.title),
1361
- className: cn(
1362
- "flex h-10 w-10 items-center justify-center rounded-md transition-colors",
1363
- activeItem === item.title ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
1364
- ),
1365
- children: [
1366
- /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.icon, size: 20 }),
1367
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: item.title })
1368
- ]
1369
- }
1370
- ) }) }),
1371
- /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: item.title }) })
1372
- ] }) }, index)) })
1373
- }
1374
- ) })
1375
- ] }),
1376
- /* @__PURE__ */ jsxRuntime.jsx(
1377
- "div",
1378
- {
1379
- className: cn(
1380
- "hidden items-center gap-2 lg:flex",
1381
- actionsClassName
1382
- ),
1383
- children: renderAuthActions
1384
- }
1385
- ),
1386
- /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { open: isOpen, onOpenChange: setIsOpen, children: [
1387
- /* @__PURE__ */ jsxRuntime.jsx(SheetTrigger, { asChild: true, className: "lg:hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(
1388
- Pressable,
1389
- {
1390
- variant: "ghost",
1391
- size: "icon",
1392
- asButton: true,
1393
- onClick: () => {
1394
- },
1395
- children: [
1396
- /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/menu", size: 20 }),
1397
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Toggle menu" })
1398
- ]
1399
- }
1400
- ) }),
1401
- /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { side: "right", className: "w-[280px]", children: [
1402
- /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { className: "sr-only", children: "Navigation Menu" }),
1403
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 pt-8", children: [
1404
- navItemsSlot ? navItemsSlot : renderNavItems?.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
1405
- Pressable,
1406
- {
1407
- href: item.url,
1408
- onClick: () => {
1409
- setActiveItem(item.title);
1410
- setIsOpen(false);
1411
- },
1412
- className: cn(
1413
- "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
1414
- activeItem === item.title ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
1415
- ),
1416
- children: [
1417
- /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.icon, size: 18 }),
1418
- item.title
1419
- ]
1420
- },
1421
- index
1422
- )),
1423
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 border-t pt-4", children: authActions?.map((action, index) => /* @__PURE__ */ jsxRuntime.jsxs(
1424
- Pressable,
1425
- {
1426
- href: action.href,
1427
- className: "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground",
1428
- onClick: () => setIsOpen(false),
1429
- children: [
1430
- action.icon,
1431
- action.label
1432
- ]
1434
+ ) }) }),
1435
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6 p-4", children: [
1436
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4", children: navItemsSlot ? navItemsSlot : renderNavItems?.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
1437
+ Pressable,
1438
+ {
1439
+ href: item.url,
1440
+ onClick: () => {
1441
+ setActiveItem(item.title);
1442
+ setIsOpen(false);
1433
1443
  },
1434
- index
1435
- )) })
1436
- ] })
1444
+ className: cn(
1445
+ "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
1446
+ activeItem === item.title ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
1447
+ ),
1448
+ children: [
1449
+ /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.icon, size: 18 }),
1450
+ item.title
1451
+ ]
1452
+ },
1453
+ index
1454
+ )) }),
1455
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t pt-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3", children: authActions?.map((action, index) => /* @__PURE__ */ jsxRuntime.jsxs(
1456
+ Pressable,
1457
+ {
1458
+ href: action.href,
1459
+ className: "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground",
1460
+ onClick: () => setIsOpen(false),
1461
+ children: [
1462
+ action.icon,
1463
+ action.label
1464
+ ]
1465
+ },
1466
+ index
1467
+ )) }) })
1437
1468
  ] })
1438
1469
  ] })
1439
- ]
1440
- }
1441
- ) }) }) })
1470
+ ] })
1471
+ ] }) })
1472
+ ] }) }) })
1442
1473
  }
1443
1474
  );
1444
1475
  };
@@ -1068,6 +1068,16 @@ function SheetContent({
1068
1068
  )
1069
1069
  ] });
1070
1070
  }
1071
+ function SheetHeader({ className, ...props }) {
1072
+ return /* @__PURE__ */ jsx(
1073
+ "div",
1074
+ {
1075
+ "data-slot": "sheet-header",
1076
+ className: cn("flex flex-col gap-1.5 p-4", className),
1077
+ ...props
1078
+ }
1079
+ );
1080
+ }
1071
1081
  function SheetTitle({
1072
1082
  className,
1073
1083
  ...props
@@ -1268,8 +1278,11 @@ var NavbarIconLinks = ({
1268
1278
  /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
1269
1279
  Pressable,
1270
1280
  {
1271
- asButton: true,
1272
- className: actionClassName,
1281
+ className: cn(
1282
+ "flex h-10 w-10 items-center justify-center rounded-md transition-colors",
1283
+ "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
1284
+ actionClassName
1285
+ ),
1273
1286
  ...pressableProps,
1274
1287
  children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
1275
1288
  icon,
@@ -1306,16 +1319,87 @@ var NavbarIconLinks = ({
1306
1319
  patternOpacity,
1307
1320
  containerClassName: sectionContainerClassName,
1308
1321
  containerMaxWidth: sectionContainerMaxWidth,
1309
- children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
1310
- "nav",
1311
- {
1312
- className: cn(
1313
- "flex items-center justify-between py-3",
1314
- navClassName
1315
- ),
1316
- children: [
1317
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-6", children: [
1322
+ children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsxs("div", { className: innerContainerClasses, children: [
1323
+ /* @__PURE__ */ jsxs(
1324
+ "nav",
1325
+ {
1326
+ className: cn(
1327
+ "hidden items-center justify-between py-3 lg:flex",
1328
+ navClassName
1329
+ ),
1330
+ children: [
1331
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-6", children: [
1332
+ /* @__PURE__ */ jsx(
1333
+ NavbarLogo,
1334
+ {
1335
+ logo,
1336
+ logoSlot,
1337
+ logoClassName,
1338
+ optixFlowConfig
1339
+ }
1340
+ ),
1341
+ /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx(
1342
+ NavigationMenu,
1343
+ {
1344
+ className: cn("flex", navigationMenuClassName),
1345
+ children: /* @__PURE__ */ jsx(NavigationMenuList, { className: "gap-1", children: navItemsSlot ? navItemsSlot : renderNavItems?.map((item, index) => /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
1346
+ /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsxs(
1347
+ Pressable,
1348
+ {
1349
+ href: item.url,
1350
+ onClick: () => setActiveItem(item.title),
1351
+ className: cn(
1352
+ "flex h-10 w-10 items-center justify-center rounded-md transition-colors",
1353
+ activeItem === item.title ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
1354
+ ),
1355
+ children: [
1356
+ /* @__PURE__ */ jsx(DynamicIcon, { name: item.icon, size: 20 }),
1357
+ /* @__PURE__ */ jsx("span", { className: "sr-only", children: item.title })
1358
+ ]
1359
+ }
1360
+ ) }) }),
1361
+ /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsx("p", { children: item.title }) })
1362
+ ] }) }, index)) })
1363
+ }
1364
+ ) })
1365
+ ] }),
1318
1366
  /* @__PURE__ */ jsx(
1367
+ "div",
1368
+ {
1369
+ className: cn(
1370
+ "flex items-center gap-2",
1371
+ actionsClassName
1372
+ ),
1373
+ children: renderAuthActions
1374
+ }
1375
+ )
1376
+ ]
1377
+ }
1378
+ ),
1379
+ /* @__PURE__ */ jsx("div", { className: "block py-3 lg:hidden", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
1380
+ /* @__PURE__ */ jsx(
1381
+ NavbarLogo,
1382
+ {
1383
+ logo,
1384
+ logoSlot,
1385
+ logoClassName,
1386
+ optixFlowConfig
1387
+ }
1388
+ ),
1389
+ /* @__PURE__ */ jsxs(Sheet, { open: isOpen, onOpenChange: setIsOpen, children: [
1390
+ /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
1391
+ Pressable,
1392
+ {
1393
+ variant: "outline",
1394
+ size: "icon",
1395
+ asButton: true,
1396
+ onClick: () => {
1397
+ },
1398
+ children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/menu", size: 16 })
1399
+ }
1400
+ ) }),
1401
+ /* @__PURE__ */ jsxs(SheetContent, { className: "overflow-y-auto", children: [
1402
+ /* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { children: /* @__PURE__ */ jsx(
1319
1403
  NavbarLogo,
1320
1404
  {
1321
1405
  logo,
@@ -1323,98 +1407,45 @@ var NavbarIconLinks = ({
1323
1407
  logoClassName,
1324
1408
  optixFlowConfig
1325
1409
  }
1326
- ),
1327
- /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx(
1328
- NavigationMenu,
1329
- {
1330
- className: cn("hidden lg:flex", navigationMenuClassName),
1331
- children: /* @__PURE__ */ jsx(NavigationMenuList, { className: "gap-1", children: navItemsSlot ? navItemsSlot : renderNavItems?.map((item, index) => /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
1332
- /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsxs(
1333
- Pressable,
1334
- {
1335
- href: item.url,
1336
- onClick: () => setActiveItem(item.title),
1337
- className: cn(
1338
- "flex h-10 w-10 items-center justify-center rounded-md transition-colors",
1339
- activeItem === item.title ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
1340
- ),
1341
- children: [
1342
- /* @__PURE__ */ jsx(DynamicIcon, { name: item.icon, size: 20 }),
1343
- /* @__PURE__ */ jsx("span", { className: "sr-only", children: item.title })
1344
- ]
1345
- }
1346
- ) }) }),
1347
- /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsx("p", { children: item.title }) })
1348
- ] }) }, index)) })
1349
- }
1350
- ) })
1351
- ] }),
1352
- /* @__PURE__ */ jsx(
1353
- "div",
1354
- {
1355
- className: cn(
1356
- "hidden items-center gap-2 lg:flex",
1357
- actionsClassName
1358
- ),
1359
- children: renderAuthActions
1360
- }
1361
- ),
1362
- /* @__PURE__ */ jsxs(Sheet, { open: isOpen, onOpenChange: setIsOpen, children: [
1363
- /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, className: "lg:hidden", children: /* @__PURE__ */ jsxs(
1364
- Pressable,
1365
- {
1366
- variant: "ghost",
1367
- size: "icon",
1368
- asButton: true,
1369
- onClick: () => {
1370
- },
1371
- children: [
1372
- /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/menu", size: 20 }),
1373
- /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle menu" })
1374
- ]
1375
- }
1376
- ) }),
1377
- /* @__PURE__ */ jsxs(SheetContent, { side: "right", className: "w-[280px]", children: [
1378
- /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: "Navigation Menu" }),
1379
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 pt-8", children: [
1380
- navItemsSlot ? navItemsSlot : renderNavItems?.map((item, index) => /* @__PURE__ */ jsxs(
1381
- Pressable,
1382
- {
1383
- href: item.url,
1384
- onClick: () => {
1385
- setActiveItem(item.title);
1386
- setIsOpen(false);
1387
- },
1388
- className: cn(
1389
- "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
1390
- activeItem === item.title ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
1391
- ),
1392
- children: [
1393
- /* @__PURE__ */ jsx(DynamicIcon, { name: item.icon, size: 18 }),
1394
- item.title
1395
- ]
1396
- },
1397
- index
1398
- )),
1399
- /* @__PURE__ */ jsx("div", { className: "mt-4 border-t pt-4", children: authActions?.map((action, index) => /* @__PURE__ */ jsxs(
1400
- Pressable,
1401
- {
1402
- href: action.href,
1403
- className: "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground",
1404
- onClick: () => setIsOpen(false),
1405
- children: [
1406
- action.icon,
1407
- action.label
1408
- ]
1410
+ ) }) }),
1411
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 p-4", children: [
1412
+ /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: navItemsSlot ? navItemsSlot : renderNavItems?.map((item, index) => /* @__PURE__ */ jsxs(
1413
+ Pressable,
1414
+ {
1415
+ href: item.url,
1416
+ onClick: () => {
1417
+ setActiveItem(item.title);
1418
+ setIsOpen(false);
1409
1419
  },
1410
- index
1411
- )) })
1412
- ] })
1420
+ className: cn(
1421
+ "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
1422
+ activeItem === item.title ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
1423
+ ),
1424
+ children: [
1425
+ /* @__PURE__ */ jsx(DynamicIcon, { name: item.icon, size: 18 }),
1426
+ item.title
1427
+ ]
1428
+ },
1429
+ index
1430
+ )) }),
1431
+ /* @__PURE__ */ jsx("div", { className: "border-t pt-4", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: authActions?.map((action, index) => /* @__PURE__ */ jsxs(
1432
+ Pressable,
1433
+ {
1434
+ href: action.href,
1435
+ className: "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground",
1436
+ onClick: () => setIsOpen(false),
1437
+ children: [
1438
+ action.icon,
1439
+ action.label
1440
+ ]
1441
+ },
1442
+ index
1443
+ )) }) })
1413
1444
  ] })
1414
1445
  ] })
1415
- ]
1416
- }
1417
- ) }) }) })
1446
+ ] })
1447
+ ] }) })
1448
+ ] }) }) })
1418
1449
  }
1419
1450
  );
1420
1451
  };