<LumexNavbar Bordered="@true"
             Sticky="@true"
             Classes="@_navbarClasses">
    <LumexNavbarBrand>
        <span class="font-bold text-xl">
            Lumex<span class="font-normal">UI</span>
        </span>
    </LumexNavbarBrand>

    <LumexNavbarContent Class="hidden sm:flex">
        <LumexNavbarItem>
            <LumexLink Href="/examples/navbar/custom-styles#"
                       Color="@ThemeColor.None">
                Home
            </LumexLink>
        </LumexNavbarItem>
        <LumexNavbarItem>
            <LumexLink Href="/examples/navbar/custom-styles#"
                       Color="@ThemeColor.None">
                About
            </LumexLink>
        </LumexNavbarItem>
    </LumexNavbarContent>

    <LumexNavbarContent Align="@Align.End">
        <LumexTextbox Type="@InputType.Search"
                      Color="@ThemeColor.Info"
                      Variant="@InputVariant.Flat"
                      Size="@Size.Small"
                      Placeholder="Type to search..."
                      Classes="@_inputClasses">
            <StartContent>
                <LumexIcon Icon="@Icons.Rounded.Search" />
            </StartContent>
        </LumexTextbox>
    </LumexNavbarContent>
</LumexNavbar>

@code {
    private NavbarSlots _navbarClasses = new()
        {
            Root = "border-b-2 border-sky-100",
            Brand = "bg-clip-text bg-gradient-to-r from-sky-900 to-sky-600 text-transparent",
            Content = "gap-3",
            Item = "px-4 py-1.5 rounded-lg text-sky-600 bg-sky-50 font-medium"
        };

    private InputFieldSlots _inputClasses = new()
        {
            Root = "max-w-full sm:max-w-[10rem] h-8",
            Input = "text-tiny"
        };
}