hugo-theme-paradox/assets/styles/components/nav-docs.scss

/* navigation menu toggle */

.toggle-menu {
	display: none;
}
.toggle-menu:not(:checked) ~ .menu {
	display: none;
}
.toggle-menu__label {
	display: flex;
	align-items: center;
	font-weight: 900;
	gap: 0.25rem;
	text-transform: uppercase;
}


.toggle-menu__label {
	margin-block-end: 2em
}

/* navigation menu */

.docs-nav {
	padding-block: 1em;
	#search-form {
		margin-block-end: 2em;
	}
	.menu {
		margin-block-start: 1em;
		> li {
			margin-block-end: 2em;
			font-weight: 700;
		}
		> details summary {
			margin-block-end: 1em;
		}
		display: flex;
		flex-flow: column;
	}
	details {
		display: flex;
		margin-block-end: 1em;
		&[open] {margin-block-end: 2em;}
	}
	summary {
		font-weight: 700;
		cursor: pointer;
	}
	.sub-menu {
		margin-inline-start: 1em;
		display: flex;
		flex-flow: column;
		gap: 0.5rem;
		li {
			line-height: 1.5;
		}
		.sub-menu {
			margin-block-start: 0.5rem;
			margin-inline-start: 2em;
		}
		li::marker {
			content: '→ ';
		}
		.sub-menu li::marker {
			content: '↳ ';
		}
		li.active::marker {
			content: '• ';
		}
	}
	.active > a {
		font-weight: 700;
		text-decoration: none;
		color: var(--ui-text-bold);
		transition:
			color var(--color-crossfade-duration) var(--color-crossfade-ease);
	}
}

/* top of menu link should show only when focused */

#menu {margin-block-end: 1em;}
#menu:not(:focus) {
	clip: rect(0 0 0 0); 
	clip-path: inset(50%);
	block-size: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap; 
	inline-size: 1px;
}