Stone_Red/website
1
0
Fork 0
mirror of https://github.com/Stone-Red-Code/website.git synced 2026-09-04 09:15:58 +02:00
Code Issues Packages Projects Releases Wiki Activity

ui: update header/nav style to match layout

Browse Source
This commit is contained in:
Jean-Philippe Sirois
2019-07-29 10:26:55 -04:00
parent 51ab549237
commit f49432e638
7 changed files with 130 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Container/styles.tsx
+5 -2
View File
@@ -3,10 +3,13 @@ import styled from "styled-components"
export const ContainerWrapper = styled.div`
display: flex;
flex-direction: column;
padding: 0 32px;
/* the 172px is necessary because the logo is offset by that much */
/* this ensures the logo never goes off screen */
/* TODO: most likely extract this number */
padding: 0 calc(172px + 32px);
margin: 0 auto;
width: 100%;
max-width: 1015px;
max-width: 800px;
& > :first-child {
margin-top: 0;
src/components/Header/index.tsx
+33
View File
@@ -0,0 +1,33 @@
import React, { PropsWithChildren } from "react"
import { Container } from "../Container"
import logo from "../../images/tph-logo.png"
import * as SC from "./styles"
function MenuItem({ children, to }: PropsWithChildren<{ to: string }>) {
return (
<SC.MenuItem to={to} activeClassName="active">
{children}
</SC.MenuItem>
)
}
export function Header() {
return (
<SC.HeaderWrapper>
<Container>
<SC.InnerWrapper>
<SC.Logo src={logo} />
<SC.Menu>
<MenuItem to="/">about</MenuItem>
<MenuItem to="/">rules</MenuItem>
<MenuItem to="/">faq</MenuItem>
<MenuItem to="/">hotbot</MenuItem>
<MenuItem to="/docs">documentation</MenuItem>
<MenuItem to="/">tech spotlight</MenuItem>
</SC.Menu>
</SC.InnerWrapper>
</Container>
</SC.HeaderWrapper>
)
}
src/components/Header/styles.tsx
+83
View File
@@ -0,0 +1,83 @@
import { Link } from "gatsby"
import styled from "styled-components"
export const HeaderWrapper = styled.header``
export const InnerWrapper = styled.div`
position: relative;
display: flex;
align-items: center;
height: 122px;
`
export const Logo = styled.img`
position: absolute;
margin-right: 50px;
left: calc(-122px - 50px);
width: 122px;
height: 122px;
`
export const Menu = styled.nav`
margin-top: 16px;
display: flex;
align-items: flex-start;
`
export const MenuItem = styled(Link)`
display: flex;
align-items: center;
font-size: 22px;
text-decoration: none;
color: #555;
position: relative;
transition: color 0.3s;
/* underline bar, getting animated through hover */
&::after {
z-index: -1;
position: absolute;
content: "";
height: 2px;
width: 100%;
margin-top: -3px;
bottom: 0;
background: #555;
transition: all 0.3s;
}
&:hover {
color: #fff;
}
&:hover::after {
padding: 8px;
height: 100%;
background: #000;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1), 0 5px 11px rgba(0, 0, 0, 0.25);
margin-left: -8px;
margin-bottom: -8px;
border-radius: 3px;
}
&.active {
font-weight: 700;
color: #d33636;
&::after {
background: #d33636;
}
&:hover {
color: #fff;
}
&:hover::after {
background: #d33636;
}
}
& + & {
margin-left: 48px;
}
`
src/components/Layout/index.tsx
+8 -8
View File
@@ -10,7 +10,7 @@ import { useStaticQuery, graphql } from "gatsby"
import { Container } from "../Container"
import { Footer } from "../Footer"
import { Sidebar } from "../Sidebar"
import { Header } from "../Header"
import "./layout.scss"
import * as SC from "./styles"
import Scrollbar from "react-perfect-scrollbar"
@@ -29,15 +29,15 @@ export function Layout({ children }: PropsWithChildren<{}>) {
return (
<Scrollbar>
<Container>
<SC.Main>
<Sidebar />
<SC.MainContent>
<SC.Main>
<Header />
<SC.MainContent>
<Container>
<h1>{data.site.siteMetadata.title}</h1>
{children}
</SC.MainContent>
</SC.Main>
</Container>
</Container>
</SC.MainContent>
</SC.Main>
<Footer />
</Scrollbar>
)
src/components/Layout/styles.tsx
+1
View File
@@ -2,6 +2,7 @@ import styled from "styled-components"
export const Main = styled.div`
display: flex;
flex-direction: column;
margin: 128px auto 64px !important;
width: 100%;
`
src/components/Sidebar/index.tsx
-29
View File
@@ -1,29 +0,0 @@
import React, { PropsWithChildren } from "react"
import logo from "../../images/tph-logo.png"
import * as SC from "./styles"
import ArrowRight from "../../icons/arrow-right.svg"
function MenuItem({ children, to }: PropsWithChildren<{ to: string }>) {
return (
<SC.MenuItem to={to}>
{children} <ArrowRight />
</SC.MenuItem>
)
}
export function Sidebar() {
return (
<SC.SidebarWrapper>
<SC.Logo src={logo} />
<SC.Menu>
<MenuItem to="/">about</MenuItem>
<MenuItem to="/">rules</MenuItem>
<MenuItem to="/">faq</MenuItem>
<MenuItem to="/">hotbot</MenuItem>
<MenuItem to="/docs">documentation</MenuItem>
<MenuItem to="/">tech spotlight</MenuItem>
</SC.Menu>
</SC.SidebarWrapper>
)
}
src/components/Sidebar/styles.tsx
-55
View File
@@ -1,55 +0,0 @@
import { Link } from "gatsby"
import styled from "styled-components"
export const SidebarWrapper = styled.aside`
width: 200px;
`
export const Logo = styled.img`
width: 122px;
`
export const Menu = styled.nav`
margin-top: 16px;
display: flex;
flex-direction: column;
align-items: flex-start;
`
export const MenuItem = styled(Link)`
display: flex;
align-items: center;
font-size: 22px;
text-decoration: none;
color: #555;
position: relative;
transition: color 0.3s;
&::after {
position: absolute;
content: "";
height: 2px;
transition: width 0.3s;
width: 0;
bottom: -3px;
background: #bf1e2e;
}
&:hover {
color: #bf1e2e;
}
&:hover::after {
width: calc(100% - 8px - 6px);
}
& + & {
margin-top: 8px;
}
svg {
margin-left: 6px;
width: 8px;
height: 15px;
}
`