hb-layout-desktop

Description

Desktop layout with top navbar, optional left sidebar (sidebar-desktop) when navigation links are present, main page area, optional cookie-law banner, and footer. Without single_screen, the page column scrolls and the cookie banner and footer are inside that scroll (footer appears after the slot when you scroll down). With single_screen, the cookie banner and footer stay fixed at the bottom of the main column (always visible); only the page slot area scrolls, and footer.type auto uses the compact footer. The sidebar rail is capped to the viewport band. Forwards navigation and footer events.

Passing navlinks and sidebar icons

When navlinks is non-empty, this layout renders hb-sidebar-desktop and forwards your navigation data to it.

• Property / attribute: set navlinks on hb-layout-desktop the same way as on hb-sidebar-desktop: in HTML use a JSON string (serialized INavLink[]). In JavaScript you may assign an array of objects directly if your binding supports it.
• Icons: each link object can include optional icon with the Bootstrap Icons glyph name only (the part after bi- in the official class, e.g. house-door for bi-house-door). See the hb-sidebar-desktop README for the full rules, examples, and subLinks behavior.

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;
  socials?: ISocials;
  contacts?: IContacts;
  company?: ICompany;
  navlinks?: INavLink[];
  pagename?: string;
  page_title?: 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[];
};

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