boxmux 0.240.3373

YAML-driven terminal UI framework for rich, interactive CLI applications and dashboards with PTY support
Documentation 
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

<script lang="ts">
	import { Button, buttonVariants } from '$lib/components/ui/button';
	import { Separator } from '$lib/components/ui/separator';
	import { ChevronDown, Compass, Menu } from 'lucide-svelte';
	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
	import DarkModeToggle from '../dark-mode-toggle.svelte';
	import { navItems, siteConfig } from '$lib/config';
	import SocialMedia from '../social-media.svelte';

	let isNavOpen = false;
</script>

<header
	class="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
>
	<nav
		class="relative mx-auto w-full max-w-[85rem] px-4 py-4 sm:px-6 md:flex md:items-center md:justify-between md:gap-3 lg:px-8"
	>
		<!-- Logo w/ Collapse Button -->
		<div class="flex items-center justify-between">
			<a href="/">
				<img src={siteConfig.logo} alt={siteConfig.title} class="h-6 dark:hidden" />
				<img src={siteConfig.logoDark} alt={siteConfig.title} class="hidden h-6 dark:block" />
			</a>

			<div class="flex items-center gap-2">
				<Button
					variant="outline"
					size="icon"
					class="md:hidden"
					onclick={() => (isNavOpen = !isNavOpen)}
				>
					<Menu /> <span class="sr-only">Toggle navigation</span>
				</Button>
				<!-- End Collapse Button -->
				<div class="md:hidden">
					<DarkModeToggle />
				</div>
			</div>
			<!-- Collapse Button -->
		</div>
		<!-- End Logo w/ Collapse Button -->

		<!-- Collapse -->
		<div
			class={`${
				isNavOpen ? 'block' : 'hidden'
			} grow basis-full overflow-hidden transition-all duration-300 md:block`}
			aria-labelledby="header-collapse"
		>
			<div
				class="max-h-[75vh] overflow-hidden overflow-y-auto [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 [&::-webkit-scrollbar-track]:bg-gray-100 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 [&::-webkit-scrollbar]:w-2"
			>
				<div
					class="flex flex-col gap-0.5 py-2 md:flex-row md:items-center md:justify-end md:gap-1 md:py-0"
				>
					{#each navItems as item}
						{#if item.items && item.items?.length > 0}
							<!-- Dropdown for items with sub-items -->
							<DropdownMenu.Root>
								<DropdownMenu.Trigger class="{buttonVariants({ variant: 'ghost' })} "
									>{item.title} <ChevronDown /></DropdownMenu.Trigger
								>
								<DropdownMenu.Content>
									<DropdownMenu.Group>
										{#each item.items as subItem}
											<DropdownMenu.Item>
												<a href={subItem.href}>{subItem.title}</a>
											</DropdownMenu.Item>
										{/each}
									</DropdownMenu.Group>
								</DropdownMenu.Content>
							</DropdownMenu.Root>
						{:else}
							<!-- Regular Button for single items -->
							<Button variant="ghost" href={item.href}>
								{#if item.icon}
									<item.icon />
								{/if}
								{item.title}
							</Button>
						{/if}
					{/each}
					<SocialMedia />

					<Separator orientation="vertical" class="mr-2 hidden h-5 md:block" />

					<div class="hidden md:block">
						<DarkModeToggle />
					</div>
				</div>
			</div>
		</div>
		<!-- End Collapse -->
	</nav>
</header>