decePubClient/Components/Styleguide/NavigationSection.razor

@* Styleguide: every Navigation component (Components/Daisy/Navigation) with its main variants. Demo links point at the
   daisyUI docs and open in a new tab, so clicking one never leaves this page. *@
<div class="grid gap-8 lg:grid-cols-2">
	<section class="flex flex-col gap-3">
		<h3 class="text-lg font-bold">DBreadcrumbs</h3>
		<DBreadcrumbs class="text-sm">
			<DBreadcrumbItem Href="styleguide"><i class="ion-md-home"></i> Home</DBreadcrumbItem>
			<DBreadcrumbItem Href="styleguide"><i class="ion-md-folder"></i> Components</DBreadcrumbItem>
			<DBreadcrumbItem aria-current="page"><i class="ion-md-document"></i> Breadcrumbs</DBreadcrumbItem>
		</DBreadcrumbs>
		<p class="text-xs opacity-60">max-w-xs: the list scrolls</p>
		<DBreadcrumbs class="max-w-xs text-sm">
			<DBreadcrumbItem Href="styleguide">Long text 1</DBreadcrumbItem>
			<DBreadcrumbItem Href="styleguide">Long text 2</DBreadcrumbItem>
			<DBreadcrumbItem Href="styleguide">Long text 3</DBreadcrumbItem>
			<DBreadcrumbItem Href="styleguide">Long text 4</DBreadcrumbItem>
			<DBreadcrumbItem>Long text 5</DBreadcrumbItem>
		</DBreadcrumbs>
	</section>

	<section class="flex flex-col gap-3">
		<h3 class="text-lg font-bold">DDock</h3>
		<p class="text-xs opacity-60">class="relative" keeps it in the flow; click to move the active item</p>
		@foreach (var size in new[] { DSize.Xs, DSize.Sm, DSize.Md, DSize.Lg, DSize.Xl })
		{
			<DDock Size="size" class="relative rounded-box bg-base-200">
				<DDockItem Text="Home" Active="dockActive == 0" OnClick="() => dockActive = 0"><i class="ion-md-home text-xl"></i></DDockItem>
				<DDockItem Text="Inbox" Active="dockActive == 1" OnClick="() => dockActive = 1"><i class="ion-md-mail text-xl"></i></DDockItem>
				<DDockItem Text="Settings" Active="dockActive == 2" OnClick="() => dockActive = 2"><i class="ion-md-settings text-xl"></i></DDockItem>
				<DDockItem Text="Disabled" Disabled="true"><i class="ion-md-close-circle text-xl"></i></DDockItem>
			</DDock>
		}
	</section>

	<section class="flex flex-col gap-3">
		<h3 class="text-lg font-bold">DLink</h3>
		<div class="flex flex-wrap gap-3">
			<DLink Href="styleguide">Default</DLink>
			@foreach (var color in colors)
			{
				<DLink Href="styleguide" Color="color">@color</DLink>
			}
		</div>
		<div class="flex flex-wrap gap-3">
			<DLink Href="styleguide" Hover="true">Underline on hover</DLink>
			<DLink Color="DColor.Primary" OnClick="() => linkClicks++">Button link, clicked @linkClicks times</DLink>
		</div>
	</section>

	<section class="flex flex-col gap-3">
		<h3 class="text-lg font-bold">DMegamenu</h3>
		<p class="text-xs opacity-60">Below sm it collapses behind the Menu button</p>
		<DMegamenu class="border border-base-300 p-2">
			<DMegamenuItem Text="Products">
				<DMenu class="w-56">
					<DMenuTitle>Apps</DMenuTitle>
					<DMenuItem><i class="ion-md-chatbubbles"></i> Messenger</DMenuItem>
					<DMenuItem><i class="ion-md-images"></i> Gallery</DMenuItem>
					<DMenuItem><i class="ion-md-cart"></i> Shop</DMenuItem>
				</DMenu>
			</DMegamenuItem>
			<DMegamenuItem Text="Resources">
				<div class="flex items-start max-sm:flex-col">
					<DMenu class="w-full md:menu-horizontal">
						<li>
							<a>Guides</a>
							<ul><li><a>Getting started</a></li><li><a>Theming</a></li></ul>
						</li>
						<li>
							<a>Reference</a>
							<ul><li><a>Components</a></li><li><a>Utilities</a></li></ul>
						</li>
					</DMenu>
					<img src="imgs/styleguide/scene-2.svg" class="m-2 rounded-box max-md:w-auto md:max-w-xs" alt="Sample" />
				</div>
			</DMegamenuItem>
			<DMegamenuItem Text="Company" HideArrow="true" class="p-4">
				<p class="w-64 text-sm">Custom content, and an item without the arrow.</p>
			</DMegamenuItem>
		</DMegamenu>
		<p class="text-xs opacity-60">PanelWidth Wide, Size Sm</p>
		<DMegamenu PanelWidth="DMegamenuPanelWidth.Wide" Size="DSize.Sm" class="w-full border border-base-300 p-2">
			<DMegamenuItem Text="One">
				<DMenu Direction="DDirection.Horizontal" class="w-full">
					<DMenuItem>First</DMenuItem>
					<DMenuItem>Second</DMenuItem>
					<DMenuItem>Third</DMenuItem>
				</DMenu>
			</DMegamenuItem>
			<DMegamenuItem Text="Two">
				<p class="p-4 text-sm">A wide panel spans the whole megamenu.</p>
			</DMegamenuItem>
		</DMegamenu>
	</section>

	<section class="flex flex-col gap-3">
		<h3 class="text-lg font-bold">DMenu</h3>
		<div class="flex flex-wrap items-start gap-4">
			<DMenu class="w-56 rounded-box bg-base-200">
				<DMenuTitle>Title</DMenuTitle>
				<DMenuItem Active="menuActive == 0" OnClick="() => menuActive = 0"><i class="ion-md-home"></i> Home</DMenuItem>
				<DMenuItem Active="menuActive == 1" OnClick="() => menuActive = 1"><i class="ion-md-mail"></i> Inbox <span class="badge badge-sm">3</span></DMenuItem>
				<DMenuItem Href="styleguide"><i class="ion-md-document"></i> Docs (link)</DMenuItem>
				<DMenuItem Disabled="true"><i class="ion-md-close-circle"></i> Disabled</DMenuItem>
				<li></li>
				<DSubmenu @bind-IsOpen="submenuOpen">
					<Header><i class="ion-md-folder"></i> Submenu (@(submenuOpen ? "open" : "closed"))</Header>
					<ChildContent>
						<DMenuItem>Child 1</DMenuItem>
						<DSubmenu>
							<Header>Nested</Header>
							<ChildContent>
								<DMenuItem>Grandchild</DMenuItem>
							</ChildContent>
						</DSubmenu>
					</ChildContent>
				</DSubmenu>
			</DMenu>
			<DMenu Paged="true" class="w-56 rounded-box bg-base-200">
				<DMenuTitle>Paged</DMenuTitle>
				<DMenuItem>Item</DMenuItem>
				<DSubmenu BackText="Back to the list">
					<Header>Settings</Header>
					<ChildContent>
						<DMenuItem>Account</DMenuItem>
						<DMenuItem>Privacy</DMenuItem>
					</ChildContent>
				</DSubmenu>
			</DMenu>
		</div>
		<DMenu Direction="DDirection.Horizontal" class="rounded-box bg-base-200">
			<DMenuItem>Horizontal</DMenuItem>
			<DMenuItem Active="true">Active</DMenuItem>
			<DSubmenu @bind-IsOpen="horizontalSubmenuOpen">
				<Header>Submenu</Header>
				<ChildContent>
					<DMenuItem OnClick="() => horizontalSubmenuOpen = false">Close me</DMenuItem>
					<DMenuItem>Other</DMenuItem>
				</ChildContent>
			</DSubmenu>
		</DMenu>
		<div class="flex flex-wrap items-start gap-4">
			@foreach (var size in new[] { DSize.Xs, DSize.Sm, DSize.Lg, DSize.Xl })
			{
				<DMenu Size="size" class="rounded-box bg-base-200">
					<DMenuTitle>@size</DMenuTitle>
					<DMenuItem>Item</DMenuItem>
				</DMenu>
			}
		</div>
	</section>

	<section class="flex flex-col gap-3">
		<h3 class="text-lg font-bold">DNavbar</h3>
		<DNavbar class="rounded-box bg-base-200">
			<Start>
				<DButton Variant="DButtonVariant.Ghost" Shape="DButtonShape.Square"><i class="ion-md-menu text-xl"></i></DButton>
				<span class="px-2 text-xl font-bold">decePub</span>
			</Start>
			<Center>
				<DMenu Direction="DDirection.Horizontal" class="px-1">
					<DMenuItem Active="true">Home</DMenuItem>
					<DMenuItem>About</DMenuItem>
				</DMenu>
			</Center>
			<End>
				<DButton Variant="DButtonVariant.Ghost" Shape="DButtonShape.Circle"><i class="ion-md-search text-xl"></i></DButton>
				<DButton Variant="DButtonVariant.Ghost" Shape="DButtonShape.Circle"><i class="ion-md-notifications text-xl"></i></DButton>
			</End>
		</DNavbar>
		<DNavbar class="rounded-box bg-neutral text-neutral-content" CenterClass="hidden sm:flex">
			<Start><span class="px-2 font-bold">Start + End</span></Start>
			<Center>Center hidden below sm</Center>
			<End><DButton Size="DSize.Sm">Action</DButton></End>
		</DNavbar>
	</section>

	<section class="flex flex-col gap-3">
		<h3 class="text-lg font-bold">DPagination</h3>
		<DPagination Count="20" @bind-Current="currentPage" />
		<p class="text-xs opacity-60">Page @currentPage of 20</p>
		<DPagination Count="5" @bind-Current="smallPage" Size="DSize.Sm" ShowPreviousNext="false" />
		<DPagination Count="20" @bind-Current="currentPage" Size="DSize.Xs" Siblings="2" />
		<DPagination Count="4" @bind-Current="largePage" Size="DSize.Lg" />
		<DPagination Count="3" @bind-Current="verticalPage" Direction="DDirection.Vertical" ShowPreviousNext="false" class="self-start" />
	</section>

	<section class="flex flex-col gap-3">
		<h3 class="text-lg font-bold">DSteps</h3>
		<DSteps class="w-full">
			<DStep Color="DColor.Primary">Register</DStep>
			<DStep Color="DColor.Primary">Choose plan</DStep>
			<DStep>Purchase</DStep>
			<DStep>Receive</DStep>
		</DSteps>
		<div class="flex flex-wrap items-center gap-2">
			<DButton Size="DSize.Sm" Disabled="stepsDone == 0" OnClick="() => stepsDone--">Back</DButton>
			<DButton Size="DSize.Sm" Color="DColor.Primary" Disabled="stepsDone == 4" OnClick="() => stepsDone++">Next</DButton>
		</div>
		<DSteps class="w-full">
			@for (var i = 0; i < 4; i++)
			{
				<DStep Color="@(i < stepsDone ? DColor.Success : DColor.None)" Marker="@(i < stepsDone ? "✓" : null)">Step @(i + 1)</DStep>
			}
		</DSteps>
		<DSteps class="w-full overflow-x-auto">
			@foreach (var color in colors)
			{
				<DStep Color="color">@color</DStep>
			}
		</DSteps>
		<div class="flex flex-wrap gap-8">
			<DSteps Direction="DDirection.Vertical">
				<DStep Color="DColor.Info" Marker="?">Marker ?</DStep>
				<DStep Color="DColor.Warning" Marker="!">Marker !</DStep>
				<DStep Color="DColor.Error" Marker="✕">Marker ✕</DStep>
			</DSteps>
			<DSteps Direction="DDirection.Vertical">
				<DStep Color="DColor.Neutral"><Icon><i class="ion-md-person"></i></Icon><ChildContent>Icon</ChildContent></DStep>
				<DStep Color="DColor.Neutral"><Icon><i class="ion-md-star"></i></Icon><ChildContent>Icon</ChildContent></DStep>
				<DStep><Icon><i class="ion-md-checkmark"></i></Icon><ChildContent>Icon</ChildContent></DStep>
			</DSteps>
		</div>
	</section>

	<section class="flex flex-col gap-3">
		<h3 class="text-lg font-bold">DTabs</h3>
		@foreach (var variant in new[] { DTabsVariant.Default, DTabsVariant.Box, DTabsVariant.Border, DTabsVariant.Lift })
		{
			<DTabs Variant="variant" @bind-Active="tabActive">
				<DTab>
					<Header>@variant</Header>
					<ChildContent>@variant tab 1 content</ChildContent>
				</DTab>
				<DTab>
					<Header>Tab 2</Header>
					<ChildContent>@variant tab 2 content</ChildContent>
				</DTab>
				<DTab Disabled="true">
					<Header>Disabled</Header>
					<ChildContent>Never shown</ChildContent>
				</DTab>
			</DTabs>
		}
	</section>
</div>

@code {
	static readonly DColor[] colors =
	{
		DColor.Neutral, DColor.Primary, DColor.Secondary, DColor.Accent, DColor.Info, DColor.Success, DColor.Warning, DColor.Error
	};

	int dockActive;
	int linkClicks;
	int menuActive;
	bool submenuOpen = true;
	bool horizontalSubmenuOpen;
	int currentPage = 7;
	int smallPage = 2;
	int largePage = 1;
	int verticalPage = 1;
	int stepsDone = 1;
	int tabActive;
}