Skip to content

Commit

Permalink
💄Navbar
Browse files Browse the repository at this point in the history
  • Loading branch information
@noeypatt
noeypatt committed Mar 28, 2020
1 parent abb2dd1 commit 142820c
Show file tree
Hide file tree
Showing 9 changed files with 111 additions and 84 deletions.
7 changes: 6 additions & 1 deletion components/about.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,12 @@ const About = () => {
</div>
))
}
<div className="more-content">
<h6>อ่านต่อ</h6>
<Link href="/index/about">
<img className="hvr-wobble-horizontal" src="/static/arrow.svg" alt="arrow-icon" />
</Link>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -74,7 +80,6 @@ const About = () => {
<Link href="/index/about">
<img className="hvr-wobble-horizontal" src="/static/arrow.svg" alt="arrow-icon" />
</Link>

</div>

</div>
Expand Down
21 changes: 11 additions & 10 deletions components/layout/nav.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const NavBar = props => {
{
tab.map((item, index) => {
return (
<Link key={index} href={item.href}>
<a href={item.href} key={index} >
{
item.name == "ติดต่อ" ?
<p className="li-buttom-line">{item.name}</p>
Expand All @@ -46,13 +46,12 @@ const NavBar = props => {
<p className="li-buttom-line-active">{item.name}</p>
:
<React.Fragment>

<button className="btn">
<p>{item.name}</p>
</button>
</React.Fragment>
}
</Link>
</a>
)
})
}
Expand All @@ -63,9 +62,6 @@ const NavBar = props => {
isBigScreen && name == "main" ?
<nav>
<ul >
{/* <li className={`hamberger-${status ? "active" : "non-active"}`}>
<img src="/static/hamberger.svg" alt="hamberger" onClick={collapsible} />
</li> */}
<Link href="/">
<li>
<p>ย้อนกลับ</p>
Expand All @@ -75,14 +71,20 @@ const NavBar = props => {
{
tab.map((item, index) => {
return (
<Link key={index} href={item.href}>
<Link href={item.href} key={index}>
{
item.name == "ติดต่อ" ?
<p className="li-buttom-line">{item.name}</p>
:
<p>{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>
}

</Link>
)
})
Expand All @@ -107,7 +109,6 @@ const NavBar = props => {
<Link key={index} href={item.href}>
{
<React.Fragment>

<button className="btn">
<p>{item.name}</p>
</button>
Expand Down
5 changes: 0 additions & 5 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@
"bootstrap": "^4.3.1",
"d3-scale": "^3.2.1",
"google-maps-react": "^2.0.2",
"hover.css": "^2.3.2",
"less": "^3.10.3",
"lodash": "^4.17.15",
"moment": "^2.24.0",
Expand Down
1 change: 0 additions & 1 deletion pages/_document.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ class MyDocument extends Document {
<Head>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" />
<link href="css/hover.css" rel="stylesheet" media="all"></link>
</head>

<meta charset="utf-8" />
Expand Down
4 changes: 2 additions & 2 deletions pages/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const Home = () => {

const [home, setHome] = useState(
[
// { name: "เกี่ยวกับเรา", href: "/" },
{ name: "เกี่ยวกับเรา", href: "/index/about" },
// { name: "ข่าวสาร", href: "/" },
// { name: "ติดต่อ", href: "/index/contact" },
{ name: "เข้าสู่หน้าหลัก", href: "/main" }
Expand All @@ -30,7 +30,7 @@ const Home = () => {

const [homeMin, setHomeMin] = useState(
[
// { name: "เกี่ยวกับเรา", href: "" },
{ name: "เกี่ยวกับเรา", href: "/index/about" },
// { name: "ข่าวสาร", href: "" },
// { name: "ติดต่อ", href: "/index/contact" },
{ name: "เข้าสู่หน้าหลัก", href: "/main" },
Expand Down
126 changes: 77 additions & 49 deletions pages/index/About.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React, { useState } from 'react';
import Head from 'next/head';
import NavBar from '../../components/layout/nav';
import { useMediaQuery } from 'react-responsive';

const About = () => {

const isSmallScreen = useMediaQuery({ maxDeviceWidth: 575.98 })

const [data, setData] = useState([
{
title: "ระดับเริ่มต้น (Aging society)",
Expand All @@ -23,63 +23,91 @@ const About = () => {
},
])

const [status, setStatus] = useState(false)

const [home, setHome] = useState(
[
{ name: "ข่าวสาร", href: "#" },
{ name: "เข้าสู่หน้าหลัก", href: "/main" }
]
)

const [homeMin, setHomeMin] = useState(
[
{ name: "ข่าวสาร", href: "#" },
{ name: "เข้าสู่หน้าหลัก", href: "/main" },
]
)

const onConfirm = (order) => {
setStatus(order)
}

return (
<div className="warp-about">
<div className="page-content">
{
isSmallScreen ?
<div className="container-fluid">
<div className="head-content">
<h4>สังคมผู้สูงอายุ <br />และระดับของการเข้าสู่สังคมผู้สูงอายุ</h4>
<h5> ถูกแบ่งออกเป็น 3 ระดับ</h5>
</div>
<React.Fragment>
<Head>
<title>Eldery DB</title>
<link rel='icon' href='/static/logomain.svg' />
</Head>
<NavBar name="main" tab={isSmallScreen ? homeMin : home} confirm={onConfirm} />
<div className="warp-about">
<div className="page-content">
{
isSmallScreen ?
<div className="container-fluid">
<div className="head-content">
<h4>สังคมผู้สูงอายุ <br />และระดับของการเข้าสู่สังคมผู้สูงอายุ</h4>
<h5> ถูกแบ่งออกเป็น 3 ระดับ</h5>
</div>

<div className="detail-content">
<img src="/static/trstcover2.gif" />
<div className="data-detail-content">
{
data.map((item, index) => (
<div className="title-content" key={index}>
<h6 className="header-title-content">{item.title}</h6>
<h6>{item.text}</h6>
<h6>{item.subtext}</h6>
</div>
))
}
<div className="detail-content">
<img src="/static/trstcover2.gif" />
<div className="data-detail-content">
{
data.map((item, index) => (
<div className="title-content" key={index}>
<h6 className="header-title-content">{item.title}</h6>
<h6>{item.text}</h6>
<h6>{item.subtext}</h6>
</div>
))
}
</div>
</div>
</div>
</div>
:
<div className="container-fluid">
<div className="head-content">
<h3>สังคมผู้สูงอายุ และระดับของการเข้าสู่สังคมผู้สูงอายุ</h3>
<h3> ถูกแบ่งออกเป็น 3 ระดับ</h3>
</div>
:
<div className="container-fluid">
<div className="head-content">
<h3>สังคมผู้สูงอายุ และระดับของการเข้าสู่สังคมผู้สูงอายุ</h3>
<h3> ถูกแบ่งออกเป็น 3 ระดับ</h3>
</div>

<div className="detail-content">
<img src="/static/trstcover2.gif" />
<div className="data-detail-content">
{
data.map((item, index) => (
<div className="title-content" key={index}>
<h6 className="header-title-content">{item.title}</h6>
<h6>{item.text}</h6>
<h6>{item.subtext}</h6>
</div>
))
}
<div className="more-content">
<h6>อ่านต่อ</h6>
<img className="hvr-wobble-horizontal" src="/static/arrow.svg" alt="arrow-icon" />
</div>
<div className="detail-content">
<img src="/static/trstcover2.gif" />
<div className="data-detail-content">
{
data.map((item, index) => (
<div className="title-content" key={index}>
<h6 className="header-title-content">{item.title}</h6>
<h6>{item.text}</h6>
<h6>{item.subtext}</h6>
</div>
))
}
<div className="more-content">
<h6>อ่านต่อ</h6>
<img className="hvr-wobble-horizontal" src="/static/arrow.svg" alt="arrow-icon" />
</div>

</div>
</div>
</div>
</div>
}
}

</div>
</div>
</div>
</React.Fragment>

)
}
export default About;
3 changes: 2 additions & 1 deletion styles/base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ h1 {
h2 {
font-size: 1.5rem !important;
text-align: center;
margin-bottom: 0;
margin-bottom: 0 !important;
padding: 0.5rem;

@media (max-width: 1199.98px) {
Expand Down Expand Up @@ -112,6 +112,7 @@ img {
}

ul {
margin-left: 1rem;
margin-bottom: 0 !important;
margin-block-end: 0;
padding-inline-start: 0.5rem !important;
Expand Down
27 changes: 13 additions & 14 deletions styles/nav.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,20 +13,6 @@ $line-color: #e8e9fe;
padding: 0.5rem;
display: flex;
justify-content: space-between;
li {
p.li-buttom-line-active {
border: 1px solid $primary-color;
border-radius: 1.5rem;
padding: 0.5rem 2rem !important;
margin: 0 1rem 0 0.5rem !important;
background-color: $primary-color;
color: white !important;
}
p.li-buttom-line-active:hover {
color: $font-color;
background-color: white !important;
}
}
}
}
}
Expand Down Expand Up @@ -152,5 +138,18 @@ ul {
color: white !important;
background-color: $primary-color;
}

p.li-buttom-line-active {
border: 1px solid $primary-color;
border-radius: 1.5rem;
padding: 0.5rem 2rem !important;
margin: 0 1rem 0 0.5rem !important;
background-color: $primary-color;
color: white !important;
}
p.li-buttom-line-active:hover {
color: $font-color;
background-color: white !important;
}
}
}

1 comment on commit 142820c

@vercel
Copy link

@vercel vercel bot commented on 142820c Mar 28, 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.