NavigationMenu

# ruff: noqa: E501

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class NavigationMenuAtAGlance(Component):
    template = """
      <c-CNavigationMenu label="Main navigation" variant="surface">
        <c-CNavigationMenuLink href="#overview" c-current="True">Overview</c-CNavigationMenuLink>
        <c-CNavigationMenuItem value="products">
          <c-fill name="label">Products</c-fill>
          <c-fill name="default"><c-CStack gap="sm"><strong>Explore products</strong><a href="#analytics">Analytics</a><a href="#automations">Automations</a></c-CStack></c-fill>
        </c-CNavigationMenuItem>
        <c-CNavigationMenuLink href="#pricing">Pricing</c-CNavigationMenuLink>
      </c-CNavigationMenu>
    """


preview = NavigationMenuAtAGlance()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class NavigationLinks(Component):
    template = """
      <c-CNavigationMenu label="Documentation">
        <c-CNavigationMenuLink href="#guide" c-current="True">Guide</c-CNavigationMenuLink>
        <c-CNavigationMenuLink href="#reference">Reference</c-CNavigationMenuLink>
        <c-CNavigationMenuLink href="#examples">Examples</c-CNavigationMenuLink>
      </c-CNavigationMenu>
    """


preview = NavigationLinks()
preview  # noqa: B018

# ruff: noqa: E501

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class RichNavigationPanels(Component):
    template = """
      <c-CNavigationMenu label="Product navigation" value="platform">
        <c-CNavigationMenuLink href="#home">Home</c-CNavigationMenuLink>
        <c-CNavigationMenuItem value="platform">
          <c-fill name="label">Platform</c-fill>
          <c-fill name="default"><c-CGrid cols="2" gap="sm"><c-CCard variant="subtle"><c-fill name="header"><strong>Observe</strong></c-fill><c-fill name="default">Capture field signals.</c-fill></c-CCard><c-CCard variant="subtle"><c-fill name="header"><strong>Coordinate</strong></c-fill><c-fill name="default">Keep teams aligned.</c-fill></c-CCard></c-CGrid></c-fill>
        </c-CNavigationMenuItem>
        <c-CNavigationMenuLink href="#company">Company</c-CNavigationMenuLink>
      </c-CNavigationMenu>
    """


preview = RichNavigationPanels()
preview  # noqa: B018

# ruff: noqa: E501

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class ControlledNavigation(Component):
    template = """
      <section x-data="{open:null}"><p>Open: <strong x-text="open ?? 'none'"></strong></p>
        <c-CNavigationMenu label="Controlled navigation" $c-props="{value:open,onValueChange:(next)=>open=next}">
          <c-CNavigationMenuLink href="#home">Home</c-CNavigationMenuLink>
          <c-CNavigationMenuItem value="learn"><c-fill name="label">Learn</c-fill><c-fill name="default"><a href="#tutorials">Tutorials</a></c-fill></c-CNavigationMenuItem>
        </c-CNavigationMenu>
      </section>
    """


preview = ControlledNavigation()
preview  # noqa: B018

# ruff: noqa: E501

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class NavigationOrientation(Component):
    template = """
      <c-CNavigationMenu label="Account navigation" orientation="vertical" variant="surface">
        <c-CNavigationMenuLink href="#profile" c-current="True">Profile</c-CNavigationMenuLink>
        <c-CNavigationMenuItem value="teams"><c-fill name="label">Teams</c-fill><c-fill name="default"><a href="#research">Research</a><br><a href="#operations">Operations</a></c-fill></c-CNavigationMenuItem>
        <c-CNavigationMenuLink href="#billing">Billing</c-CNavigationMenuLink>
      </c-CNavigationMenu>
    """


preview = NavigationOrientation()
preview  # noqa: B018

# ruff: noqa: E501

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class NavigationStates(Component):
    template = """
      <c-CNavigationMenu label="Navigation states">
        <c-CNavigationMenuLink href="#home" c-current="True">Current page</c-CNavigationMenuLink>
        <c-CNavigationMenuItem value="available"><c-fill name="label">Available</c-fill><c-fill name="default">Ready to explore.</c-fill></c-CNavigationMenuItem>
        <c-CNavigationMenuItem value="locked" disabled><c-fill name="label">Unavailable</c-fill><c-fill name="default">Hidden panel.</c-fill></c-CNavigationMenuItem>
      </c-CNavigationMenu>
    """


preview = NavigationStates()
preview  # noqa: B018

# ruff: noqa: E501

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class NavigationVariants(Component):
    template = """
      <c-CStack gap="lg"><c-CNavigationMenu label="Small plain" size="sm"><c-CNavigationMenuLink href="#one">Small</c-CNavigationMenuLink><c-CNavigationMenuItem value="more"><c-fill name="label">More</c-fill><c-fill name="default">Small panel</c-fill></c-CNavigationMenuItem></c-CNavigationMenu><c-CNavigationMenu label="Large surface" variant="surface" size="lg"><c-CNavigationMenuLink href="#two">Large</c-CNavigationMenuLink><c-CNavigationMenuItem value="details"><c-fill name="label">Details</c-fill><c-fill name="default">Large panel</c-fill></c-CNavigationMenuItem></c-CNavigationMenu></c-CStack>
    """


preview = NavigationVariants()
preview  # noqa: B018

# ruff: noqa: E501

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class NavigationKeyboard(Component):
    template = """
      <c-CStack gap="sm"><p>Tab normally. Use Arrow keys between top-level controls, Down to enter an open panel, and Escape to close it.</p><c-CNavigationMenu label="Keyboard example" loop><c-CNavigationMenuLink href="#start">Start</c-CNavigationMenuLink><c-CNavigationMenuItem value="topics"><c-fill name="label">Topics</c-fill><c-fill name="default"><a href="#accessibility">Accessibility</a></c-fill></c-CNavigationMenuItem><c-CNavigationMenuLink href="#finish">Finish</c-CNavigationMenuLink></c-CNavigationMenu></c-CStack>
    """


preview = NavigationKeyboard()
preview  # noqa: B018

# ruff: noqa: E501

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class CustomNavigation(Component):
    template = """
      <c-CNavigationMenu label="Aurora navigation" class_="aurora-nav" variant="surface"><c-CNavigationMenuLink href="#mission">Mission</c-CNavigationMenuLink><c-CNavigationMenuItem value="field-notes"><c-fill name="label">Field notes</c-fill><c-fill name="default"><strong>Fresh observations</strong><p>Follow the latest work from the field.</p></c-fill></c-CNavigationMenuItem></c-CNavigationMenu>
    """
    css = """
      .aurora-nav { --cui-navigation-menu-trigger-open-background:#dbeafe; --cui-navigation-menu-radius:1rem; --cui-navigation-menu-panel-inline-size:20rem; }
    """


preview = CustomNavigation()
preview  # noqa: B018