lumexui/docs/LumexUI.Docs.Client/Components/Header.razor at d75af850be5c56d2b7c267a68bbb1fa863d62cb1 · LumexUI/lumexui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
@namespace LumexUI.Docs.Client.Components
@rendermode InteractiveWebAssembly

<LumexNavbar Sticky="@true"
             Bordered="@true"
             MaxWidth="@MaxWidth.XLarge"
             Classes="@_navbarClasses">
    <LumexNavbarBrand>
        <LumexLink Href="/"
                   Class="font-bold text-xl text-foreground-900">
            Lumex<span class="font-normal">UI</span>
        </LumexLink>
    </LumexNavbarBrand>

    <LumexNavbarContent Align="@Align.End" Class="hidden sm:flex">
        @foreach( var item in _navItems )
        {
            <LumexNavbarItem>
                <LumexLink Href="@item.Link"
                           Color="@ThemeColor.None"
                           Class="hover:text-orange-500 data-[active=true]:text-orange-500">
                    @item.Name
                </LumexLink>
            </LumexNavbarItem>
        }

        <LumexNavbarItem Class="h-full">
            <LumexDivider Orientation="@Orientation.Vertical" />
        </LumexNavbarItem>
        @_headerActions
    </LumexNavbarContent>

    <LumexNavbarContent Align="@Align.End" Class="sm:hidden gap-4">
        @_headerActions
        <LumexNavbarMenuToggle Class="sm:hidden" />
    </LumexNavbarContent>

    <LumexNavbarMenu Class="pt-0 pb-10 sm:hidden">
        <NavMenu />
    </LumexNavbarMenu>
</LumexNavbar>

@code {
    private static RenderFragment _headerActions =
    @<text>
        <LumexNavbarItem Class="flex">
            <LumexLink Href="https://github.com/LumexUI/lumexui"
                       External="@true"
                       Class="text-foreground-400 hover:text-foreground-600">
                <GithubIcon Size="20" />
            </LumexLink>
        </LumexNavbarItem>
    </text>;

    private readonly NavbarSlots _navbarClasses = new()
        {
            Wrapper = "py-5 gap-6"
        };

    private readonly NavItem[] _navItems = new NavItem[]
    {
        new("/", "Docs"),
        new("/docs/components", "Components"),
    };

    private record NavItem( string Link, string Name );
}