1 files changed, 71 insertions, 0 deletions
diff --git a/css/navBar.scss b/css/navBar.scss
new file mode 100644
index 0000000..a915415
--- /dev/null
+++ b/css/navBar.scss
@@ -0,0 +1,71 @@
+#navBar {
+	backdrop-filter:  blur(1rem);
+	background-color: color-mix(in srgb, var(--backgroundColour), transparent 50%);
+	box-shadow:       $shadow;
+	color:            var(--textColour);
+	display:          flex;
+	gap:              1rem;
+	left:             0;
+	min-height:       calc(100vh + 1rem);
+	padding:          1rem;
+	padding-top:      4rem;
+	position:         absolute;
+	transform:        translateX(-100%);
+	transition:       transform $navBarSlideDuration;
+	width:            50%;
+	z-index:          127;
+
+	&[data-state = "Visible"] {
+		transform: translateX(0);
+	}
+
+	p.clickable, a {
+		color:                 var(--textColour);
+		cursor:                pointer;
+		display:               block;
+		font-weight:           bold;
+		text-decoration:       underline;
+		text-decoration-color: #00000000;
+		transition:            text-decoration-color 0.125s;
+
+		&:hover {
+			text-decoration-color: var(--textColour);
+		}
+	}
+
+	section {
+		display:        flex;
+		flex-direction: column;
+		gap:            0.5em;
+
+		p.heading {
+			text-align: center;
+
+			&::after {
+				background-color: var(--textColour);
+				border-radius:    0.25rem;
+				content:          "";
+				display:          block;
+				height:           0.25rem;
+				margin-top:       0.5rem;
+				width:            100%;
+			}
+		}
+	}
+
+	#themeToggler {
+		bottom:    2rem;
+		position:  absolute;
+		left:      50%;
+		transform: translateX(-50%);
+	}
+
+	@media (orientation: landscape) {
+		border-bottom-right-radius: 1rem;
+		border-top-right-radius:    1rem;
+	}
+
+	@media (orientation: portrait) {
+		width: 100%;
+	}
+}