5. Responsive Layout and CSS Responsibilities

On desktop, the site links and toolbar are arranged in a single row, and the hamburger button is hidden with display: none. At viewport widths of 768px and below, the hamburger button becomes visible and the site links and toolbar move into a full-screen panel. This breakpoint is shared with the Significant Bit navigation built with VitePress.

Layout Tokens

The site navigation uses two custom properties. The --navbar-height value of 4em defined by the Docsify vendor CSS is not used because the official Navbar .app-nav is not generated.

:root {
  --rt-site-nav-height: 64px;
  --rt-layout-max-width: 90rem;
}

• --rt-site-nav-height
  Used for the site navigation height, the body padding-top, the fixed sidebar and sidebar toggle top and height, and the share button top.
• --rt-layout-max-width
  Defines the maximum width of .eg-site-nav-inner. On desktop, its content has 2rem of padding on each side. When the viewport exceeds 90rem, a gutter is added on the sidebar side to align the left edge of the site navigation logo with the content layout.

Stacking Order

In its normal state, the site navigation uses z-index: 40, placing it above the share button at 20 and the unused official .app-nav at 20. While the menu is open, the entire header is raised to the Docsify sidebar value of z-index: 60 and given a height of 100dvh. This shifts the active interaction target from the article table of contents to the cross-site menu.

Hamburger Menu

The hamburger button is hidden on desktop and displayed with display: flex !important at widths of 768px and below. !important overrides the Docsify button styles. setSiteNavOpen() handles state changes when the button is selected.

function setSiteNavOpen(header, open) {
  var toggle = header.querySelector(".eg-site-nav-toggle");
  header.classList.toggle("is-open", !!open);
  if (toggle) {
    toggle.setAttribute("aria-expanded", open ? "true" : "false");
  }
  document.body.classList.toggle("eg-site-nav-lock", !!open);
  if (open) {
    header.classList.remove("scrolled-down");
    header.classList.add("scrolled-up");
  }
}

body.eg-site-nav-lock uses overflow: hidden to prevent the article behind the panel from scrolling while the menu is open. CSS transforms the hamburger’s three lines into an X that indicates the close action. If the viewport becomes wider than 768px while the menu is open, a resize event closes it. Closing the menu with the Escape key or by selecting the area outside the panel is not implemented. The panel links use regular URLs to navigate between sites, so selecting one leaves the Real Terms single-page application.

At widths of 768px and below, .eg-site-nav-end is a full-width panel positioned immediately below the 64px header. The site links and toolbar have a maximum width of 288px and are centered horizontally. The appearance control is displayed as a labeled row with the language switcher below it. The separator line placed to the left of the toolbar on desktop, .page-toolbar::before, is hidden.

Docsify Layout Offsets

Fixing the site navigation at the beginning of body without additional offsets would place the content and sidebar behind it. The following rules reserve space equal to the height of the site navigation.

body {
  padding-top: var(--rt-site-nav-height);
}

body.sticky .sidebar {
  top: var(--rt-site-nav-height);
  height: calc(100% - var(--rt-site-nav-height));
}

body.sticky .sidebar-toggle {
  top: var(--rt-site-nav-height);
  height: calc(100% - var(--rt-site-nav-height));
}

The fixed sidebar and sidebar toggle are moved down by 64px, and the same value is subtracted from their heights. This prevents overlap with the site navigation. For print, the site navigation, toolbar, share button, and footer are hidden, and the body padding-top returns to 0.

Summary of Responsibilities

Docsify is responsible for the following functions.

• Hash routing and auto2top
• _sidebar.md through loadSidebar
• The official search plugin within the sidebar
• Article rendering

The custom implementation is responsible for the following functions.

• Fixed cross-site navigation in header.eg-site-nav
• Appearance and language controls within the site navigation
• Scroll-dependent visibility and restoration after route transitions
• The hamburger menu at widths of 768px and below and its z-index adjustments

The official Navbar provided by loadNavbar and _navbar.md is not used. Although it is suitable for secondary navigation within documentation, its height, stacking order, and responsive presentation do not meet the requirements for cross-site navigation. Real Terms keeps the navigation shared with the VitePress implementation outside the Docsify rendering area, thereby separating the responsibilities of the two systems.