@import "mixins";
@import "colors";

nav {
	display: grid;
	grid-template-areas: "Branding" "Nav" "Widgets" "Utils";
	grid-template-rows: auto 1fr auto auto;
	background-color: $featureColor;
	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;
	}
}