@morphika/andami 0.1.9 → 0.1.10

package/components/admin/nav-builder/NavBuilder.tsx

@@ -7,6 +7,44 @@ import NavBuilderGrid from "./NavBuilderGrid";
 import NavLivePreview from "./NavLivePreview";
 import NavSettingsPanel from "./NavSettingsPanel";
 
+// ── Header icons ──
+
+const NAV_HEADER_ICON = (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="rgba(0,0,0,0.55)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
+  </svg>
+);
+const LOGO_HEADER_ICON = (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="rgba(0,0,0,0.55)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <rect x="3" y="3" width="18" height="18" rx="2" ry="2" /><circle cx="8.5" cy="8.5" r="1.5" /><polyline points="21 15 16 10 5 21" />
+  </svg>
+);
+const ITEM_HEADER_ICON = (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="rgba(0,0,0,0.55)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
+    <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
+  </svg>
+);
+
+function getHeaderConfig(selectedItem: NavItem | null) {
+  if (!selectedItem) {
+    return {
+      gradient: "linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 40%, #ddd6fe 100%)",
+      icon: NAV_HEADER_ICON,
+    };
+  }
+  if (selectedItem.type === "logo") {
+    return {
+      gradient: "linear-gradient(135deg, #fef3c7 0%, #fde68a 40%, #fcd34d 100%)",
+      icon: LOGO_HEADER_ICON,
+    };
+  }
+  return {
+    gradient: "linear-gradient(135deg, #dbeafe 0%, #bfdbfe 40%, #c7d2fe 100%)",
+    icon: ITEM_HEADER_ICON,
+  };
+}
+
 interface NavBuilderProps {
   initialItems: NavItem[];
   initialDesign: NavDesign;
@@ -121,30 +159,68 @@ export default function NavBuilder({
   }, [items, design, onSave]);
 
   const selectedItem = items.find((i) => i._key === selectedKey) || null;
+  const headerConfig = getHeaderConfig(selectedItem);
+
+  const isItemMode = !!selectedItem;
+  const headerTitle = isItemMode
+    ? selectedItem.type === "logo"
+      ? "Logo"
+      : selectedItem.label || "Untitled"
+    : "Navigation";
+  const headerSubtitle = isItemMode
+    ? `${selectedItem.type === "logo" ? "Logo" : "Menu Item"} · Col ${selectedItem.grid_column}${
+        selectedItem.column_span > 1
+          ? `–${selectedItem.grid_column + selectedItem.column_span - 1}`
+          : ""
+      }`
+    : `${items.length} items · 12 columns`;
 
   return (
     <div className="bg-white rounded-2xl overflow-hidden border border-neutral-200">
-      {/* Top bar */}
-      <div className="px-5 py-3 border-b border-neutral-200 flex items-center justify-between">
-        <div>
-          <div className="text-sm font-semibold text-neutral-900">Grid Layout · 12 Columns</div>
-          <div className="text-[11px] text-neutral-400 mt-0.5">
-            {items.length} items · Click empty columns to add · Drag to reposition
-          </div>
+      {/* ── Gradient header (matches Mobile Menu style) ── */}
+      <div
+        className="relative flex items-center px-4 py-3.5 overflow-hidden"
+        style={{ background: headerConfig.gradient }}
+      >
+        <div
+          className="absolute inset-0 pointer-events-none"
+          style={{ background: "linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.05) 100%)" }}
+        />
+        <div
+          className="relative shrink-0 flex items-center justify-center"
+          style={{
+            width: 34,
+            height: 34,
+            borderRadius: 10,
+            background: "rgba(255,255,255,0.4)",
+            backdropFilter: "blur(8px)",
+            boxShadow: "0 2px 8px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.5)",
+          }}
+        >
+          {headerConfig.icon}
+        </div>
+        <div className="relative z-10 ml-2.5 min-w-0 flex-1">
+          <h3
+            className="text-[13px] font-semibold truncate"
+            style={{ color: "rgba(0,0,0,0.72)", textShadow: "0 1px 0 rgba(255,255,255,0.3)" }}
+          >
+            {headerTitle}
+          </h3>
+          <p className="text-[10px] mt-0.5" style={{ color: "rgba(0,0,0,0.38)" }}>
+            {headerSubtitle}
+          </p>
         </div>
-        <div className="flex items-center gap-3">
+        <div className="relative z-10 flex items-center gap-3">
           {hasChanges && (
-            <span className="text-[11px] text-amber-500 font-medium">
-              Unsaved changes
-            </span>
+            <span className="text-[11px] text-amber-600 font-medium">Unsaved</span>
           )}
           <button
             onClick={handleSave}
             disabled={saving || !hasChanges}
-            className={`px-5 py-1.5 text-sm font-medium rounded-lg transition-all ${
+            className={`px-4 py-1.5 text-[11px] font-medium rounded-lg transition-all ${
               saving || !hasChanges
-                ? "bg-neutral-100 text-neutral-400 cursor-not-allowed"
-                : "bg-[#076bff] text-white hover:bg-[#0559d4]"
+                ? "bg-white/40 text-neutral-400 cursor-not-allowed"
+                : "bg-white text-[#076bff] shadow-sm hover:shadow-md"
             }`}
           >
             {saving ? "Saving..." : "Save"}