@miyagi/core/frontend/assets/css/main/menu.css

miyagi is a component development tool for JavaScript template engines.

@import url("./menu/config-switchers.css");
@import url("./menu/goto.css");
@import url("./menu/nav.css");
@import url("./menu/search.css");
@import url("./menu/title.css");

/** @define Menu; */

.Menu {
	--bar-size: 2rem;
	--bar-background: var(--color-Menu-background)
		linear-gradient(
			to right,
			var(--color-MenuBar-background) var(--bar-size),
			transparent var(--bar-size)
		);
	--menu-spacing: 0.5rem;
	--outline: 0.1875rem solid var(--color-Text);
	--outline-offset: 0.125rem;

	display: flex;
	background: var(--bar-background);
	grid-area: nav;
	font-size: 0.875em;
	position: relative;
}

.Menu :where(:focus-visible) {
	outline: var(--outline);
}

.Menu-content {
	display: flex;
	flex-direction: column;
}

.Menu-nav {
	flex: 1;
	overflow-y: auto;
}

@media (width <= 40rem) {
	.Menu {
		--toggle-size: 4rem;

		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.Menu-content {
		flex: 0 0 100%;
		block-size: calc(100dvb - var(--toggle-size));
		position: fixed;
		inset-block-start: var(--toggle-size);
		inset-inline: 0;
		background: var(--bar-background);
	}

	.Menu-search {
		position: relative;
	}

	.Menu-toggleMobileMenu {
		display: block;
		block-size: var(--toggle-size);
		padding: 1rem;
		position: relative;
		inline-size: var(--toggle-size);
	}

	.Menu-toggleMobileMenu[aria-expanded="false"] ~ .Menu-content {
		display: none;
	}

	.Menu-toggleMobileMenu::after {
		border: var(--toggle-border);
		border-top-width: var(--toggle-borderWidth);
		border-inline-end-width: var(--toggle-borderWidth);
		content: "";
		display: block;
		font-size: 0.75em;
		block-size: var(--toggle-height);
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: 50%;
		transition: var(--toggle-transition);
		inline-size: var(--toggle-width);
	}

	.Menu-toggleMobileMenu[aria-expanded="false"]::after {
		transform: var(--toggle-transition-closed);
	}

	.Menu-toggleMobileMenu[aria-expanded="true"]::after {
		transform: var(--toggle-transition-opened);
	}
}

@media (width > 40rem) {
	.Menu {
		flex-direction: column;
		block-size: 100vh;
	}

	.Menu-toggleMobileMenu {
		display: none;
	}

	.Menu-content {
		flex: 1;
		overflow: hidden;
	}
}