Navbar(
  style: [BgUtil.base100, Effects.shadowSm],
  ariaLabel: 'Navbar with title',
  [
    NavbarStart([
      Button(
        [text('daisyUI')],
        style: [Button.ghost, TextUtil.xl],
      ),
    ]),
  ],
)

Navbar(
  style: [BgUtil.base100, Effects.shadowSm],
  ariaLabel: 'Navbar with title and icon',
  [
    NavbarStart([
      Button([text('daisyUI')], style: [Button.ghost, TextUtil.xl]),
    ]),
    NavbarEnd([
      Button(
        [Icon('more_horiz', style: [Size.w5, Size.h5])],
        style: [Button.ghost, Button.square],
      ),
    ]),
  ],
)

Navbar(
  style: [BgUtil.base100, Effects.shadowSm],
  ariaLabel: 'Navbar with icons at start and end',
  [
    NavbarStart([
      Button(
        [Icon('menu', style: [Size.w5, Size.h5])],
        style: [Button.ghost, Button.square],
      ),
    ]),
    NavbarCenter([
      Button([text('daisyUI')], style: [Button.ghost, TextUtil.xl]),
    ]),
    NavbarEnd([
      Button(
        [Icon('more_horiz', style: [Size.w5, Size.h5])],
        style: [Button.ghost, Button.square],
      ),
    ]),
  ],
)

import 'package:deepyr/deepyr.dart';
import 'package:jaspr/jaspr.dart';

Container(
  style: [Size.wFull, Spacing.mb(32)],
  [
    Navbar(
      style: [BgUtil.base100, Effects.shadowSm],
      ariaLabel: 'Navbar with menu and submenu',
      [
        NavbarStart([
          Button([text('daisyUI')], style: [Button.ghost, TextUtil.xl]),
        ]),
        NavbarEnd([
          Menu(
            style: [Menu.horizontal, Spacing.px(1)],
            [
              MenuItem([text('Link')]),
              MenuSubmenu(
                label: text('Parent'),
                // The new ulStyle property allows type-safe styling of the submenu panel.
                ulStyle: [Spacing.p(2), BgUtil.base100, Effects.roundedTNone],
                children: [
                  MenuItem([text('Link 1')]),
                  MenuItem([text('Link 2')]),
                ],
              ),
            ],
          ),
        ]),
      ],
    ),
  ],
)

Navbar(
  style: [BgUtil.base100, Effects.shadowSm],
  ariaLabel: 'Navbar with search and user menu',
  [
    NavbarStart([
      Button([text('daisyUI')], style: [Button.ghost, TextUtil.xl]),
    ]),
    NavbarEnd([
      Container(
        style: [Layout.flex, Layout.gap(2)],
        [
          Input(
            placeholder: 'Search',
            style: [Input.bordered, Size.w(24), Size.wAuto.at(Breakpoint.md)],
          ),
          Dropdown(
            method: DropdownMethod.focus,
            style: [Dropdown.end],
            trigger: Button(
              [
                Avatar([
                  Container(
                    [img(src: '...')],
                    style: [Size.w10, Effects.roundedFull],
                  ),
                ]),
              ],
              style: [Button.ghost, Button.circle],
            ),
            content: DropdownContent(
              [
                Menu(
                  [
                    MenuItem(
                      [text('Profile'), Badge([text('New')])],
                      classes: 'justify-between',
                    ),
                    MenuItem([text('Settings')]),
                    MenuItem([text('Logout')]),
                  ],
                  style: [Menu.sm, Size.w52],
                ),
              ],
              tag: 'ul',
              style: [
                DropdownContent.menu, Spacing.mt(3), Spacing.p(2),
                Effects.shadow, BgUtil.base100, Effects.roundedBox, Layout.z(1)
              ],
            ),
          ),
        ],
      ),
    ]),
  ],
)

Navbar(
  style: [BgUtil.base100, Effects.shadowSm],
  ariaLabel: 'Responsive navbar with dropdown and horizontal menu',
  [
    NavbarStart([
      // Mobile Dropdown - hidden on large screens
      Container(
        style: [Layout.hidden.at(Breakpoint.lg)], // Hides on lg screens and up.
        [
          Dropdown(
            method: DropdownMethod.focus,
            trigger: Button(
              [Icon('menu', style: [Size.w5, Size.h5])],
              style: [Button.ghost],
            ),
            content: DropdownContent(
              [
                Menu(
                  [
                    MenuItem([text('Item 1')]),
                    MenuSubmenu(
                      label: text('Parent'),
                      children: [
                        MenuItem([text('Submenu 1')]),
                        MenuItem([text('Submenu 2')]),
                      ],
                    ),
                    MenuItem([text('Item 3')]),
                  ],
                  style: [Menu.sm, Size.w52],
                ),
              ],
              tag: 'ul',
              style: [
                DropdownContent.menu, Spacing.mt(3), Spacing.p(2),
                Effects.shadow, BgUtil.base100, Effects.roundedBox, Layout.z(1)
              ],
            ),
          ),
        ],
      ),
      Button([text('daisyUI')], style: [Button.ghost, TextUtil.xl]),
    ]),
    // Desktop Menu - hidden on small, flex on large
    NavbarCenter(
      style: [Layout.hidden, Layout.flex.at(Breakpoint.lg)],
      [
        Menu(
          style: [Menu.horizontal, Spacing.px(1)],
          [
            MenuItem([text('Item 1')]),
            MenuSubmenu(
              label: text('Parent'),
              children: [
                MenuItem([text('Submenu 1')]),
                MenuItem([text('Submenu 2')]),
              ],
            ),
            MenuItem([text('Item 3')]),
          ],
        ),
      ],
    ),
    NavbarEnd([
      Button([text('Button')]),
    ]),
  ],
)

// Navbar with Neutral color
Navbar(
  style: [BgUtil.neutral, TextUtil.neutralContent],
  ariaLabel: 'Neutral colored navbar',
  [Button([text('daisyUI')], style: [Button.ghost, TextUtil.xl])],
)

// Navbar with Base-300 color
Navbar(
  style: [BgUtil.base300],
  ariaLabel: 'Base colored navbar',
  [Button([text('daisyUI')], style: [Button.ghost, TextUtil.xl])],
)

// Navbar with Primary color
Navbar(
  style: [BgUtil.primary, TextUtil.primaryContent],
  ariaLabel: 'Primary colored navbar',
  [Button([text('daisyUI')], style: [Button.ghost, TextUtil.xl])],
)