Add Header component guideline config

2026-01-12 02:44:03 +00:00 · 2026-01-12 02:44:03 +00:00 · 225f1d86fd
parent acfee6e5d2
commit 225f1d86fd
1 changed files with 101 additions and 0 deletions
--- a/Header-component-guideline-config.md
+++ b/Header-component-guideline-config.md
@ -0,0 +1,101 @@
+# Header — JSON Configuration Guide
+
+This guide explains how to configure the `Header` block in `config/nam.vibentec.design.json`. It covers structure, keys, and typical edits without file line references.
+
+## Location
+- Defined under `layout` in `config/nam.vibentec.design.json` as a top-level `Header` object.
+- Contains a `config` block (e.g., `sticky`) and a `children` array with header components.
+
+## Minimal Structure
+```json
+{
+  "Header": {
+    "config": {
+      "sticky": true
+    },
+    "children": [
+      { "Banner": { "config": { } } },
+      { "Nav": { "config": { } } }
+    ]
+  }
+}
+```
+
+## Config Keys
+- `sticky`: Boolean. When `true`, the header stays fixed at the top.
+- `children`: Array of components rendered in the header. Common entries are `Banner` and `Nav`.
+
+## Banner (Top Bar)
+
+Key fields:
+- `variant`: e.g., `"nav"`.
+- `className`: styling of the bar.
+- `left` / `center` / `right`: arrays to place child controls.
+  - Left links: `Link` items with `label`, `href`, `className`.
+  - Center links: `Link` items for promos or CTAs.
+  - Right controls: `Dropdown` for currency and `VtCountryCodeSelect` for region selector.
+
+Example (add a left link):
+```json
+{
+  "Link": {
+    "config": {
+      "label": "Neu",
+      "href": "/new",
+      "className": "text-[13px] flex items-center gap-1"
+    }
+  }
+}
+```
+Place this inside `Banner.config.left`.
+
+## Nav (Main Navigation)
+
+Key fields:
+- Container `className`: overall styling of the nav bar.
+- Left area:
+  - Logo: `src`, `alt`, `className`, and `objectFit` under `Logo.config`.
+  - Primary links: `Link.config.label`/`href`.
+  - Mega menus: `VtMegaMenu.config.navLabel.text` and styling.
+- Right area:
+  - `SearchInput.config.placeholder`.
+  - `AccountButton`, `Button` (wishlist), and `VtCartButton` icons and classes.
+
+Example (change the logo):
+```json
+{
+  "Logo": {
+    "config": {
+      "src": "/your-logo.svg",
+      "alt": "YourBrand",
+      "className": "h-full w-[180px] mr-4",
+      "objectFit": "contain"
+    }
+  }
+}
+```
+Edit values under `Logo.config`.
+
+## Common Edits
+- Toggle sticky header: set `"sticky"` in `Header.config`.
+- Change banner copy/links: edit `Link.config.label`/`href` in `Banner`.
+- Update currency label or options: change `Dropdown.config.trigger.text` and `items`.
+- Adjust styles: modify `className` strings in `Banner` and `Nav`.
+- Edit navigation links or mega menu labels: update `Link` and `VtMegaMenu` configs.
+- Replace header icons: update `icon` fields in `AccountButton`, `Button`, `VtCartButton`.
+
+## Adding or Reordering Children
+- `Header.children` is an ordered array; earlier items render above/before later ones.
+- To add a new component, append an object with the component name and its `config`:
+```json
+{ "AnnouncementBar": { "config": { "text": "Free shipping over €50" } } }
+```
+- Move items within the array to change render order.
+
+## Tips
+- Keep JSON valid (commas, braces, quotes). Use a formatter if needed.
+- Follow existing class name patterns for consistent styling.
+- Use `left`/`center`/`right` arrays to position child items within `Banner` and similar components.
+- Icons referenced by name (e.g., `"User"`, `"Heart"`, `"ShoppingCart"`) must exist in the icon set.
+
+This guide explains the `Header` configuration so you can make precise edits quickly.