feat: add chevrons and arrow indicator, minor changes

public/assets/css/documentation.css

@@ -28,6 +28,11 @@ button#openSidebar {
 	margin: 20px;
 	margin-left: 0;
 }
+.docs-wrapper header::before {
+	content: none;
+	background: none;
+	pointer-events: none;
+}
 .docs-wrapper header a.logo-link {
 	display: none;
 }

public/assets/css/partials/header.css

@@ -7,11 +7,38 @@ header {
 	width: 95%;
 	margin-top: 35px;
 	z-index: 60;
-	transition: box-shadow 300ms, background 300ms;
+	transition: box-shadow 180ms, background 180ms;
+}
+header::before {
+	content: "";
+	position: absolute;
+	top: -35px;
+	left: -10vw;
+	width: 120vw;
+	height: calc(100% + 35px + 35px);
+	background: rgba(27, 31, 59, 0.98);
 }
 header.dropdown-active {
 	box-shadow: 0 0 0 600vw rgba(27, 31, 59, 0.8);
-	background: rgba(27, 31, 59, 0.8);
+}
+header .dropdown-arrow {
+	opacity: 0;
+	position: absolute;
+	width: 0;
+	z-index: 1;
+	border-style: solid;
+	border-color: var(--bg-shade-3) transparent;
+	border-width: 0 14px 14px;
+	bottom: -26px;
+	margin-left: -10px;
+	margin-bottom: -10px;
+	transition: left 180ms, margin-bottom 180ms, opacity 180ms;
+}
+
+header.dropdown-active .dropdown-arrow {
+	opacity: 1;
+	display: block;
+	margin-bottom: 0;
 }
 header a {
 	text-decoration: none;
@@ -19,6 +46,7 @@ header a {
 header .logo-link,
 header .logo-link svg {
 	display: block;
+	z-index: 1;
 }
 
 header nav {
@@ -57,7 +85,8 @@ header nav button {
 	margin: 0 17px;
 	padding: 0;
 }
-header nav button:hover {
+header nav button:hover,
+header nav button.active {
 	background: none;
 	color: var(--text-shade-3);
 }
@@ -80,6 +109,24 @@ header nav button.donate:hover {
 	background: var(--accent-shade-0);
 	color: #fff;
 }
+header nav button.dropdown-button::after {
+	content: "";
+	display: inline-block;
+	align-items: center;
+	width: 16px;
+	height: 8px;
+	bottom: 0;
+	margin-left: 0.3rem;
+	background: no-repeat center url("/assets/images/down-arrow.svg");
+	filter: brightness(0) invert(78%) sepia(2%) saturate(5488%) hue-rotate(197deg)
+		brightness(88%) contrast(93%);
+
+	transition: transform 100ms;
+}
+header nav button.dropdown-button.active::after {
+	transform: scaleY(-1);
+	filter: none;
+}
 
 header div.dropdown {
 	position: absolute;
@@ -92,7 +139,7 @@ header div.dropdown {
 	width: 420px;
 	height: 0;
 	overflow-y: hidden;
-	transition: height 300ms;
+	transition: height 180ms;
 }
 
 header div.dropdown-content {
@@ -101,7 +148,7 @@ header div.dropdown-content {
 	width: 100%;
 	opacity: 0;
 	pointer-events: none;
-	transition: opacity 350ms;
+	transition: opacity 180ms;
 }
 header div.dropdown-content.show {
 	opacity: 1;

public/assets/js/header-handler.js

@@ -3,19 +3,34 @@
 const header = document.querySelector('header');
 const dropdownButtonWrapper = document.querySelector('.dropdown-button-wrapper');
 const dropdown = document.querySelector('header div.dropdown');
+const allDropdownButtons = dropdownButtonWrapper.querySelectorAll('button.dropdown-button');
 function navbarDropdownHandler(buttonID) {
 	const allDropdownContents = dropdown.querySelectorAll('div.dropdown-content');
 	const dropdownContent = document.querySelector(`.dropdown-content#${buttonID}-dropdown-content`);
+	const dropdownButton = document.querySelector(`button.dropdown-button#${buttonID}-button`);
+	const dropdownArrow = document.querySelector('.dropdown-arrow#navbar-dropdown-arrow');
 
 	// hide all contents
 	allDropdownContents.forEach((content) => {
 		content.classList.remove('show');
 	});
+	// deselect all buttons
+	allDropdownButtons.forEach((button) => {
+		button.classList.remove('active');
+	});
 	// show the content of the clicked button
 	dropdownContent.classList.add('show');
+	// select the clicked button
+	dropdownButton.classList.add('active');
 	// set the dropdown height to the height of the content
 	dropdown.style.height = `${dropdownContent.offsetHeight}px`;
 
+	// move the arrow to the selected button
+	dropdownArrow.style.left = `${dropdownButton.offsetLeft + dropdownButton.offsetWidth / 2 - 5}px`;
+
+	const buttonRect = dropdownButton.getBoundingClientRect();
+	const dropdownRect = dropdown.getBoundingClientRect();
+
 	// dim the rest of the page
 	header.classList.add('dropdown-active');
 
@@ -35,6 +50,10 @@ dropdownButtonWrapper.addEventListener('mouseleave', (e) => {
 	if (targetElement !== dropdown && !dropdown.contains(targetElement)) {
 		dropdown.style.height = '0';
 		header.classList.remove('dropdown-active');
+		// deselect all buttons
+		allDropdownButtons.forEach((button) => {
+			button.classList.remove('active');
+		});
 	}
 });
 dropdown.addEventListener('mouseleave', (e) => {
@@ -42,6 +61,10 @@ dropdown.addEventListener('mouseleave', (e) => {
 	if (targetElement !== dropdownButtonWrapper && !dropdown.contains(targetElement)) {
 		dropdown.style.height = '0';
 		header.classList.remove('dropdown-active');
+		// deselect all buttons
+		allDropdownButtons.forEach((button) => {
+			button.classList.remove('active');
+		});
 	}
 });
 

views/partials/header.handlebars

@@ -41,6 +41,8 @@
 			</button>
 		</a>
 
+		<div class="dropdown-arrow" id="navbar-dropdown-arrow"></div>
+
 		<div class="dropdown" id="navbar-dropdown">
 			<div class="dropdown-content" id="about-dropdown-content">
 				<div class="top">