Global Layout & Navigation
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The Global Layout and Navigation system provides the foundational structure for the personal website, ensuring a consistent user experience across all routes. It manages core UI elements such as the persistent navigation bar, footer, and global metadata. The system is built using Next.js App Router patterns, utilizing a root layout to wrap all "personal" routes with shared components and Sanity-driven content.
This module integrates tightly with Sanity CMS, fetching global configuration data (like menu items and footer text) via dedicated GROQ queries. It also handles advanced features like Draft Mode, Visual Editing overlays, and real-time content updates through the SanityLive component.
Sources: app/(personal)/layout.tsx:1-40, sanity/lib/queries.ts:48-61
Layout Architecture
The layout is implemented as a server component that fetches global settings and renders the primary document structure. It defines the site's visual boundaries, including background colors, typography via CSS imports, and the main content area's padding.
Component Hierarchy
The following diagram illustrates how the global layout wraps page-specific content and global UI elements:
The IndexRoute layout fetches settingsQuery to populate the Navbar and footer sections. It uses a flexbox container with min-h-screen to ensure the footer stays at the bottom of the viewport even on short pages.
Sources: app/(personal)/layout.tsx:48-70, components/Navbar.tsx:12-50
Key Layout Components
| Component | Purpose | Data Source |
|---|---|---|
Navbar | Persistent top navigation with dynamic links. | settings.menuItems |
Footer | Bottom section for site-wide info/credits. | settings.footer |
Header | Contextual page sub-header for titles/overviews. | Individual page data |
SanityLive | Enables real-time revalidation of content. | Sanity API |
VisualEditing | Provides the UI for live editing in Sanity Studio. | Draft Mode status |
Sources: app/(personal)/layout.tsx:50-90, components/Navbar.tsx:12-20, components/Header.tsx:1-10
Navigation System
Navigation is driven by the Navbar component, which renders a list of links derived from the settings singleton in Sanity. This allows content creators to manage the site's menu structure without modifying code.
Dynamic Link Resolution
The system uses a utility function resolveHref to convert Sanity document types and slugs into valid internal URL paths.
The Navbar applies specific styling based on the document type; for example, the "home" link is rendered with font-extrabold to distinguish it as the primary brand/home link.
Sources: components/Navbar.tsx:28-48, sanity/lib/utils.ts:5-15
Navigation Data Structure
The menu items are defined in the settings schema as an array of references to home, page, or project documents.
// From settingsQuery in sanity/lib/queries.ts
menuItems[]{
_key,
...@->{
_type,
"slug": slug.current,
title
}
}
Sources: sanity/lib/queries.ts:52-59
Page Header & Metadata
The project uses a standard Header component across various routes (Home, Project, and Page) to maintain visual consistency. It handles the display of the main title and an overview (description) using Portable Text.
Global Metadata Generation
The generateMetadata function in the layout fetches both site-wide settings and home page data to construct the site's SEO tags. It supports:
- Title Templates: Dynamic titles in the format
Page Name | Site Title. - OpenGraph: Automatically generates OG image URLs using the
ogImagefield from global settings. - Description: Falls back to the home page's overview text.
Sources: app/(personal)/layout.tsx:21-42, components/Header.tsx:12-40
Draft Mode & Live Updates
The layout includes logic to handle "Draft Mode," which is used for content previews and visual editing. When enabled, it renders a DraftModeToast and the VisualEditing component from next-sanity.
The layout also utilizes SanityLive to enable real-time revalidation, ensuring that content changes in the Studio are reflected on the frontend immediately without manual page refreshes.
Sources: app/(personal)/layout.tsx:75-92, sanity/lib/live.ts
Summary
The Global Layout and Navigation system centralizes the structural and navigational logic of the website. By leveraging Sanity singletons for configuration, the system allows for a highly dynamic menu and footer while maintaining a rigid, performant architecture. The integration of SanityLive and VisualEditing ensures that this navigation and layout framework supports a modern, real-time authoring experience.