3. Site Navigation DOM Structure and Toolbar
After ensureSiteNav() runs, it generates the following DOM structure. None of these elements are present in the HTML shell; JavaScript adds all of them.
header.eg-site-nav
└── div.eg-site-nav-inner
├── a.eg-site-nav-logo
├── button.eg-site-nav-toggle
└── div#eg-site-nav-menu.eg-site-nav-end
├── nav.eg-site-nav-links
└── div.page-toolbar
├── div.appearance-row
│ ├── span.appearance-label
│ └── button.appearance-toggle
└── nav.lang-switchThe logo, hamburger button, site links, and toolbar reside in the same header. The Docsify rendering area #app and the .rt-share-float container for the share button are not part of this structure.
Site Links with Origin-Relative URLs
siteNavLinks() returns the site link definitions. None of these links use Docsify hash routing.
function siteHomeHref() {
return RT.lang === "ja" ? "/ja/" : "/";
}
function siteNavLinks() {
var ja = RT.lang === "ja";
return [
{ text: "Home", href: siteHomeHref() },
{
text: "Real Terms",
href: RT.publicBase,
current: true,
},
{
text: "Significant Bit",
href: ja ? "/docs/ja/" : "/docs/",
},
{ text: "About", href: ja ? "/ja/about/" : "/about/" },
];
}Each link has the following role.
- Logo and Home
Link to the eMotionGraphics publisher home page. The path is/for English and/ja/for Japanese. They do not link to the Real Terms home page at/ai/. - Real Terms
Identifies the current site. The destination is/ai/or/ai/ja/, depending on the language. Becausecurrent: truealways addsaria-current="page", the current site shown in the navigation remains Real Terms when the Docsify route changes. - Significant Bit
Links to Significant Bit, which is built with VitePress. The destination is/docs/or/docs/ja/. - About
Links to the eMotionGraphics About page. The destination is/about/or/ja/about/.
The labels Home, Real Terms, Significant Bit, and About are shared by the English and Japanese pages.
Functions Within the Site Navigation
The appearance and language plugins each add their controls to .eg-site-nav-end through ensureToolbar(). ensureSiteNav() does not generate .page-toolbar. Instead, it is added the first time ensureToolbar() is called. Because ensureToolbar() calls ensureSiteNav() internally, the site navigation is guaranteed to exist before the toolbar is added.
The appearance preference is stored under the key vitepress-theme-appearance. Significant Bit uses the same key, allowing /docs/ and /ai/ to share the selected light or dark appearance. An inline script in the HTML shell’s <head> sets html.dark before the stylesheet is applied, preventing a Flash of Unstyled Content (FOUC).
The site navigation logo does not use a CSS filter to invert its color. The light-mode logo-ex-black-text.svg and dark-mode logo-ex-white-text.svg assets occupy the same position, and the presence of html.dark determines which one is displayed.
The language switcher changes only the language-specific base path and preserves the current hash. For example, switching from /ai/#/2026/weekly/CW36.md to Japanese opens /ai/ja/#/2026/weekly/CW36.md. The same hash can be retained because corresponding English and Japanese articles use identical filenames.
Functions Outside the Site Navigation
Search uses the official Docsify search plugin, which inserts <section class="search"> into .sidebar. The search interface is not moved into the site navigation because its width and element placement are aligned with the navigation in Significant Bit.
The share button is added directly to document.body as .rt-share-float. It uses top: calc(var(--rt-site-nav-height) + 0.65rem) and a z-index of 20. Because it is not affected by the site navigation’s transform, the share button remains visible when scrolling hides the site navigation. Its z-index is also lower than the site navigation’s normal value of 40, so the site navigation takes precedence if the two overlap.
The Real Terms logo in the sidebar, .app-name-lockup, also remains outside the site navigation. The sidebarBrand plugin generates it by replacing the Docsify .app-name-link. This separation places the publisher wordmark in the site navigation and the publication lockup in the sidebar, giving each a distinct role.