💄Empty && Drawer(Sidebar)

noeypatt · Apr 5, 2020 · 602ffad · 602ffad · vercel · Apr 5, 2020
1 parent f100bad
commit 602ffad
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 37 deletions.
diff --git a/components/layout/dashboard.js b/components/layout/dashboard.js
@@ -11,11 +11,11 @@ const Dashboard = props => {
 
     const [main, setMain] = useState(
         [
-            { name: "ข้อมูลทั่วไป", href: "/main" },
-            { name: "ข้อมูลด้านสุขภาพ", href: "/main/hospital" },
-            { name: "ข้อมูลด้านสังคม", href: "/main/social" },
-            { name: "ข้อมูลด้านเศรษฐกิจ", href: "/main/economy" },
-            { name: "ข้อมูลด้านการช่วยเหลือ", href: "/main/service" },
+            { name: "เมนู" },
+            // { name: "ข้อมูลด้านสุขภาพ", href: "/main/hospital" },
+            // { name: "ข้อมูลด้านสังคม", href: "/main/social" },
+            // { name: "ข้อมูลด้านเศรษฐกิจ", href: "/main/economy" },
+            // { name: "ข้อมูลด้านการช่วยเหลือ", href: "/main/service" },
 
         ]
     )

diff --git a/components/layout/nav.js b/components/layout/nav.js
@@ -1,13 +1,15 @@
 import React, { useState, useEffect } from 'react'
 import Link from 'next/link'
 import { useMediaQuery } from 'react-responsive';
+import Sidebar from './sidebar';
 
 const NavBar = props => {
 
     const tab = props.tab
     const name = props.name
     const [navbar, setNavbar] = useState("")
     const [status, setStatus] = useState(false)
+    const [visible, setVisible] = useState(false)
     const isBigScreen = useMediaQuery({ minDeviceWidth: 769 })
     const isSmallScreen = useMediaQuery({ maxDeviceWidth: 768.99 })
 
@@ -23,6 +25,10 @@ const NavBar = props => {
         }
     }
 
+    const showDrawer = () => {
+        setVisible(true)
+    };
+
     useEffect(() => {
         window.onscroll = () => {
             if (window.scrollY <= 10)
@@ -83,21 +89,10 @@ const NavBar = props => {
                                         {
                                             tab.map((item, index) => {
                                                 return (
-                                                    <a href={item.href} key={index}>
-                                                        {
-                                                            item.name == "ติดต่อ" ?
-                                                                <p className="li-buttom-line">{item.name}</p>
-                                                                :
-                                                                item.name == "เข้าสู่หน้าหลัก" ?
-                                                                    <p className="li-buttom-line-active">{item.name}</p>
-                                                                    :
-                                                                    <React.Fragment>
-                                                                        <button className="btn">
-                                                                            <p>{item.name}</p>
-                                                                        </button>
-                                                                    </React.Fragment>
-                                                        }
-                                                    </a>
+                                                    <React.Fragment key={index}>
+                                                        <p className="li-buttom-line-active" onClick={showDrawer}>{item.name}</p>
+                                                        <Sidebar status={visible} />
+                                                    </React.Fragment>
                                                 )
                                             })
                                         }

diff --git a/components/layout/sidebar.js b/components/layout/sidebar.js
@@ -1,13 +1,12 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Drawer, Button, Radio } from 'antd';
-import Link from 'next/link';
 
 
 const Sidebar = props => {
 
+    const status = props.status
     const [visible, setVisible] = useState(false)
     const [placement, setPlacement] = useState('left')
-
     const [sidebar, setSidebar] = useState(
         [
             { name: "ข้อมูลทั่วไป", href: "/main" },
@@ -18,29 +17,37 @@ const Sidebar = props => {
         ]
     )
 
-    const showDrawer = () => {
-        setVisible(true)
-    };
+    useEffect(() => {
+        if (status) {
+            setVisible(true)
+        } else {
+            setVisible(false)
+        }
+
+    }, [status])
 
     const onClose = () => {
         setVisible(false)
     };
 
     return (
         <div>
-            <Button type="primary" onClick={showDrawer}>
-                Open
-        </Button>
+            {console.log("Visible: ", visible)}
             <Drawer
-                title="Basic Drawer"
+                title="เมนู"
                 placement={placement}
                 closable={false}
                 onClose={onClose}
                 visible={visible}
             >
-                <p>Some contents...</p>
-                <p>Some contents...</p>
-                <p>Some contents...</p>
+                {
+                    sidebar.map((item, index) => (
+                        <a key={index} href={item.href}>
+                            <p>{item.name}</p>
+                        </a>
+
+                    ))
+                }
             </Drawer>
         </div>
     )

diff --git a/styles/empty.scss b/styles/empty.scss
@@ -1,6 +1,7 @@
 $font-header: "Frank Ruhl Libre" !important;
 $font-color: #071d40 !important;
-$primary-color: #39b54a !important;
+$bg-color: linear-gradient(to left, #a6d254, #83d2ae);
+$border-bg-color: 1px solid #83d2ae;
 
 .warp-empty {
   display: flex;
@@ -63,14 +64,13 @@ $primary-color: #39b54a !important;
   h5 {
     cursor: pointer;
     background-color: white;
-    border: 1px solid $primary-color;
-    color: $primary-color;
+    border: $border-bg-color;
     border-radius: 2rem;
     padding: 1rem 2rem;
   }
   h5:hover {
     color: white !important;
-    background-color: $primary-color;
+    background: $bg-color;
   }
 
   @media (max-width: 768px) {