Skip to content

Commit

Permalink
💄Nav
Browse files Browse the repository at this point in the history
  • Loading branch information
@noeypatt
noeypatt committed Apr 5, 2020
1 parent fe2ee2a commit f100bad
Show file tree
Hide file tree
Showing 8 changed files with 100 additions and 61 deletions.
2 changes: 1 addition & 1 deletion components/Empty.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const Empty = () => {

return (
<div className="warp-empty">
<NavBar name="other" tab={isSmallScreen ? homeMin : home} />
<NavBar name="empty" tab={isSmallScreen ? homeMin : home} />
<div className="content-empty">
<img src="/static/empty.jpg" alt="empty" />
<div className="title-empty">
Expand Down
94 changes: 61 additions & 33 deletions components/layout/nav.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const NavBar = props => {

const tab = props.tab
const name = props.name
const [navbar,setNavbar] = useState("")
const [navbar, setNavbar] = useState("")
const [status, setStatus] = useState(false)
const isBigScreen = useMediaQuery({ minDeviceWidth: 769 })
const isSmallScreen = useMediaQuery({ maxDeviceWidth: 768.99 })
Expand All @@ -25,10 +25,10 @@ const NavBar = props => {

useEffect(() => {
window.onscroll = () => {
if (window.scrollY <= 10)
setNavbar(null)
else
setNavbar("scroll")
if (window.scrollY <= 10)
setNavbar(null)
else
setNavbar("scroll")
};
}, [])

Expand Down Expand Up @@ -134,38 +134,66 @@ const NavBar = props => {
</ul>
</nav>
:
isSmallScreen ?
<div className="collapsible-menu">
<div className="warp-nav-sidebar">
isBigScreen && name == "empty" ?
<nav>
<ul>
<Link href="/">
<h2>Eldery DB</h2>
<li>
<h2>Eldery DB</h2>
</li>
</Link>
<div className="box-hamberger">
<a className={`hamberger btn${status ? " active" : " not-active"}`} onClick={collapsible} >
<span></span>
<span></span>
<span></span>
</a>
<li>
{
tab.map((item, index) => {
return (
<Link key={index} href={item.href}>
{
<React.Fragment>
<button className="btn">
<p>{item.name}</p>
</button>
</React.Fragment>
}
</Link>
)
})
}
</li>
</ul>
</nav>
:
isSmallScreen ?
<div className="collapsible-menu">
<div className="warp-nav-sidebar">
<Link href="/">
<h2>Eldery DB</h2>
</Link>
<div className="box-hamberger">
<a className={`hamberger btn${status ? " active" : " not-active"}`} onClick={collapsible} >
<span></span>
<span></span>
<span></span>
</a>
</div>
</div>
<div className={`menu-content${status ? " show" : ""}`}>
<ul>
<li >
{
tab.map((item, indexs) => {
return (
<Link key={indexs} href={item.href}>
<p >{item.name}</p>
</Link>
)
})
}
</li>
</ul>
</div>
</div>
<div className={`menu-content${status ? " show" : ""}`}>
<ul>
<li >
{
tab.map((item, indexs) => {
return (
<Link key={indexs} href={item.href}>
<p >{item.name}</p>
</Link>
)
})
}
</li>
</ul>
</div>
</div>
:
null
:
null
}
</React.Fragment>

Expand Down
55 changes: 32 additions & 23 deletions components/layout/sidebar.js
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,47 @@
import React, { useState } from 'react'
import React, { useState } 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: "ข้อมูลทางสถิติ", nameicon: "Chart", img: "/static/chart.svg", link: "/main" },
{ name: "สวัสดิการ และการช่วยเหลือ", nameicon: "Benefits", img: "/static/document.svg", link: "/main/service" },
{ name: "สภาพทางสังคม", nameicon: "", img: "/static/social.svg", link: "/main/social" },
{ name: "ด้านเศรษฐกิจ", nameicon: "Economy", img: "/static/economy.svg", link: "/main/economy" },
{ name: "โรงพยาบาล", nameicon: "Hospital", img: "/static/hospital.svg", link: "/main/hospital" },
{ name: "ข้อมูลทั่วไป", href: "/main" },
{ name: "ข้อมูลด้านสุขภาพ", href: "/main/hospital" },
{ name: "ข้อมูลด้านสังคม", href: "/main/social" },
{ name: "ข้อมูลด้านเศรษฐกิจ", href: "/main/economy" },
{ name: "ข้อมูลด้านการช่วยเหลือ", href: "/main/service" },
]
)

return (
<div className={`sidebar-wrapper-${status ? "active" : "non-active"}`}>
<div className="content-sidebar">
<ul>
{
sidebar.map((items, index) => (
<li key={index}>
<Link href={items.link} >
<p>{items.name}</p>
</Link>
</li>

const showDrawer = () => {
setVisible(true)
};

))
}
const onClose = () => {
setVisible(false)
};

</ul>
</div>
return (
<div>
<Button type="primary" onClick={showDrawer}>
Open
</Button>
<Drawer
title="Basic Drawer"
placement={placement}
closable={false}
onClose={onClose}
visible={visible}
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Drawer>
</div>
)
}
Expand Down
2 changes: 1 addition & 1 deletion pages/index/About.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ const About = () => {
<title>Eldery DB</title>
<link rel='icon' href='/static/logomain.svg' />
</Head>
<NavBar name="main" tab={isSmallScreen ? homeMin : home} confirm={onConfirm} />
<NavBar name="other" tab={isSmallScreen ? homeMin : home} confirm={onConfirm} />
<div className="warp-about-page">
<div className="page-content">
{
Expand Down
2 changes: 1 addition & 1 deletion pages/index/Allowance.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ const Allowance = () => {
<title>Eldery DB</title>
<link rel='icon' href='/static/logomain.svg' />
</Head>
<NavBar name="main" tab={isSmallScreen ? homeMin : home} confirm={onConfirm} />
<NavBar name="other" tab={isSmallScreen ? homeMin : home} confirm={onConfirm} />
<div className="warp-allowance-page">
<div className="page-content">
{
Expand Down
2 changes: 1 addition & 1 deletion pages/index/Contact.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ const Contact = () => {
<title>Eldery DB</title>
<link rel='icon' href='/static/logomain.svg' />
</Head>
<NavBar name="main" tab={isSmallScreen ? homeMin : home} confirm={onConfirm} />
<NavBar name="other" tab={isSmallScreen ? homeMin : home} confirm={onConfirm} />
<div className="warp-contact-page">
<div className="page-content">
{
Expand Down
2 changes: 1 addition & 1 deletion pages/index/Society.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ const Society = () => {
<title>Eldery DB</title>
<link rel='icon' href='/static/logomain.svg' />
</Head>
<NavBar name="main" tab={isSmallScreen ? homeMin : home} confirm={onConfirm} />
<NavBar name="other" tab={isSmallScreen ? homeMin : home} confirm={onConfirm} />
<div className="warp-society-page">
<div className="page-content">
{
Expand Down
2 changes: 2 additions & 0 deletions pages/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import Map from '../components/layout/Map';
import Empty from '../components/Empty';

import { Progress } from 'antd';
import Sidebar from '../components/layout/sidebar';

const BarMap = dynamic(
() => import('../components/chart/barMap'),
Expand Down Expand Up @@ -97,6 +98,7 @@ const MainPage = () => {
userOauth != null && !tokenError ?
<React.Fragment>
<Dashboard onStatusMain={statusMain} statusMain={status} />
<Sidebar />
<div className="page-content-main">
<div className="container-fluid-main">
<h1 className="text-center">ผู้สูงอายุ</h1>
Expand Down

1 comment on commit f100bad

@vercel
Copy link

@vercel vercel bot commented on f100bad Apr 5, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to following URLs:

Please sign in to comment.