lumexui/docs/LumexUI.Docs.Client/Components/Header.razor at 670d862b6875ddc414dd829e46c98220f7b8c7b3 · 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
@namespace LumexUI.Docs.Client.Components
@rendermode InteractiveWebAssembly

<LumexNavbar Sticky="@true"
             Bordered="@true"
             MaxWidth="@MaxWidth.XLarge"
             Classes="@(new() { Wrapper = "gap-6" })">
    <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="data-[active=true]:text-orange-500 dark:text-foreground-700 dark:data-[active=true]:text-orange-400">
                    @item.Name
                </LumexLink>
            </LumexNavbarItem>
        }

        <LumexNavbarItem Class="h-6">
            <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 readonly RenderFragment _headerActions =
    @<text>
        <LumexNavbarItem Class="flex">
            <LumexLink Href="https://github.com/LumexUI/lumexui"
                       External="@true"
                       Class="text-foreground-500 hover:text-foreground-600 hover:opacity-100">
                <GithubIcon Size="20" />
            </LumexLink>
        </LumexNavbarItem>
        <LumexNavbarItem Class="flex">
            <ThemeToggle />
        </LumexNavbarItem>
    </text>;

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

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