Skip to content

Commit

Permalink
💄about
Browse files Browse the repository at this point in the history
  • Loading branch information
@noeypatt
noeypatt committed Apr 2, 2020
1 parent 0dc0d6a commit d64f332
Show file tree
Hide file tree
Showing 2 changed files with 94 additions and 77 deletions.
157 changes: 80 additions & 77 deletions components/layout/nav.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,53 +25,22 @@ const NavBar = props => {
return (
<React.Fragment>
{
isBigScreen && name == "index" ?
<nav>
<ul>
<Link href="/">
<li>
<h2>Eldery DB</h2>
</li>
</Link>
<li>
{
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>
)
})
}
</li>
</ul>
</nav>
:
isBigScreen && name == "main" ?

typeof document === 'undefined' ?
null :
isBigScreen && name == "index" ?
<nav>
<ul >
<ul>
<Link href="/">
<li>
<p>ย้อนกลับ</p>
<h2>Eldery DB</h2>
</li>
</Link>
<li>
{
tab.map((item, index) => {
return (
<a href={item.href} key={index}>
<a href={item.href} key={index} >
{
item.name == "ติดต่อ" ?
<p className="li-buttom-line">{item.name}</p>
Expand All @@ -90,70 +59,104 @@ const NavBar = props => {
})
}
</li>

</ul>
</nav>
:
isBigScreen && name == "other" ?
isBigScreen && name == "main" ?
<nav>
<ul>
<ul >
<Link href="/">
<li>
<h2>Eldery DB</h2>
<p>ย้อนกลับ</p>
</li>
</Link>
<li>
{
tab.map((item, index) => {
return (
<Link key={index} href={item.href}>
<a href={item.href} key={index}>
{
<React.Fragment>
<button className="btn">
<p>{item.name}</p>
</button>
</React.Fragment>
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>
}
</Link>
</a>
)
})
}
</li>

</ul>
</nav>
:
isSmallScreen ?
<div className="collapsible-menu">
<div className="warp-nav-sidebar">
isBigScreen && name == "other" ?
<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
14 changes: 14 additions & 0 deletions styles/about.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@ $font-text-sub: #978bab !important;
.warp-about {
.page-content {
padding-top: 3rem;

@media (max-width: 575.98px) {
padding-top: 1rem;
}

.container-fluid {
display: flex;
Expand All @@ -21,13 +25,16 @@ $font-text-sub: #978bab !important;

@media (max-width: 575.98px) {
flex-direction: column;
align-items: center;
margin: 0;
}
img {
height: 20rem;
margin-right: 1rem;
@media (max-width: 575.98px) {
margin-right: 0;
height: 15rem;
width: 15rem;
}
}

Expand Down Expand Up @@ -60,6 +67,12 @@ $font-text-sub: #978bab !important;
.more-content {
padding: 0 3rem;
display: flex;
@media (max-width: 575.98px) {
justify-content: center;
}
@media (max-width: 768px) {
padding: 0;
}

h6 {
margin-top: 1rem;
Expand Down Expand Up @@ -115,6 +128,7 @@ $font-text-sub: #978bab !important;
.page-content {
padding-top: 3rem;


.container-fluid {
display: flex;
flex-direction: column;
Expand Down

1 comment on commit d64f332

@vercel
Copy link

@vercel vercel bot commented on d64f332 Apr 2, 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.