first steps, creating nav bar + inital work on layouts

assets/styling/navbar.scss

@@ -0,0 +1,61 @@
+@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;
+		}
+	}
+}