Updated: Organised dashboard modules

src/components/Sidebar/index.js

@@ -1,4 +1,4 @@
-import styles from './dashboard.module.css';
+import styles from './sidebar.module.css';
 
 export default function Sidebar() {
   return (

src/components/Sidebar/sidebar.module.css

@@ -0,0 +1,15 @@
+.navSidebar {
+  grid-column: 1;
+  background: #2d373c;
+  min-height: 100vh;
+  padding: 40px;
+}
+
+.sidebarBranding {
+  font-style: normal;
+  font-weight: bold;
+  font-size: 36px;
+  line-height: 44px;
+
+  color: #ffffff;
+}

src/components/breadcrumbs/breadcrumbs.module.css

@@ -0,0 +1,4 @@
+.breadcrumbs {
+  grid-row: 2;
+  padding: 25px 48px;
+}

src/components/breadcrumbs/index.js

@@ -0,0 +1,10 @@
+import styles from './breadcrumbs.module.css';
+import React from 'react';
+
+export default function Breadcrumbs() {
+  return (
+    <div className={styles.breadcrumbs}>
+      breadcrumbs {'>'} are {'>'} here
+    </div>
+  );
+}

src/components/topbar/index.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import styles from './topbar.module.css'
+
+export default function TopBar() {
+  return (
+    <div className={styles.topBar}>search comes here</div>
+  )
+}

src/components/topbar/topbar.module.css

@@ -0,0 +1,5 @@
+.topBar {
+  grid-row: 1;
+  padding: 24px 48px;
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.08);
+}

src/layouts/dashboard/dashboard.module.css

@@ -4,39 +4,12 @@
   grid-template-columns: 300px auto;
 }
 
-.navSidebar {
-  grid-column: 1;
-  background: #2d373c;
-  min-height: 100vh;
-  padding: 40px;
-}
-
-.sidebarBranding {
-  font-style: normal;
-  font-weight: bold;
-  font-size: 36px;
-  line-height: 44px;
-
-  color: #ffffff;
-}
-
 .mainContent {
   grid-column: 2;
   display: grid;
   grid-template-rows: 108px 72px auto;
 }
 
-.topBar {
-  grid-row: 1;
-  padding: 24px 48px;
-  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.08);
-}
-
-.breadcrumbs {
-  grid-row: 2;
-  padding: 25px 48px;
-}
-
 .content {
   grid-row: 3;
   padding: 24px 48px;

src/layouts/dashboard/index.js

@@ -1,16 +1,16 @@
 import { Outlet } from 'react-router-dom';
+import Breadcrumbs from '../../components/breadcrumbs';
+import Sidebar from '../../components/Sidebar';
+import TopBar from '../../components/topbar';
 import styles from './dashboard.module.css';
-import Sidebar from './Sidebar';
 
 export default function Dashboard() {
   return (
     <div className={styles.dashboardGrid}>
       <Sidebar />
       <div className={styles.mainContent}>
-        <div className={styles.topBar}>search comes here</div>
+        <TopBar />
-        <div className={styles.breadcrumbs}>
+        <Breadcrumbs />
-          breadcrumbs {'>'} are {'>'} here
-        </div>
         <div className={styles.content}>
           <Outlet />
         </div>