tabler/shared/components/navbar/NavbarSide.astro

---
import Button from '@ui/Button.astro'
import ButtonList from '@ui/ButtonList.astro'
import NavbarSideTheme from './NavbarSideTheme.astro'
import NavbarSideNotifications from './NavbarSideNotifications.astro'
import NavbarSideApps from './NavbarSideApps.astro'
import NavbarSideLanguage from './NavbarSideLanguage.astro'
import NavbarSideUser from './NavbarSideUser.astro'

/** Bootstrap responsive breakpoint used for `d-{breakpoint}-flex` — $grid-breakpoints minus xs */
export type Breakpoint = 'sm' | 'md' | 'lg' | 'xl' | 'xxl'

interface Props {
  class?: string
  breakpoint?: Breakpoint | undefined
  condensed?: boolean
  personId?: number | undefined
  hideUsername?: boolean
  dark?: boolean
  showThemeToggle?: boolean
  showNotifications?: boolean
  showApps?: boolean
  showLanguageSelector?: boolean
  showUser?: boolean
}

const {
  class: className,
  breakpoint = 'md',
  condensed = false,
  personId = 1,
  hideUsername = false,
  dark = false,
  // show-* flags default false — sidebar only shows the All Package button (hosted demo) unless set.
  showThemeToggle = false,
  showNotifications = false,
  showApps = false,
  showLanguageSelector = false,
  showUser = false,
} = Astro.props

// The All Package link is an ad for tabler.io, so it only renders on the hosted demo
// (Vercel deploys), never in local builds or the packaged template (VERCEL_ENV is unset there).
const isVercelDeploy = !!process.env.VERCEL_ENV
const allPackageUrl = 'https://tabler.io/pricing?ref=tabler-preview-navbar#bundle'
---

<!-- BEGIN NAVBAR ACTIONS -->
<div class:list={['navbar-nav flex-row', className]}>
  {
    !condensed && isVercelDeploy && (
      <div class={`nav-item d-none d-${breakpoint}-flex me-3`}>
        <ButtonList>
          <Button icon="package" iconColor="blue" text="All Package" href={allPackageUrl} external />
        </ButtonList>
      </div>
    )
  }

  {
    (showThemeToggle || showNotifications || showApps || showLanguageSelector) && (
      <div class={`d-none d-${breakpoint}-flex me-3`}>
        {showThemeToggle && <NavbarSideTheme />}
        {showNotifications && <NavbarSideNotifications />}
        {showApps && <NavbarSideApps />}
        {showLanguageSelector && <NavbarSideLanguage />}
      </div>
    )
  }

  {showUser && <NavbarSideUser personId={personId} hideUsername={hideUsername} dark={dark} />}
</div>
<!-- END NAVBAR ACTIONS -->