Improve sidebar layout

Author: modularcoder

src/Dashboard/Dashboard.tsx

@@ -6,7 +6,7 @@ type DashboardProps = {}
 const content = faker.lorem.paragraphs(50)
 
 const Dashboard: React.FC<DashboardProps> = () => {
-  return <div className="p-10">{content}</div>
+  return <div className="px-14 py-8">{content}</div>
 }
 
 export default Dashboard

src/_common/TheFooter/TheFooter.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 const TheFooter: React.FC = () => {
-  return <div className="TheFooter px-4 py-2">The Footer</div>
+  return <div className="TheFooter px-8 py-4">The Footer</div>
 }
 
 export default TheFooter

src/_common/TheHeader/TheHeader.tsx

@@ -11,7 +11,7 @@ const TheHeader: React.FC<TheHeaderProps> = ({ onSidebarToggleClick }) => {
     <div
       className="
         TheHeader
-        absolute flex w-full h-full items-center px-4
+        absolute flex w-full h-full items-center px-8
          bg-white
       "
     >

src/_common/TheSidebar/SidebarNav/SidebarNav.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+const links = [{ name: 'Dashboard' }, { name: 'Administration' }]
+
+const SidebarNav = () => {
+  return (
+    <div id="AppSidebarNav" className="px-4 py-4">
+      {links.map((link) => (
+        <a
+          href="/core/dashboard"
+          className="block px-4 py-3 pl-12 mb-2 hover:text-purple-500 rounded-lg hover:bg-purple-50 font-semibold"
+          key={link.name}
+        >
+          {link.name}
+        </a>
+      ))}
+    </div>
+  )
+}
+
+export default SidebarNav

src/_common/TheSidebar/SidebarNav/index.ts

@@ -0,0 +1 @@
+export { default } from './SidebarNav'

src/_common/TheSidebar/TheSidebar.tsx

@@ -1,18 +1,20 @@
 import React, { memo } from 'react'
 import BaseLogo from '_common/BaseLogo'
+import SidebarNav from './SidebarNav'
 
 type TheSidebarProps = {}
 
 const TheSidebar: React.FC<TheSidebarProps> = () => {
   return (
     <div className="TheSidebar absolute h-full w-full flex flex-col">
-      <div className="h-16 flex items-center top-0 px-4">
+      <div className="h-20 flex items-center top-0 px-4">
         <BaseLogo size={30} className="ml-10 mr-4 text-purple-500" />{' '}
         ModularAdmin
       </div>
-      <div id="AppSidebarNav" className="" style={{ height: 300 }}>
-        Nav Menu
+      <div className="SidebarNavContainer flex-1 overflow-y-auto ">
+        <SidebarNav />
       </div>
+      <div className="SidebarFooterContainer p-4">Sidebar Footer</div>
     </div>
   )
 }

src/_layouts/DashboardLayout/DashboardLayout.tsx

@@ -52,9 +52,16 @@ const DashboardLayout: React.FC = ({ children }) => {
         </div>
       </div>
       {/* Content */}
-      <div id="AppContentContainer" className="w-full min-h-screen flex-auto">
+      <div
+        id="AppContentContainer"
+        className="w-full min-h-screen flex-auto"
+        style={{ backgroundColor: 'rgb(114 142 156 / 5%)' }}
+      >
         {/* Header */}
-        <div id="AppHeaderContainer" className="w-full h-16 sticky top-0 self-start">
+        <div
+          id="AppHeaderContainer"
+          className="w-full h-20 sticky top-0 self-start"
+        >
           <TheHeader onSidebarToggleClick={handleSidebarToggleClick} />
         </div>
         {/* Page */}