@morphika/andami 0.1.9 → 0.1.10

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

@@ -10,7 +10,8 @@ import {
   SelectInput,
   SegmentedControl,
   RangeSlider,
-  Section,
+  CardSection,
+  Divider,
 } from "./NavSettingsFields";
 
 // ============================================
@@ -46,31 +47,47 @@ export default function NavMobileSettings({
     [design, onChange]
   );
 
+  // ── Icon components for card sections ──
+  const OverlayIcon = (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7c3aed" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <rect x="2" y="3" width="20" height="14" rx="2" /><line x1="8" y1="21" x2="16" y2="21" /><line x1="12" y1="17" x2="12" y2="21" />
+    </svg>
+  );
+  const NavbarBarIcon = (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#2563eb" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <rect x="3" y="3" width="18" height="18" rx="2" /><line x1="3" y1="9" x2="21" y2="9" />
+    </svg>
+  );
+
   return (
-    <div className="bg-white rounded-2xl overflow-hidden border border-neutral-200">
-      {/* Header */}
-      <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">
+    <div className="bg-white rounded-2xl overflow-hidden border border-neutral-200 flex flex-col" style={{ minHeight: "calc(100vh - 180px)" }}>
+      {/* ── Gradient header (matching Desktop panel) ── */}
+      <div className="relative flex items-center px-4 py-3.5 overflow-hidden" style={{ background: "linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 40%, #ddd6fe 100%)" }}>
+        <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)" }}>
+          <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="5" y="2" width="14" height="20" rx="2" /><line x1="12" y1="18" x2="12.01" y2="18" />
+          </svg>
+        </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)" }}>
             Mobile Menu
-          </div>
-          <div className="text-[11px] text-neutral-400 mt-0.5">
-            Customize the hamburger menu independently from the desktop navbar
-          </div>
+          </h3>
+          <p className="text-[10px] mt-0.5" style={{ color: "rgba(0,0,0,0.38)" }}>
+            Independent from the desktop navbar
+          </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={onSave}
             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"}
@@ -78,139 +95,141 @@ export default function NavMobileSettings({
         </div>
       </div>
 
-      {/* Side-by-side: settings left, preview right */}
-      <div className="flex">
+      {/* Side-by-side: settings left, preview right — flex-1 fills remaining height */}
+      <div className="flex flex-1 min-h-0">
         {/* Settings content */}
-        <div className="flex-1 min-w-0 px-5 py-4 border-r border-neutral-200">
-          <div className="max-w-md">
-            {/* ── Menu Overlay (expanded fullscreen menu) ── */}
-            <Section title="MENU OVERLAY">
-              <Field label="Background">
-                <ColorSwatchPicker
-                  value={design.overlay_bg || ""}
-                  onChange={(v) => update({ overlay_bg: typeof v === "string" ? v : "" })}
-                  swatches={swatches}
-                />
-              </Field>
-              <Field label="Text color">
-                <ColorSwatchPicker
-                  value={design.text_color || ""}
-                  onChange={(v) => update({ text_color: typeof v === "string" ? v : "" })}
-                  swatches={swatches}
-                />
-              </Field>
-              <Field label="Font size">
-                <TextInput
-                  value={design.font_size ?? 24}
-                  onChange={(v) =>
-                    update({
-                      font_size: Math.max(12, Math.min(72, parseInt(v) || 24)),
-                    })
-                  }
-                  type="number"
-                />
-              </Field>
-              <Field label="Transform">
-                <SelectInput
-                  value={design.text_transform || "uppercase"}
-                  onChange={(v) =>
-                    update({
-                      text_transform: v as MobileNavDesign["text_transform"],
-                    })
-                  }
-                  options={[
-                    { value: "uppercase", label: "UPPERCASE" },
-                    { value: "none", label: "None" },
-                    { value: "lowercase", label: "lowercase" },
-                    { value: "capitalize", label: "Capitalize" },
-                  ]}
-                />
-              </Field>
-              <Field label="Align">
-                <SegmentedControl
-                  value={design.items_align || "center"}
-                  onChange={(v) =>
-                    update({ items_align: v as MobileNavDesign["items_align"] })
-                  }
-                  options={[
-                    { value: "left", label: "Left" },
-                    { value: "center", label: "Center" },
-                    { value: "right", label: "Right" },
-                  ]}
-                />
-              </Field>
-              <Field label="Items gap">
-                <RangeSlider
-                  value={design.items_gap ?? 32}
-                  onChange={(v) => update({ items_gap: v })}
-                  min={8}
-                  max={80}
-                  suffix="px"
-                />
-              </Field>
-            </Section>
+        <div className="flex-1 min-w-0 py-2 border-r border-neutral-200 overflow-y-auto">
+          {/* ── Menu Overlay card ── */}
+          <CardSection title="Overlay" icon={OverlayIcon} iconBg="#ede9fe">
+            <Field label="BG">
+              <ColorSwatchPicker
+                value={design.overlay_bg || ""}
+                onChange={(v) => update({ overlay_bg: typeof v === "string" ? v : "" })}
+                swatches={swatches}
+              />
+            </Field>
+            <Field label="Text">
+              <ColorSwatchPicker
+                value={design.text_color || ""}
+                onChange={(v) => update({ text_color: typeof v === "string" ? v : "" })}
+                swatches={swatches}
+              />
+            </Field>
+            <Divider />
+            <Field label="Size">
+              <TextInput
+                value={design.font_size ?? 24}
+                onChange={(v) =>
+                  update({
+                    font_size: Math.max(12, Math.min(72, parseInt(v) || 24)),
+                  })
+                }
+                type="number"
+              />
+            </Field>
+            <Field label="Case">
+              <SelectInput
+                value={design.text_transform || "uppercase"}
+                onChange={(v) =>
+                  update({
+                    text_transform: v as MobileNavDesign["text_transform"],
+                  })
+                }
+                options={[
+                  { value: "uppercase", label: "AA" },
+                  { value: "capitalize", label: "Aa" },
+                  { value: "lowercase", label: "aa" },
+                  { value: "none", label: "—" },
+                ]}
+              />
+            </Field>
+            <Field label="Align">
+              <SegmentedControl
+                value={design.items_align || "center"}
+                onChange={(v) =>
+                  update({ items_align: v as MobileNavDesign["items_align"] })
+                }
+                options={[
+                  { value: "left", label: "Left" },
+                  { value: "center", label: "Center" },
+                  { value: "right", label: "Right" },
+                ]}
+              />
+            </Field>
+            <Divider />
+            <Field label="Gap">
+              <RangeSlider
+                value={design.items_gap ?? 32}
+                onChange={(v) => update({ items_gap: v })}
+                min={8}
+                max={80}
+                suffix="px"
+              />
+            </Field>
+          </CardSection>
 
-            {/* ── Navbar Bar (logo + hamburger row) ── */}
-            <Section title="NAVBAR BAR">
-              <Field label="BG color">
-                <ColorSwatchPicker
-                  value={design.navbar_bg || ""}
-                  onChange={(v) => update({ navbar_bg: typeof v === "string" ? v : "" })}
-                  swatches={swatches}
-                />
-              </Field>
-              {design.navbar_bg && (
-                <Field label="BG opacity">
-                  <RangeSlider
-                    value={design.navbar_bg_opacity ?? 100}
-                    onChange={(v) => update({ navbar_bg_opacity: v })}
-                    min={0}
-                    max={100}
-                    suffix="%"
-                  />
-                </Field>
-              )}
-              <Field label="Icon color">
-                <ColorSwatchPicker
-                  value={design.hamburger_color || ""}
-                  onChange={(v) => update({ hamburger_color: typeof v === "string" ? v : "" })}
-                  swatches={swatches}
-                />
-              </Field>
-              <Field label="Pad H">
+          {/* ── Navbar Bar card ── */}
+          <CardSection title="Top Bar" icon={NavbarBarIcon} iconBg="#dbeafe">
+            <Field label="BG">
+              <ColorSwatchPicker
+                value={design.navbar_bg || ""}
+                onChange={(v) => update({ navbar_bg: typeof v === "string" ? v : "" })}
+                swatches={swatches}
+              />
+            </Field>
+            {design.navbar_bg && (
+              <Field label="Opacity">
                 <RangeSlider
-                  value={design.padding_h ?? 24}
-                  onChange={(v) => update({ padding_h: v })}
+                  value={design.navbar_bg_opacity ?? 100}
+                  onChange={(v) => update({ navbar_bg_opacity: v })}
                   min={0}
-                  max={60}
-                  suffix="px"
+                  max={100}
+                  suffix="%"
                 />
               </Field>
-              <Field label="Pad V">
-                <RangeSlider
-                  value={design.padding_v ?? 27}
-                  onChange={(v) => update({ padding_v: v })}
-                  min={0}
-                  max={60}
-                  suffix="px"
-                />
-              </Field>
-            </Section>
+            )}
+            <Field label="Icon">
+              <ColorSwatchPicker
+                value={design.hamburger_color || ""}
+                onChange={(v) => update({ hamburger_color: typeof v === "string" ? v : "" })}
+                swatches={swatches}
+              />
+            </Field>
+            <Divider />
+            <Field label="Pad H">
+              <RangeSlider
+                value={design.padding_h ?? 24}
+                onChange={(v) => update({ padding_h: v })}
+                min={0}
+                max={60}
+                suffix="px"
+              />
+            </Field>
+            <Field label="Pad V">
+              <RangeSlider
+                value={design.padding_v ?? 27}
+                onChange={(v) => update({ padding_v: v })}
+                min={0}
+                max={60}
+                suffix="px"
+              />
+            </Field>
+          </CardSection>
 
-            {/* Info notice */}
-            <div className="mt-4 p-3 bg-blue-50 rounded-xl border border-blue-200">
-              <p className="text-[11px] text-blue-600 leading-relaxed">
-                <strong>Independent from page overrides:</strong> Page-level{" "}
-                <code className="bg-blue-100 px-1 rounded text-[10px]">nav_color</code>{" "}
-                and parallax slide color changes only affect the desktop navbar.
-                The mobile menu always uses these dedicated styles.
-              </p>
-            </div>
+          {/* Info notice — card style */}
+          <div className="mx-2.5 my-1 px-3 py-2.5 bg-blue-50/60 rounded-[10px] border border-blue-100">
+            <p className="text-[10px] text-blue-500 leading-relaxed">
+              <strong>Independent from page overrides.</strong> Page-level{" "}
+              <code className="bg-blue-100 px-1 rounded text-[9px]">nav_color</code>{" "}
+              and parallax color changes only affect the desktop navbar.
+            </p>
           </div>
+
+          <div className="h-2" />
         </div>
 
-        {/* Live preview — sticky on the right */}
-        <div className="w-[340px] shrink-0 self-start sticky top-0">
+        {/* Live preview — stretches full height */}
+        <div className="w-[340px] shrink-0 sticky top-0 self-stretch">
           <NavMobileLivePreview
             items={items}
             design={desktopDesign}