hb-layout

Description

Responsive application shell: below 800px viewport width it mounts the mobile layout; otherwise the desktop layout. Forwards navigation slots, page content, cookie-law options, and layout events from the active child.

Navigation navlinks and Bootstrap Icons

Set navlinks on hb-layout as a serialized JSON array (HTML attribute) or as an array in JS. The active child forwards it to either hb-layout-desktop (sidebar with hb-sidebar-desktop) or hb-layout-mobile (offcanvas with the same navigation model).

Use the same icon field on each link as for hb-sidebar-desktop: Bootstrap Icons name only after bi- (e.g. "gear", not "bi bi-gear"). Details and copy-paste examples: hb-sidebar-desktop README.

Types

import type {
  IContacts,
  ISocials,
  ICompany,
  IColumn,
  IPolicies,
} from "../../footer/types/webcomponent.type";
import type { IUserMenu } from "../../navbar/types/webcomponent.type";
import type { INavLink } from "../../sidenav-link/types/webcomponent.type";

export type Component = {
  i18nlang?: string;
  id?: string;
  style?: string;
  page_title?: string;
  socials?: ISocials;
  contacts?: IContacts;
  company?: ICompany;
  navlinks?: INavLink[];
  pagename?: string;
  usermenu?: IUserMenu;
  cookielaw?: string;
  columns?: IColumn[];
  single_screen?: boolean;
  cookielawuri4more?: string;
  cookielawallowdecline?: boolean;
  cookielawlanguage?: string;
  sidebar?: { title?: string; logo?: string; type?: string };
  footer?: {
    type?: "auto" | "small" | "regular" | "large";
    disable_expanding_small?: boolean;
  };
  policies?: IPolicies[];
  heders?: {
    name?: string;
    content: string;
    property?: string;
  }[];
};

export type Events = {
  offcanvasswitch: { isOpen: boolean };
  pageChange: { page: string };
  navbarDropDownClick: { key: string };
  footerClick: { elClick: string };
  navbarSlotClick: { side: "left" | "right" | "center" };

  // layoutStatus: { width: number; size: "large" | "small" };
};