🎉Nav-Sidebar

noeypatt · Apr 7, 2020 · 807b84f · 807b84f · vercel · Apr 7, 2020
1 parent 7accd9f
commit 807b84f
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 78 deletions.
diff --git a/components/layout/dashboard.js b/components/layout/dashboard.js
@@ -1,10 +1,10 @@
 import React, { useState } from 'react'
 import NavBar from './nav'
 import { useMediaQuery } from 'react-responsive'
+import Sidebar from './sidebar'
 
-const Dashboard = props => {
+const Dashboard = () => {
 
-    const [status, setStatus] = useState(false)
     const isSmallScreen = useMediaQuery({ maxDeviceWidth: 1023 })
 
     const [main, setMain] = useState(
@@ -23,20 +23,19 @@ const Dashboard = props => {
         ]
     )
 
-    const onConfirm = (order) => {
-        setStatus(order)
-
-        if (props.statusMain) {
-            props.onStatusMain(false)
-        }
-        else {
-            props.onStatusMain(true)
-        }
-    }
+    const [min, setMin] = useState(
+        [
+            { name: "ข้อมูลทั่วไป", href: "/main" },
+            { name: "ข้อมูลด้านสุขภาพ", href: "/main/hospital" },
+            { name: "ข้อมูลด้านสังคม", href: "/main/social" },
+            { name: "ข้อมูลด้านเศรษฐกิจ", href: "/main/economy" },
+            { name: "ข้อมูลด้านการช่วยเหลือ", href: "/main/service" },
+        ]
+    )
 
     return (
         <React.Fragment>
-            <NavBar name="main" tab={isSmallScreen ? sidebar : main} confirm={onConfirm} status={status} />
+            <NavBar name="main" tab={isSmallScreen ? min : main} sidebar={sidebar} />
         </React.Fragment>
     )
 }

diff --git a/components/layout/nav.js b/components/layout/nav.js
@@ -1,17 +1,20 @@
 import React, { useState, useEffect } from 'react'
 import Link from 'next/link'
 import { useMediaQuery } from 'react-responsive';
-import Sidebar from './sidebar';
+import { Drawer } from 'antd';
 
 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 })
+    const [visible, setVisible] = useState(false)
+    const [placement, setPlacement] = useState("left")
+
 
     const collapsible = async () => {
 
@@ -27,6 +30,10 @@ const NavBar = props => {
 
     const showDrawer = () => {
         setVisible(true)
+    }
+
+    const onClose = () => {
+        setVisible(false)
     };
 
     useEffect(() => {
@@ -91,7 +98,22 @@ const NavBar = props => {
                                                 return (
                                                     <React.Fragment key={index}>
                                                         <p className="li-buttom-line-active" onClick={showDrawer}>{item.name}</p>
-                                                        <Sidebar status={visible} />
+                                                        <Drawer
+                                                            title="เมนู"
+                                                            placement={placement}
+                                                            closable={false}
+                                                            onClose={onClose}
+                                                            visible={visible}
+                                                        >
+                                                            {
+                                                                props.sidebar.map((item, index) => (
+                                                                    <a key={index} href={item.href}>
+                                                                        <p>{item.name}</p>
+                                                                    </a>
+
+                                                                ))
+                                                            }
+                                                        </Drawer>
                                                     </React.Fragment>
                                                 )
                                             })
@@ -115,14 +137,14 @@ const NavBar = props => {
                                                     return (
                                                         <a key={index} href={item.href}>
                                                             {
-                                                                    item.name == "เข้าสู่หน้าหลัก" ?
-                                                                        <p className="li-buttom-line-active">{item.name}</p>
-                                                                        :
-                                                                        <React.Fragment>
-                                                                            <button className="btn">
-                                                                                <p>{item.name}</p>
-                                                                            </button>
-                                                                        </React.Fragment>
+                                                                item.name == "เข้าสู่หน้าหลัก" ?
+                                                                    <p className="li-buttom-line-active">{item.name}</p>
+                                                                    :
+                                                                    <React.Fragment>
+                                                                        <button className="btn">
+                                                                            <p>{item.name}</p>
+                                                                        </button>
+                                                                    </React.Fragment>
                                                             }
                                                         </a>
                                                     )

diff --git a/components/layout/sidebar.js b/components/layout/sidebar.js
@@ -1,12 +1,7 @@
 import React, { useState, useEffect } from 'react';
-import { Drawer } from 'antd';
 
+const Sidebar = () => {
 
-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,36 +13,12 @@ const Sidebar = props => {
     )
 
     useEffect(() => {
-        if (status) {
-            setVisible(true)
-        } else {
-            setVisible(false)
-        }
-
-    }, [status])
-
-    const onClose = () => {
-        setVisible(false)
-    };
+
+    }, [])
 
     return (
         <div className="warp-sidebar">
-            <Drawer
-                title="เมนู"
-                placement={placement}
-                closable={false}
-                onClose={onClose}
-                visible={visible}
-            >
-                {
-                    sidebar.map((item, index) => (
-                        <a key={index} href={item.href}>
-                            <p>{item.name}</p>
-                        </a>
-
-                    ))
-                }
-            </Drawer>
+
         </div>
     )
 }

diff --git a/pages/main.js b/pages/main.js
@@ -65,9 +65,6 @@ const MainPage = () => {
         setUserOauth(await JSON.parse(localStorage.getItem("myOauth")))
     }
 
-    const statusMain = (order) => {
-        setStatus(order)
-    }
 
     const statusToken = (token) => {
         setTokenError(token)
@@ -97,8 +94,8 @@ const MainPage = () => {
                                     :
                                     userOauth != null && !tokenError ?
                                         <React.Fragment>
-                                            <Dashboard onStatusMain={statusMain} statusMain={status} />
-                                            <Sidebar />
+                                            <Dashboard />
+                                            {/* <Sidebar /> */}
                                             <div className="page-content-main">
                                                 <div className="container-fluid-main">
                                                     <h1 className="text-center">ข้อมูลด้านทั่วไป</h1>

diff --git a/pages/main/economy.js b/pages/main/economy.js
@@ -37,13 +37,8 @@ const Economy = () => {
     const isTablet = useMediaQuery({ minWidth: 768 })
     const isMobile = useMediaQuery({ maxDeviceWidth: 768 })
 
-    const [status, setStatus] = useState(false)
     const [tokenError, setTokenError] = useState(false)
 
-    const statusMain = (order) => {
-        setStatus(order)
-    }
-
     const statusToken = (token) => {
         setTokenError(token)
     }
@@ -63,7 +58,7 @@ const Economy = () => {
                             {
                                 !tokenError ?
                                     <React.Fragment>
-                                        <Dashboard onStatusMain={statusMain} statusMain={status} />
+                                        <Dashboard  />
                                         <div className="page-content-main">
                                             <div className="container-fluid-main">
                                                 <h1 className="text-center">ข้อมูลด้านเศรษฐกิจ</h1>

diff --git a/pages/main/service.js b/pages/main/service.js
@@ -61,7 +61,7 @@ const Service = () => {
                         <div className="warp-main">
                             {
                                 !tokenError ? <React.Fragment>
-                                    <Dashboard onStatusMain={statusMain} statusMain={status} />
+                                    <Dashboard />
                                     <div className="page-content-main">
                                         <div className="container-fluid-main">
                                             <h1 className="text-center">หน่วยงานภาครัฐ</h1>

diff --git a/pages/main/social.js b/pages/main/social.js
@@ -33,13 +33,8 @@ const Social = () => {
     const isTablet = useMediaQuery({ minWidth: 768 })
     const isMobile = useMediaQuery({ maxDeviceWidth: 768 })
 
-    const [status, setStatus] = useState(false)
     const [tokenError, setTokenError] = useState(false)
 
-    const statusMain = (order) => {
-        setStatus(order)
-    }
-
     const statusToken = (token) => {
         setTokenError(token)
     }
@@ -59,7 +54,7 @@ const Social = () => {
 
                                 !tokenError ?
                                     <React.Fragment>
-                                        <Dashboard onStatusMain={statusMain} statusMain={status} />
+                                        <Dashboard  />
                                         <div className="page-content-main">
                                             <div className="container-fluid-main">
                                                 <h1 className="text-center">ข้อมูลด้านสังคม</h1>

diff --git a/styles/nav.scss b/styles/nav.scss
@@ -6,7 +6,6 @@ $bg-color: linear-gradient(to left, #a6d254, #83d2ae);
 $border-bg-color: 1px solid #83d2ae;
 $line-color: #e8e9fe;
 
-
 nav {
   width: 100%;
   min-height: 5rem;
@@ -18,7 +17,6 @@ nav {
   }
 }
 
-
 //Navbar-Scroll
 // nav {
 //   position: fixed;
@@ -106,7 +104,6 @@ nav {
       }
     }
   }
-
 }
 
 ul {
@@ -170,3 +167,14 @@ ul {
     }
   }
 }
+
+//SideBar
+.ant-drawer-wrapper-body {
+  user-select: none;
+}
+
+.ant-drawer-body {
+  p:hover {
+    color: $primary-color;
+  }
+}