SideBar

Author: CodeStix

components/SideBar.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import styled from "styled-components";
+
+const Container = styled.div`
+    margin: 2em 0;
+    position: sticky;
+    top: 1em;
+`;
+
+const Item = styled.div`
+    padding: 0.4em 0.8em;
+    color: #111;
+    border-bottom: 1px solid #0002;
+    cursor: pointer;
+
+    &:hover {
+        transition: 100ms;
+        background: #0001;
+        color: #0972d4;
+    }
+`;
+
+export function SideBar() {
+    return (
+        <Container>
+            <Item>Item 1</Item>
+            <Item>Item 2</Item>
+        </Container>
+    );
+}

pages/index.tsx

@@ -1,15 +1,28 @@
 import Head from "next/head";
 import React from "react";
+import styled from "styled-components";
 import { CenterContainer } from "../components/CenterContainer";
 import { NavBar } from "../components/NavBar";
+import { SideBar } from "../components/SideBar";
+
+const Container = styled.div`
+    display: grid;
+    gap: 2em;
+    grid-template-columns: 250px 1fr;
+`;
 
 export default function Home() {
     return (
         <>
             <NavBar />
             <CenterContainer style={{ margin: "2em 0" }}>
-                <h2>Welcome to the docs!</h2>
-                <p>Here you can find the docs</p>
+                <Container>
+                    <SideBar />
+                    <div>
+                        <h2>Welcome to the docs!</h2>
+                        <p>Here you can find the docs</p>
+                    </div>
+                </Container>
             </CenterContainer>
         </>
     );