mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 13:17:00 +04:00
74 lines
2.9 KiB
Plaintext
74 lines
2.9 KiB
Plaintext
---
|
|
import NavbarToggler from './NavbarToggler.astro'
|
|
import Logo from './Logo.astro'
|
|
import NavbarMenu from './NavbarMenu.astro'
|
|
import SidebarUser from './SidebarUser.astro'
|
|
import Icon from '@ui/Icon.astro'
|
|
import type { Breakpoint } from './NavbarSide.astro'
|
|
|
|
interface Props {
|
|
dark?: boolean | undefined
|
|
breakpoint?: Breakpoint | undefined
|
|
/** navbar-end: sidebar on the end side */
|
|
end?: boolean | undefined
|
|
/** navbar-transparent */
|
|
transparent?: boolean | undefined
|
|
/** navbar-folded: icon-only rail with flyout submenus */
|
|
folded?: boolean | undefined
|
|
/** navbar-folded-hover: folded rail that unfolds on hover/focus */
|
|
foldedHover?: boolean | undefined
|
|
/** renders a bottom-pinned button toggling the folded state at runtime */
|
|
foldToggle?: boolean | undefined
|
|
/** active menu entry, e.g. "layout.vertical" */
|
|
pageMenu?: string | undefined
|
|
}
|
|
|
|
const { dark = false, breakpoint = 'lg', end = false, transparent = false, folded = false, foldedHover = false, foldToggle = false, pageMenu } = Astro.props
|
|
|
|
const isFolded = folded || foldedHover
|
|
|
|
const asideClass = ['navbar navbar-vertical', end && 'navbar-end', `navbar-expand-${breakpoint}`, transparent && 'navbar-transparent', folded && 'navbar-folded', foldedHover && 'navbar-folded-hover'].filter(Boolean).join(' ')
|
|
---
|
|
|
|
<!-- BEGIN SIDEBAR -->
|
|
<aside class={asideClass} data-bs-theme={dark ? 'dark' : undefined}>
|
|
<div class="container-fluid">
|
|
<NavbarToggler target="sidebar-menu" />
|
|
|
|
{/* Small logo mark: the full wordmark would crop in the folded rail and jump during the hover-expand transition. */}
|
|
<Logo header smallLogo>
|
|
{
|
|
foldToggle && (
|
|
<button type="button" class="btn btn-action btn-sm d-none d-lg-inline-flex" data-bs-toggle="sidebar-folded" aria-pressed={folded ? 'true' : 'false'} aria-label="Pin sidebar">
|
|
<Icon name="pin" />
|
|
</button>
|
|
)
|
|
}
|
|
</Logo>
|
|
|
|
{
|
|
/* Before the collapse, like the regular navbar's side items — on mobile it
|
|
stays in the top bar row; on desktop CSS order moves it to the bottom. */
|
|
}
|
|
<SidebarUser />
|
|
|
|
<nav class="collapse navbar-collapse" id="sidebar-menu" aria-label="Sidebar">
|
|
{/* A folded sidebar renders flyout submenus, so the active branch is not kept open inline. */}
|
|
<NavbarMenu autoOpen={!isFolded} class="pt-lg-3" keepOpen={!isFolded} sections pageMenu={pageMenu} />
|
|
|
|
{/* .navbar-side: the menu's trailing group, pinned to the bottom of the sidebar. */}
|
|
<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>
|
|
</nav>
|
|
</div>
|
|
</aside>
|
|
<!-- END SIDEBAR -->
|