tabler/shared/components/navbar/Navbar.astro

---
import Icon from '@ui/Icon.astro';
import Logo from './Logo.astro';
import NavbarToggler from './NavbarToggler.astro';
import NavbarSide from './NavbarSide.astro';
import NavbarMenu from './NavbarMenu.astro';
import NavbarSearch from './NavbarSearch.astro';

interface Props {
	hideSearch?: boolean;
	/** active menu entry, e.g. "dashboards.default" */
	pageMenu?: string | undefined;
	condensed?: boolean | undefined;
	dark?: boolean | undefined;
	transparent?: boolean;
	hideBrand?: boolean | undefined;
	/** use the sample menu (menu-sample.json) instead of the real one */
	sample?: boolean;
	/** 1-based index into people.json for the user menu avatar */
	personId?: number;
	hideLogo?: boolean;
	smallLogo?: boolean;
	showTitle?: boolean;
	hideIcons?: boolean;
	hideUsername?: boolean;
	/** bg-{background} class on the header (ignored when transparent) */
	background?: string;
	/** inline `background:` style on the header */
	backgroundColor?: string;
	/** extra classes on the header */
	class?: string | undefined;
	/** id of the collapsible menu; pass a unique one when a page renders several navbars */
	menuId?: string;
}

// When a page passes no pageMenu, nothing in the menu is active.
const {
	hideSearch = false,
	pageMenu,
	condensed = false,
	dark = false,
	transparent = false,
	hideBrand = false,
	sample = false,
	personId,
	hideLogo = false,
	smallLogo = false,
	showTitle = false,
	hideIcons = false,
	hideUsername = false,
	background,
	backgroundColor,
	class: className,
	menuId = 'navbar-menu',
} = Astro.props;

const breakpoint = 'md';

const headerClass = [
	`navbar navbar-expand-${breakpoint}`,
	transparent ? 'navbar-transparent' : background && `bg-${background}`,
	className,
	'd-print-none',
]
---

<!-- BEGIN NAVBAR -->
<header
	class:list={headerClass}
	style={backgroundColor ? `background: ${backgroundColor}` : undefined}
	data-bs-theme={dark ? 'dark' : undefined}
>
	<div class="container-xl">
		<NavbarToggler target={menuId} />

		{
			!hideBrand && (
				<Logo
					header
					class="pe-0 pe-md-3"
					smallLogo={smallLogo}
					hideLogo={hideLogo}
					showTitle={showTitle}
				/>
			)
		}

		<NavbarSide
			class="order-md-last"
			breakpoint={breakpoint}
			condensed={condensed}
			dark={dark}
			personId={personId}
			hideUsername={hideUsername}
			showThemeToggle
			showNotifications
			showApps
			showLanguageSelector
			showUser
		/>

		{
			condensed && (
				<div class="collapse navbar-collapse" id={menuId}>
					{hideSearch ? (
						<Fragment>
							<Fragment set:html={'<!-- BEGIN NAVBAR MENU -->'} />
							<nav aria-label="Primary" class="nav-overflow" data-bs-toggle="nav-overflow">
								<NavbarMenu sample={sample} hideIcons={hideIcons} pageMenu={pageMenu} />
							</nav>
							<Fragment set:html={'<!-- END NAVBAR MENU -->'} />
						</Fragment>
					) : (
						<div class="d-flex flex-column flex-md-row flex-fill align-items-stretch align-items-md-center">
							<!-- BEGIN NAVBAR MENU -->
							<nav aria-label="Primary" class="nav-overflow" data-bs-toggle="nav-overflow">
								<NavbarMenu sample={sample} hideIcons={hideIcons} pageMenu={pageMenu} />
							</nav>
							<!-- END NAVBAR MENU -->
							<NavbarSearch class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last" />
						</div>
					)}
				</div>
			)
		}
	</div>
</header>

{
	!condensed && (
		<div class={`navbar-expand-${breakpoint}`}>
			<div class="collapse navbar-collapse" id={menuId}>
				<div class="navbar">
					<div class="container-xl">
						<div class="row flex-column flex-md-row flex-fill align-items-center">
							<div class="col">
								<!-- BEGIN NAVBAR MENU -->
								<nav aria-label="Primary" class="nav-overflow" data-bs-toggle="nav-overflow">
									<NavbarMenu longTitles sample={sample} hideIcons={hideIcons} pageMenu={pageMenu} />
								</nav>
								<!-- END NAVBAR MENU -->
							</div>

							{!hideSearch && (
								<div class="col-2 d-none d-xxl-block">
									<NavbarSearch class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last" />
								</div>
							)}

							<div class="col col-md-auto">
								<!-- BEGIN NAVBAR SIDE -->
								<div class="navbar-side">
									<ul class="navbar-nav">
										<li class="nav-item">
											<button
												type="button"
												class="nav-link"
												data-bs-toggle="offcanvas"
												data-bs-target="#offcanvas-settings"
												aria-controls="offcanvas-settings"
											>
												<span class="nav-link-icon">
													<Icon name="brush" />
												</span>
												<span class="nav-link-title">Customize</span>
											</button>
										</li>
									</ul>
								</div>
								<!-- END NAVBAR SIDE -->
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	)
}
<!-- END NAVBAR -->