💄Dashboard

components/layout/dashboard.js

@@ -41,6 +41,7 @@
 // }
 // export default Dashboard
 import React, { useState } from 'react';
+import Link from 'next/link';
 import { Layout, Menu } from 'antd';
 import {
     MenuUnfoldOutlined,
@@ -50,6 +51,7 @@ import {
     UploadOutlined,
 } from '@ant-design/icons';
 
+
 const { Header, Sider, Content } = Layout;
 
 const Dashboard = () => {
@@ -77,7 +79,12 @@ const Dashboard = () => {
     return (
         <Layout>
             <Sider trigger={null} collapsible collapsed={collapsed}>
-                <div className="logo" />
+                <div className="logo">
+                    <Link href="/">
+                        <h2>Eldery DB</h2>
+                    </Link>
+
+                </div>
                 <Menu defaultSelectedKeys={['1']}>
                     {
                         sidebar.map((item, index) => (
@@ -90,20 +97,13 @@ const Dashboard = () => {
                 </Menu>
             </Sider>
             <Layout className="site-layout">
-                <Header className="site-layout-background" style={{ padding: 0 }}>
+                <Header className="site-layout-background">
                     {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                         className: 'trigger',
                         onClick: toggle,
                     })}
                 </Header>
-                <Content
-                    className="site-layout-background"
-                    style={{
-                        margin: '24px 16px',
-                        padding: 24,
-                        minHeight: 280,
-                    }}
-                >
+                <Content className="site-layout-background" >
                     Content
           </Content>
             </Layout>

styles/dashboard.scss

@@ -1,35 +1,58 @@
-#components-layout-demo-custom-trigger .trigger {
-    font-size: 18px;
-    line-height: 64px;
-    padding: 0 24px;
-    cursor: pointer;
-    transition: color 0.3s;
-}
+$font-header: "Frank Ruhl Libre" !important;
+$bg-color: white !important;
+$hover-color: #1890ff;
 
-#components-layout-demo-custom-trigger .trigger:hover {
-    color: #1890ff;
-}
+.ant-layout {
+    .logo {
+        margin: 1rem;
+        h2 {
+            font-family: $font-header;
+        }
+    }
 
-#components-layout-demo-custom-trigger .logo {
-    height: 32px;
-    margin: 16px;
-}
+    #components-layout-demo-custom-trigger .trigger {
+        font-size: 18px;
+        line-height: 64px;
+        padding: 0 24px;
+        cursor: pointer;
+        transition: color 0.3s;
+    }
 
-.site-layout .site-layout-background {
-    background: #fff;
-}
+    #components-layout-demo-custom-trigger .trigger:hover {
+        color: $hover-color;
+    }
 
-.ant-menu {
-    display: flex;
-    flex-direction: column;
-}
-.ant-layout-header {
-    display: flex;
-    align-items: center;
-    padding: 1rem !important;
-}
+    .site-layout .site-layout-background {
+        background: $bg-color;
+    }
+
+    .ant-menu {
+        display: flex;
+        flex-direction: column;
+        margin-top: 1rem;
+    }
+    .ant-layout-header {
+        display: flex;
+        align-items: center;
+        padding: 1rem !important;
+    }
+
+    .ant-menu-inline-collapsed > .ant-menu-item {
+        display: flex;
+        justify-content: center;
+    }
+
+    .ant-layout-sider {
+        background: $bg-color;
+    }
+
+    .ant-layout-content {
+        margin: 24px 16px;
+        padding: 24;
+        min-height: 280;
+    }
+
+    // .site-layout-background {
 
-.ant-menu-inline-collapsed > .ant-menu-item {
-    display: flex;
-    justify-content: center;
+    // }
 }