sidebar nav

app/Nav.tsx

@@ -1,5 +1,6 @@
 import React from "react";
+import styles from "../styles/Nav.module.scss";
 
 export default function Nav() {
-	return <nav>Nav</nav>;
+	return <nav className={styles.nav}>Nav</nav>;
 }

app/tutorials/[tutorialId]/Sidebar.tsx

@@ -1,5 +1,9 @@
 import React from "react";
-
+import styles from "../../../styles/Sidebar.module.scss";
 export default function Sidebar() {
-	return <div>Sidebar</div>;
+	return (
+		<div className={styles.sidebar}>
+			<div className={styles.stickyContainer}>Sidebar</div>
+		</div>
+	);
 }

styles/Nav.module.scss

@@ -0,0 +1,5 @@
+.nav {
+	background-color: rgb(12, 12, 14);
+	height: 60px;
+	margin-bottom: 50px;
+}

styles/Sidebar.module.scss

@@ -0,0 +1,7 @@
+@import "variables.scss";
+.sidebar {
+	.stickyContainer {
+		position: sticky;
+		top: $grid-sticky-top;
+	}
+}

styles/Tutorial.module.scss

@@ -1,10 +1,10 @@
 @import "variables.scss";
 .tutorial {
 	display: grid;
-	gap: 20px;
+	gap: 70px;
 	grid-template-columns: 200px minmax(0px, 1fr) 200px;
 	margin: 0px auto;
-	max-width: 1500px;
+	max-width: 1800px;
 	padding: 0px 24px;
 
 	.tutorialContent {
@@ -28,6 +28,10 @@
 			img {
 				max-width: 100%;
 			}
+			p {
+				margin-top: 1em;
+				line-height: 1.5;
+			}
 		}
 	}
 }

styles/TutorialContentTable.module.scss

@@ -3,7 +3,8 @@
 .tutorialContentTable {
 	.stickyContainer {
 		position: sticky;
-		top: 60px;
+		top: $grid-sticky-top;
+
 		.list {
 			align-items: flex-start;
 			display: flex;

styles/variables.scss

@@ -9,3 +9,6 @@ $color-font-link: #2294ff;
 $md-color-font: mix($color-overlay-mix, $color-font, 5%);
 $md-color-headline: mix($color-overlay-mix, $color-font, 20%);
 $md-color-hr: mix($color-overlay-mix, $color-background-body, 20%);
+
+/* Grid */
+$grid-sticky-top: 60px;