Skip to content

Commit

Permalink
feat: add responsive navbar, initial layout
Browse files Browse the repository at this point in the history
  • Loading branch information
Tim Won committed Sep 3, 2020
1 parent fcec0ef commit 336750a
Show file tree
Hide file tree
Showing 19 changed files with 596 additions and 1,540 deletions.
2 changes: 2 additions & 0 deletions next-env.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
/// <reference types="next" />
/// <reference types="next/types/global" />
9 changes: 7 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,21 @@
"node": "10"
},
"dependencies": {
"chakra-ui": "^0.3.9",
"@chakra-ui/core": "^0.8.0",
"@emotion/core": "^10.0.35",
"@emotion/styled": "^10.0.27",
"emotion-theming": "^10.0.27",
"firebase": "^7.14.2",
"firebase-admin": "^8.11.0",
"firebase-functions": "^3.6.1",
"next": "^9.4.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-icons": "^3.11.0",
"swr": "^0.2.0"
},
"devDependencies": {
"firebase-functions-test": "^0.2.1"
"firebase-functions-test": "^0.2.1",
"typescript": "^4.0.2"
}
}
53 changes: 0 additions & 53 deletions src/components/Footer.js

This file was deleted.

18 changes: 0 additions & 18 deletions src/components/Header.js

This file was deleted.

107 changes: 107 additions & 0 deletions src/components/Layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
import {
Box,
Flex,
Heading,
FlexProps,
Link,
Text,
Icon,
PseudoBox,
} from '@chakra-ui/core';
import Head from 'next/head';
import { useState } from 'react';
export const siteTitle = "Tim Won's Website";
import { GiHamburgerMenu } from 'react-icons/Gi';

export interface ILayoutProps {
children: any;
}
const NavItem = (props) => (
<Link href={props.link}>
<PseudoBox
mr={6}
mt={{ base: 4, md: 0 }}
display="block"
_hover={{ fontWeight: 'semibold' }}
>
<PseudoBox>{props.children}</PseudoBox>
</PseudoBox>
</Link>
);

export default function Layout(props: ILayoutProps) {
const [show, setShow] = useState(false);

const navFlexSetting: FlexProps = {
as: 'nav',
color: 'white',
px: 3,
py: 4,
bg: 'teal.500',
width: '100%',
justifyContent: 'space-between',
alignItems: 'center',
wrap: 'wrap',
};

const navItems: { name: string; path: string }[] = [
{
name: 'Home',
path: '/',
},
{
name: 'Blog',
path: '/blog',
},
];
const handleToggle = (): void => {
setShow(!show);
};

return (
<Box>
<Flex {...navFlexSetting}>
<Flex mr={6}>
<Heading>Tim Won</Heading>
</Flex>

<Box
display={{ xs: 'block', sm: 'none' }}
onClick={handleToggle}
cursor="pointer"
>
<GiHamburgerMenu />
</Box>
<Box
display={{ xs: show ? 'block' : 'none', sm: 'flex' }}
width={{ xs: 'full', sm: 'auto' }}
alignItems={'center'}
flexGrow={2}
>
{navItems.map((navItem, index) => (
<NavItem key={index} href={navItem.path}>
{navItem.name}
</NavItem>
))}
</Box>
</Flex>
<Head>
<link rel="icon" href="/favicon.ico" />
<meta
name="description"
content="Learn how to build a personal website using Next.js"
/>
<meta
property="og:image"
content={`https://og-image.now.sh/${encodeURI(
siteTitle
)}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
/>
<meta name="og:title" content={siteTitle} />
<meta name="twitter:card" content="summary_large_image" />
</Head>
<Flex></Flex>
<main> {props.children}</main>
</Box>
);
}
13 changes: 0 additions & 13 deletions src/helpers/utils.js

This file was deleted.

90 changes: 0 additions & 90 deletions src/lib/posts.tsx

This file was deleted.

15 changes: 15 additions & 0 deletions src/pages/_app.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { ThemeProvider, CSSReset } from '@chakra-ui/core';
import '../styles/global.css';

interface IProps {
[key: string]: any;
}

export default function App({ Component, pageProps }: IProps) {
return (
<ThemeProvider>
<CSSReset />
<Component {...pageProps} />
</ThemeProvider>
);
}
Loading

0 comments on commit 336750a

Please sign in to comment.