الشريط السفلي

import { BottomNav } from "@mercato/components";

// Office: the pill alone (up to five destinations).
<BottomNav items={[menu, invoices, products, people, home]} />

// Marketplace: assistant FAB + pill + search FAB.
<BottomNav ai search items={[menu, invoices, people, home]} />

// Each item is { icon, label, active? }; exactly one is active.
const home = { icon: "home", label: "الرئيسية", active: true };

/* Fixed physical chrome: assistant left, pill center, search right,
   the same in LTR and RTL, so the bar lays out LTR regardless of page dir. */
.navbar { display: flex; direction: ltr; align-items: center; gap: var(--spacing-gap-sm); }

/* Frosted-white pill of icon buttons. */
.nav-pill {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  padding: 4px;
  border-radius: var(--shape-rounded);            /* the pill shape */
  background: rgba(255, 255, 255, 0.92);
  border: 3px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(6px);
}

.nav-item {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--shape-rounded);
  color: var(--color-black-oud-400);              /* inactive glyph */
  background: transparent;
  transition: color var(--motion-feedback-duration) var(--motion-feedback-easing);
}
/* Active state = both a filled circle AND the brand color, never color alone. */
.nav-item[data-active="true"] { color: var(--color-dodger-blue-600); background: var(--color-black-oud-200); }

/* Floating action buttons flanking the pill. */
.nav-fab { display: grid; place-items: center; width: 58px; height: 58px; border-radius: var(--shape-rounded); }
.nav-fab-ai {                                     /* blue liquid-glass orb, white robot */
  color: #ffffff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 42%), #0091ff;
}
.nav-fab-search {                                 /* white glass orb */
  color: #585e71;
  background: rgba(255, 255, 255, 0.92);
  border: 3px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}