import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
import { TanStackDevtools } from '@tanstack/react-devtools'
import appCss from '../styles.css?url'
import Header from '#/components/BYU-Header/Header'
import Breadcrumb from "#/components/BYU-Header/Header-breadcrumb";
import HeaderSearch from "#/components/BYU-Header/Header-search";
import HeaderNavLink from "#/components/BYU-Header/Header-navlink";
import Footer from '#/components/BYU-Footer/Footer'
export const Route = createRootRoute({
head: () => ({
meta: [
{
charSet: 'utf-8',
},
{
name: 'viewport',
content: 'width=device-width, initial-scale=1',
},
{
title: 'TanStack BYU Template',
},
],
links: [
{
rel: 'stylesheet',
href: appCss,
},
],
}),
notFoundComponent: () => 404 - Page not found
,
shellComponent: RootDocument,
})
function RootDocument({ children }: { children: React.ReactNode }) {
return (
components.
- Each receives `text` and `href`.
- Shown only on desktop in the header.
--------------------------------------------------------- */
breadcrumbs={[
,
,
]}
/* ---------------------------------------------------------
RIGHT ITEMS:
- Appears on the right side of the header.
- Example: search bar, user profile, or button.
- On mobile, these move into the hamburger menu automatically.
--------------------------------------------------------- */
rightItems={[]}
/* ---------------------------------------------------------
NAVIGATION LINKS:
- Each item is a .
- Supports both single links and dropdown menus.
- Example dropdown shows nested items.
--------------------------------------------------------- */
navLinks={[
// 🔹 Simple link (non-dropdown)
,
// 🔹 Another simple link
,
// 🔹 Dropdown example
,
]}
/>
{children}
,
},
]}
/>
)
}