@import "mixins.scss";
@import "colors.scss";

nav {
	display: grid;
	grid-template-areas: "Branding" "Nav" "Widgets" "Utils";
	grid-template-rows: auto 1fr auto auto;
	background-color: $mainAccent;
	height: 100dvh;
	position: fixed;
	width: $navBarSize;
	box-shadow: 0 0 3px #000;
	gap: 20px;
	padding: 20px 0;

	> * {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
	}

	.branding {
		grid-area: Branding;

		img {
			width: $navBarSize;
			object-fit: contain;
		}
	}

	.mainNav {
		grid-area: Nav;
	}

	.widgets {
		grid-area: Widgets;
	}

	.utils {
		grid-area: Utils;
	}

	.navItem {
		height: $navBarSize;
		width: $navBarSize;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: 0.2s ease-out background;

		&:active,
		&[aria-current="page"] {
			background-color: $mainAccentDark;
		}

		&:hover {
			background-color: $mainAccentLight;
		}
	}
}