Social-extra

V248-11

En menu met zowel navigatie items als een hamburger. Als je ook socials wilt weergeven, voeg onderstaande php code toe aan het bestand: "sections/navigation.overlay".

Hoe te gebruiken?

Zet in het config bestand de "navbar.style" aan naar "social-extra en zet het "navbar.primary" op het menu ID die je wilt weergeven naast de hamburger. Vul daarnaast ook "navbar.secondary" in voor het menu achter de hamburger. Laad vervolgs onderstaande CSS in om van start te gaan.

Voorvertoning

Alvast beginnen met een basis opmaak?

PHP
Kopiëren<?php

/** @var \Core\Config */
$config = Locator::get('Config');
?>
<div class="nav-socials mt-4">
	<?php foreach ($config->get('contact.socials', []) as $name => $link) { ?>
		<?php if (!empty($link)) { ?>
			<a class="text-decoration-none" href="<?= $link ?>" target="_blank" rel="noopener" title="<?= \Util\CaseStyles::kebabToName($name) ?> link">
				<?= NCCMS::getView('cms/icon', 'fa-brands fa-fw fa-lg fa-' . $name) ?>
			</a>
		<?php } ?>
	<?php } ?>
</div>

CSS
Kopiërenheader.nav-header .navbar-toggler {
	z-index: 1000;
	position: relative;
}

header.nav-header {
	z-index: 100;
}

header.nav-header .navbar-overlay {
	position: fixed;
	top: 0;
	left: 100%;
	right: 0;
	bottom: 0;
	z-index: 500;

	transform: translateX(0%);
	transition: transform, left 400ms ease-in-out;
}

header.nav-header .navbar-overlay.show {
	left: 0%
}

@media only screen and (min-width: 992px) {
	header.nav-header .navbar-overlay.show {
		left: 65%;
	}
}

@media only screen and (min-width: 1440px) {
	header.nav-header .navbar-overlay.show {
		left: 60%;
	}
}

header.nav-header .navbar-overlay>.navbar-overlay-content {
	max-height: 100%;
	overflow-y: scroll;
}

header.nav-header .navbar-overlay-content {
	padding-right: calc(((100vw - var(--container-width)) / 2) + 15px);
	padding-top: 3.5rem;
}

header.nav-header .navbar-overlay-content .nav-link {
	color: black;
}

header.nav-header .navbar-overlay-content .title {
	position: relative;
	font-size: 2em;
}

header.nav-header .navbar-overlay-content .nav-contact{
	white-space: nowrap;
}

header.nav-header .nav-overlay-backdrop {
	background-color: #0004;
	position: fixed;
	right: 0;
	top: 0;
	height: 100vh;
	width: 100vw;
	z-index: 101;
	opacity: 0;
	pointer-events: none;
	transition: opacity 400ms ease-in-out;
}

header.nav-header .navbar-overlay.show+.nav-overlay-backdrop {
	opacity: 1;
	pointer-events: all;
}

header.nav-header .navbar-overlay .nav-link.active .nav-title::before {
	content: "";
	height: 22px;
	width: 3px;
	position: absolute;
	left: 10px;
	top: var(--header-navbar-indicator-y);
	transition: all 150ms cubic-bezier(0.46, -0.01, 0.49, 1.29);
}

@media screen and (min-width: 576px) {
	header.nav-header .navbar-overlay-content {
		padding-left: 50px;
	}

	header.nav-header .navbar-overlay .nav-link.active .nav-title::before {
		left: 50px;
	}
}

@media screen and (min-width: 992px) {
	#adminbar+* header.nav-header .navbar-overlay {
		padding-top: 3.5rem;
	}
}

header.nav-header .nav-link.active .nav-title::before {
	background-color: var(--primary);
}