From 8c6bf482f041c92d26fcb681ae522803f741a4d3 Mon Sep 17 00:00:00 2001 From: Gordon Huang Date: Sun, 4 Sep 2022 02:44:02 +1000 Subject: [PATCH 1/3] create nav menu burger with open/close interaction --- components/NavMenu.tsx | 53 +++++++++++++++ components/Navbar.tsx | 143 ++++++++++++++++++++++++++++----------- styles/NavBar.module.css | 11 +++ 3 files changed, 169 insertions(+), 38 deletions(-) create mode 100644 components/NavMenu.tsx create mode 100644 styles/NavBar.module.css diff --git a/components/NavMenu.tsx b/components/NavMenu.tsx new file mode 100644 index 0000000..97b00fa --- /dev/null +++ b/components/NavMenu.tsx @@ -0,0 +1,53 @@ +import { styled } from "@stitches/react" +import { useState } from "react" + +const Layer = styled('div', { + display: "block", + content: "", + backgroundColor: 'black', + width: "100%", + height: '3px', + variants: { + isOpen: { + true: { + backgroundColor: "CornflowerBlue" + } + } + } + +}) + +const TopBun = styled(Layer, { + +}) + +const Filling = styled(Layer, { + +}) + +const BottomBun = styled(Layer, { + +}) + +const Burger = styled('div', { + display: "flex", + flexFlow: "column nowrap", + justifyContent: "space-between", + width: "22px", + height: '16px', + cursor: "pointer", + "@media screen and (min-width: 768px)": { + display: "none", + } +}) + +export default function NavMenu() { + const [isOpen, setIsOpen] = useState(false); + return ( + setIsOpen((val) => !val)}> + + + + + ) +} diff --git a/components/Navbar.tsx b/components/Navbar.tsx index 1e97e47..5eb4fc6 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -1,14 +1,97 @@ +import { styled } from '@stitches/react' import Link from 'next/link' +import { relative } from 'path' import { GithubLogo } from 'phosphor-react' +import { useState } from 'react' import { Flex } from './Flex' import { IconButton } from './IconButton' import Logo from './Logo' +import NavMenu from './NavMenu' import SearchButton from './SearchButton' import { Text } from './Text' const GITHUB_URL = 'https://github.com/csesoc/learning-platform' +const navItems = [ + { + 'path': 'articles', + 'title': 'Collection', + }, + { + 'path': 'creators', + 'title': 'Contribute', + }, + { + 'path': '2521-revision-practical', + 'title': 'COMP2521', + }, + +] + +const NavContainer = styled('div', { + display: 'flex', + flexFlow: 'column nowrap', + position: "absolute", + left: 0, + transform: "translateX(100vw)", + variants: { + isOpen: { + true: { + transform: "translateX(30vw)", + } + } + }, + "@media screen and (min-width: 768px)": { + flexFlow: "row nowrap", + gap: '2.25rem', + justifyContent: 'center', + position: "relative", + transform: "none", + } +}) + +const Layer = styled('div', { + display: "block", + content: "", + backgroundColor: 'black', + width: "100%", + height: '3px', + variants: { + isOpen: { + true: { + backgroundColor: "CornflowerBlue" + } + } + } + +}) + +const TopBun = styled(Layer, { + +}) + +const Filling = styled(Layer, { + +}) + +const BottomBun = styled(Layer, { + +}) + +const Burger = styled('div', { + display: "flex", + flexFlow: "column nowrap", + justifyContent: "space-between", + width: "22px", + height: '16px', + cursor: "pointer", + "@media screen and (min-width: 768px)": { + display: "none", + } +}) export default function Navbar() { + const [isOpen, setIsOpen] = useState(false); + return ( @@ -31,43 +114,22 @@ export default function Navbar() { - - - - Collection - - - + + {navItems.map((navItem, idx) => ( + - Creators + css={{ color: '$slate12', cursor: 'pointer' }} + onClick={() => {setIsOpen(false); console.log('hi')}}> + {navItem.title} + - - - COMP2521 - - - About - - - */} + + setIsOpen((val) => !val)}> + + + + + {/* - {/* */} + - + */} ) } diff --git a/styles/NavBar.module.css b/styles/NavBar.module.css new file mode 100644 index 0000000..efbfa49 --- /dev/null +++ b/styles/NavBar.module.css @@ -0,0 +1,11 @@ +.layer { + display: block; + content: ""; + background-color: black; + width: 100%; + height: 3px; + } + +.topBun #cross { + transform: rotateZ(45deg); +} \ No newline at end of file From 2deede0f0cd59f68de63014ce22533a1e1218fbe Mon Sep 17 00:00:00 2001 From: Gordon Huang Date: Mon, 5 Sep 2022 04:39:24 +1000 Subject: [PATCH 2/3] navbar responsive --- .vscode/settings.json | 3 +++ components/Navbar.tsx | 62 ++++++++++++++++++++++++++++++++++--------- pages/_app.tsx | 8 +++++- 3 files changed, 60 insertions(+), 13 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 7e562e3..3a408d5 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -8,5 +8,8 @@ }, "[ignore]": { "editor.defaultFormatter": "foxundermoon.shell-format" + }, + "[typescriptreact]": { + "editor.defaultFormatter": "vscode.typescript-language-features" } } diff --git a/components/Navbar.tsx b/components/Navbar.tsx index 5eb4fc6..35d7a55 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -3,6 +3,7 @@ import Link from 'next/link' import { relative } from 'path' import { GithubLogo } from 'phosphor-react' import { useState } from 'react' +import { Box } from './Box' import { Flex } from './Flex' import { IconButton } from './IconButton' import Logo from './Logo' @@ -28,25 +29,47 @@ const navItems = [ ] const NavContainer = styled('div', { - display: 'flex', + display: 'block', flexFlow: 'column nowrap', - position: "absolute", - left: 0, + position: "fixed", + left: "100vw", + right: "inherit", + top: 0, transform: "translateX(100vw)", variants: { isOpen: { true: { - transform: "translateX(30vw)", + // transform: "translateX(30vw)", + left: "inherit", + right: "100vw", } } }, + backgroundColor: '#e8ebed', + boxShadow: "0px 0px 31px -19px rgba(0,0,0,0.54)", + width: '100vw', + maxWidth: '548px', + height: '100vh', + zIndex: 5, + padding: "4rem", + fontSize: "2.4rem", + lineHeight: "4.4rem", "@media screen and (min-width: 768px)": { + display: "flex", + fontSize: "1rem", + lineHeight: "inherit", flexFlow: "row nowrap", gap: '2.25rem', justifyContent: 'center', position: "relative", + left: "inherit", + right: "inherit", transform: "none", - } + backgroundColor: 'transparent', + padding: "0", + width: 'auto', + height: "inherit", + }, }) const Layer = styled('div', { @@ -86,7 +109,8 @@ const Burger = styled('div', { cursor: "pointer", "@media screen and (min-width: 768px)": { display: "none", - } + }, + zIndex: 10, }) export default function Navbar() { @@ -100,6 +124,9 @@ export default function Navbar() { px: '$6', alignItems: 'center', zIndex: '1', + position: 'fixed', + width: "100%", + background: "linear-gradient(180deg, rgba(244,244,244,1) 0%, rgba(244,244,244,1) 90%, rgba(244,244,244,0.8084599921043882) 96%, rgba(244,244,244,0) 100%)", }}> @@ -119,7 +146,6 @@ export default function Navbar() { {setIsOpen(false); console.log('hi')}}> {navItem.title} @@ -140,11 +166,22 @@ export default function Navbar() { About */} - setIsOpen((val) => !val)}> - - - - + + setIsOpen((val) => !val)}> + + + + {/* */} + ) } diff --git a/pages/_app.tsx b/pages/_app.tsx index d6b0bae..09e0f75 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -9,6 +9,7 @@ import { Box } from 'components/Box' // import 'highlight.js/styles/github-dark.css'; import 'styles/prism-theme.css' import 'styles/Article.css' +import ArticleLayout from 'components/ArticleLayout' function MyApp({ Component, pageProps }: AppProps) { // TODO: Use return statement when dark theme is added @@ -22,7 +23,12 @@ function MyApp({ Component, pageProps }: AppProps) { <> - + + + {/* */} + + +