jjj 0.2.1

A modal interface for Jujutsu.
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

---
import MobileMenuToggle from 'virtual:starlight/components/MobileMenuToggle';

const { hasSidebar } = Astro.locals.starlightRoute;
---

<div class="page sl-flex">
	<header class="header"><slot name="header" /></header>
	{
		hasSidebar && (
			<nav class="sidebar print:hidden" aria-label={Astro.locals.t('sidebarNav.accessibleLabel')}>
				<MobileMenuToggle />
				<div id="starlight__sidebar" class="sidebar-pane">
					<div class="sidebar-content sl-flex">
						<slot name="sidebar" />
					</div>
				</div>
			</nav>
		)
	}
	<div class="main-frame"><slot /></div>
</div>

<style>
	.page {
		flex-direction: column;
		min-height: 100vh;
	}

	.header {
		z-index: var(--sl-z-index-navbar);
		position: fixed;
		inset-inline-start: 0;
		inset-block-start: 0;
		width: 100%;
		height: var(--sl-nav-height);
		border-bottom: 1px solid var(--sl-color-hairline-shade);
		padding: var(--sl-nav-pad-y) var(--sl-nav-pad-x);
		padding-inline-end: var(--sl-nav-pad-x);
		background-color: var(--sl-color-bg-nav);
	}

	:global([data-has-sidebar]) .header {
		padding-inline-end: calc(var(--sl-nav-gap) + var(--sl-nav-pad-x) + var(--sl-menu-button-size));
	}

	.sidebar-pane {
		visibility: var(--sl-sidebar-visibility, hidden);
		position: fixed;
		z-index: var(--sl-z-index-menu);
		inset-block: var(--sl-nav-height) 0;
		inset-inline-start: 0;
		width: 100%;
		background-color: var(--sl-color-black);
		overflow-y: auto;
	}

	:global([aria-expanded='true']) ~ .sidebar-pane {
		--sl-sidebar-visibility: visible;
	}

	.sidebar-content {
		height: 100%;
		min-height: max-content;
		padding: 1rem var(--sl-sidebar-pad-x) 0;
		flex-direction: column;
		gap: 1rem;
	}

	@media (min-width: 50rem) {
		.sidebar-content::after {
			content: '';
			padding-bottom: 1px;
		}
	}

	.main-frame {
		padding-top: calc(var(--sl-nav-height) + var(--sl-mobile-toc-height));
		padding-inline-start: var(--sl-content-inline-start);
	}

	@media (min-width: 50rem) {
		:global([data-has-sidebar]) .header {
			padding-inline-end: var(--sl-nav-pad-x);
		}
		.sidebar-pane {
			--sl-sidebar-visibility: visible;
			width: var(--sl-sidebar-width);
			background-color: var(--sl-color-bg-sidebar);
			border-inline-end: 1px solid var(--sl-color-hairline-shade);
		}
	}
</style>