Fix content not being visible

src/App.scss

@@ -1,6 +1,10 @@
 @use 'tailwindcss' as *;
 @use '@fontsource/roboto' as *;
 
+$backgroundColor: #131313;
+
 body {
   font-family: 'Roboto', sans-serif;
+  background-color: $backgroundColor;
+  color: white;
 }

src/App.tsx

@@ -7,9 +7,11 @@ export default function App () {
   return (
     <HashRouter>
       <Sidebar />
-      <Routes>
+      <main style={{ marginLeft: '15rem' }}>
-        <Route path='/' element={<Home />} />
+        <Routes>
-      </Routes>
+          <Route path='/' element={<Home />} />
+        </Routes>
+      </main>
     </HashRouter>
   )
 }

src/componets/Sidebar.css

@@ -1,7 +1,7 @@
 @import 'tailwindcss';
 
 .sidebar {
-  @apply w-60 h-screen bg-[#191919] flex flex-col;
+  @apply fixed top-0 left-0 w-60 h-screen bg-[#191919] flex flex-col;
 }
 
 .logo {