Skip to content
This repository has been archived by the owner on Apr 19, 2021. It is now read-only.

Commit

Permalink
wip.
Browse files Browse the repository at this point in the history
  • Loading branch information
@nisarhassan12
nisarhassan12 committed Nov 18, 2020
1 parent 645c594 commit 9d679a5
Show file tree
Hide file tree
Showing 5 changed files with 122 additions and 62 deletions.
41 changes: 41 additions & 0 deletions src/components/MinimalFooter.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import React from 'react'

import styled from '@emotion/styled'
import { Link } from 'gatsby'
import { colors } from '../styles/variables'

const StyledMinimalFooter = styled.footer`
padding: 5rem 0 6rem;
text-align: center;
color: ${colors.lightGrey};
background: ${colors.offWhite};
p {
margin-bottom: 2rem;
}
a {
padding: 0 1rem;
color: inherit;
font-weight: 400;
&:not(:last-child) {
border-right: 1px solid;
}
}
`

const MinimalFooter = () => (
<StyledMinimalFooter role="footer">
<div className="row">
<p>Copyright TypeFox All Right Reserved</p>
<div>
<Link to="/imprint">Imprint</Link>
<Link to="/terms">Terms of Service</Link>
<Link to="/privacy">Privacy Policy</Link>
</div>
</div>
</StyledMinimalFooter>
)

export default MinimalFooter
121 changes: 63 additions & 58 deletions src/components/Nav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,7 @@ const StyledNav = styled.nav`
}
`

const Nav = () => {
const Nav = ({ isAFlowPage }: { isAFlowPage?: boolean }) => {
const [isNavRendered, setIsNavRendered] = useState(false)

const unLock = () => {
Expand Down Expand Up @@ -242,66 +242,71 @@ const Nav = () => {
<StyledNav role="navigation" className="nav">
<div className="nav__burger-container">
<Link to="/"><img alt="Gitpod Logo" src={GitpodLogoDark} /></Link>
<div className="btns">
<a href="https://gitpod.io/login/" rel="noopener" style={{ display: isNavRendered ? 'none' : '' }}>Log In</a>
<div className="nav__btn-container" aria-live="assertive">
<button
className="nav__btn"
aria-label={isNavRendered ? "Hide the Navigation Items" : "Show the Navigation Items"}
onClick={toggleNavigation}
>
<svg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.112 31.112"
className={isNavRendered ? 'is-shown--multiply' : 'is-hidden'}
aria-hidden={isNavRendered ? false : true}
id="multiply"
{
!isAFlowPage ? <div className="btns">
<a href="https://gitpod.io/login/" rel="noopener" style={{ display: isNavRendered ? 'none' : '' }}>Log In</a>
<div className="nav__btn-container" aria-live="assertive">
<button
className="nav__btn"
aria-label={isNavRendered ? "Hide the Navigation Items" : "Show the Navigation Items"}
onClick={toggleNavigation}
>
<title>close menu icon</title>
<path d="M31.112 1.414L29.698 0 15.556 14.142 1.414 0 0 1.414l14.142 14.142L0 29.698l1.414 1.414L15.556 16.97l14.142 14.142 1.414-1.414L16.97 15.556z" />
</svg>
<svg
className={isNavRendered ? 'is-hidden' : 'is-shown'}
aria-hidden={isNavRendered ? true : false}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 26 18"
id="hamburger"
>
<title>hamburger menu icon</title>
<g transform="translate(-647.5 -86.5)" strokeWidth="2"><line x2="24" transform="translate(648.5 87.5)" /><line x2="24" transform="translate(648.5 95.5)" /><line x2="24" transform="translate(648.5 103.5)" /></g>
</svg>
</button>
</div>
</div>
<svg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.112 31.112"
className={isNavRendered ? 'is-shown--multiply' : 'is-hidden'}
aria-hidden={isNavRendered ? false : true}
id="multiply"
>
<title>close menu icon</title>
<path d="M31.112 1.414L29.698 0 15.556 14.142 1.414 0 0 1.414l14.142 14.142L0 29.698l1.414 1.414L15.556 16.97l14.142 14.142 1.414-1.414L16.97 15.556z" />
</svg>
<svg
className={isNavRendered ? 'is-hidden' : 'is-shown'}
aria-hidden={isNavRendered ? true : false}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 26 18"
id="hamburger"
>
<title>hamburger menu icon</title>
<g transform="translate(-647.5 -86.5)" strokeWidth="2"><line x2="24" transform="translate(648.5 87.5)" /><line x2="24" transform="translate(648.5 95.5)" /><line x2="24" transform="translate(648.5 103.5)" /></g>
</svg>
</button>
</div>
</div> : null
}
{
isAFlowPage ? <a className="btn">Reinstall Extension</a> : null
}
</div>


<ul className={`nav__items ${isNavRendered ? 'navIsRendered' : 'navIsNotRendered'}`} >
<li className="nav__item"><Link activeClassName="active" to='/features/' className="link">Features</Link></li>
<li className="nav__item"><Link activeClassName="active" to='/self-hosted/' className="link">Self-Hosted</Link></li>
<li className="nav__item"><Link activeClassName="active" to='/pricing/' className="link">Pricing</Link></li>
<li className="nav__item">
<DropDown
title="Resources"
links={[
{
text: 'Docs',
to: '/docs/'
},
{
text: 'Blog',
to: '/blog/'
},
{
text: 'Community',
to: 'https://community.gitpod.io/',
target: true
}
]}
/>
</li>
<li className="nav__item"><a href="https://gitpod.io/login/" rel="noopener" className="btn btn--small">Log In</a></li>
</ul>

{
!isAFlowPage ? <ul className={`nav__items ${isNavRendered ? 'navIsRendered' : 'navIsNotRendered'}`} >
<li className="nav__item"><Link activeClassName="active" to='/features/' className="link">Features</Link></li>
<li className="nav__item"><Link activeClassName="active" to='/self-hosted/' className="link">Self-Hosted</Link></li>
<li className="nav__item"><Link activeClassName="active" to='/pricing/' className="link">Pricing</Link></li>
<li className="nav__item">
<DropDown
title="Resources"
links={[
{
text: 'Docs',
to: '/docs/'
},
{
text: 'Blog',
to: '/blog/'
},
{
text: 'Community',
to: 'https://community.gitpod.io/',
target: true
}
]}
/>
</li>
<li className="nav__item"><a href="https://gitpod.io/login/" rel="noopener" className="btn btn--small">Log In</a></li>
</ul> : null
}
</StyledNav>
</div>
</div>
Expand Down
9 changes: 6 additions & 3 deletions src/layouts/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import LayoutRoot from '../components/LayoutRoot'
import LayoutMain from '../components/LayoutMain'
import Nav from '../components/Nav'
import Footer from '../components/Footer'
import MinimalFooter from '../components/MinimalFooter'
// import AnnoucementBanner from '../components/AnnouncementBanner'

type StaticQueryProps = {
Expand All @@ -24,7 +25,7 @@ type StaticQueryProps = {
}
}

class IndexLayout extends React.Component<{ title?: string; canonical?: string; description?: string }, {}> {
class IndexLayout extends React.Component<{ title?: string; canonical?: string; description?: string, isAFlowPage?: boolean }, {}> {
handleFirstTab = (e: any) => {
if (e.key === 'Tab') {
// the "I am a keyboard user" key
Expand Down Expand Up @@ -90,7 +91,7 @@ class IndexLayout extends React.Component<{ title?: string; canonical?: string;
<meta name="google-site-verification" content="NBio3hCkfn2FKJpqZritJpXuyKo54noPGZzWsjDIp-M" />
</Helmet>
{/* <AnnoucementBanner /> */}
<Nav />
<Nav isAFlowPage={this.props.isAFlowPage}/>
<LayoutMain>
<CookieConsent
buttonClasses="primary"
Expand Down Expand Up @@ -123,7 +124,9 @@ class IndexLayout extends React.Component<{ title?: string; canonical?: string;
</CookieConsent>
{children}
</LayoutMain>
<Footer />
{
!this.props.isAFlowPage ? <Footer /> : <MinimalFooter />
}
</LayoutRoot>
)}
/>
Expand Down
10 changes: 10 additions & 0 deletions src/pages/deletion.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import React from 'react'
import IndexLayout from '../layouts'

const DeletionPage = () => (
<IndexLayout isAFlowPage={true}>

</IndexLayout>
)

export default DeletionPage
3 changes: 2 additions & 1 deletion src/styles/variables.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ export const colors = {
offWhite2: '#e5e5e5',
offWhite3: '#dbdbdb',
offWhite4: '#e6e6e6',
offWhite5: '#C4C4C4'
offWhite5: '#C4C4C4',
lightGrey: '#9f9f9f',
}

export const sizes = {
Expand Down

0 comments on commit 9d679a5

Please sign in to comment.