@brendonovich/kobalte__solidbase/dist/default-theme/components/Header.module.css

Fully featured, fully customisable static site generation for SolidStart

.header {
	position: sticky;
	top: 0;
	width: 100dvw;
	height: var(--sb-header-height);
	z-index: 50;
	display: flex;
	align-items: stretch;
	flex-direction: column;
	padding: 0 1.5rem;
	background: var(--sb-background-color);
	border-bottom: 2px solid #e4e4e7;
	grid-column-start: span 2;
	border-bottom: 1px solid
		color-mix(in hsl, var(--sb-decoration-color) 15%, transparent);
	font-size: 14px;

	& > div {
		display: flex;
		flex: 1;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}
}

@media screen and (max-width: 1100px) {
	.header {
		padding: 0 1rem;
	}

	html:has(.header .mobile-bar) {
		--sb-header-height: 6.25rem !important;
	}
}

@media screen and (min-width: 1100px) {
	.mobile-bar {
		display: none !important;
	}
}

.logo-link {
	text-decoration: none;
	color: var(--sb-heading-color);
	font-family: var(--sb-font-headings);
	font-size: 1.25em;
}

.mobile-menu,
.mobile-nav-menu {
	appearance: none;
	outline: none;
	border: none;
	background: transparent;
	border-radius: var(--sb-border-radius);
	color: var(--sb-text-color);
	font-size: 0.8rem;
	padding: 0.5rem;
	cursor: var(--sb-button-cursor);
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 -0.5rem;
	text-decoration: none;
	transition-property: background-color, color;
	transition-timing-function: var(--sb-transition-timing);
	transition-duration: 0.15s;

	&:hover,
	&:focus-visible {
		color: var(--sb-heading-color);
		background: color-mix(
			in hsl,
			var(--sb-link-underline-color) 20%,
			transparent
		);
	}

	&.active {
		color: var(--sb-active-link-color);
	}

	& svg {
		width: 1rem;
		height: 1rem;
	}
}

.mobile-menu {
	& > svg {
		transition-property: transform;
		transition-timing-function: var(--sb-transition-timing);
		transition-duration: 0.15s;
	}

	&[data-expanded] > svg {
		transform: rotateX(180deg);
	}
}

.top-nav {
	position: relative;
	display: flex;
	flex-direction: row;
	gap: 1rem;
}

@media screen and (max-width: 500px) {
	.top-nav {
		> *:not(.mobile-nav-menu) {
			display: none !important;
		}

		.mobile-nav-menu {
			display: block;
		}
	}
}

.mobile-nav-menu {
	position: relative;
	display: none;

	> .menu-icon,
	> .close-icon {
		transition-property: opacity;
		transition-timing-function: var(--sb-transition-timing);
		transition-duration: 0.25s;
	}

	> .menu-icon {
		position: absolute;
		left: .5rem;
		top: .5rem;
	}

	> .close-icon {
		pointer-events: none;
		opacity: 0;
	}

	&[data-expanded] {
		> .menu-icon {
			pointer-events: none;
			opacity: 0;
		}

		> .close-icon {
			pointer-events: all;
			opacity: 1;
		}
	}
}

.navLink {
	text-decoration: none;
	padding: 0.5rem;
	border: none;
	outline: none;
	color: var(--sb-text-color);
	border-radius: var(--sb-border-radius);
	cursor: var(--sb-button-cursor);
	font-weight: 500;
	transition-property: background-color, opacity, color;
	transition-timing-function: var(--sb-transition-timing);
	transition-duration: 0.15s;

	&:hover {
		background: color-mix(in hsl, var(--sb-text-color) 7.5%, transparent);
	}

	&[data-matched] {
		color: var(--sb-active-link-color);

		&:hover,
		&:focus-visible {
			color: var(--sb-text-color);
			background-color: color-mix(
				in hsl,
				var(--sb-active-link-color) 50%,
				transparent
			);
		}
	}
}

.mobile-bar {
	flex: none !important;
	border-top: 1px solid
		color-mix(in hsl, var(--sb-decoration-color) 15%, transparent);
	margin: 0 -4rem;
	padding: 0.25rem 4rem;
}

.toc-container,
.nav-container {
	height: 0;
	width: 100dvw;
	left: -1rem;
	top: 0;
	position: relative;
	overflow: visible;
	flex: 0 !important;
}

.toc-popup,
.nav-popup {
	z-index: 51;
	width: 100dvw;
	max-height: 100dvh;
	background: var(--sb-background-color);
	overflow-y: auto;
	animation: contentHide 50ms ease-out forwards;
	transform-origin: top;
	padding: 1rem;
	border: 1px solid
		color-mix(in hsl, var(--sb-decoration-color) 15%, transparent);
	border-left: none;
	border-right: none;

	&[data-expanded] {
		animation: contentShow 50ms ease-out forwards;
	}

	& * {
		opacity: 1 !important;
	}
}

.nav-popup {
	height: calc(100dvh - var(--sb-header-height) * 0.55);
	display: flex;
	flex-direction: column;
	gap: .5rem;
	align-items: center;

	> *:not(:last-child) {
		border-bottom: 1px solid
			color-mix(in hsl, var(--sb-decoration-color) 15%, transparent);
		width: 80dvw;
	}
}

.nav-popup-selectors {
	display: flex;
	gap: .5rem;
	justify-content: space-evenly;
	align-items: center;
}

@keyframes contentShow {
	from {
		opacity: 0;
		transform: translateY(-1rem);
	}

	to {
		opacity: 1;
	}
}

@keyframes contentHide {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
		transform: translateY(-1rem);
	}
}