diff --git a/components/Card.tsx b/components/Card.tsx index d9b4c5f..cae9c44 100644 --- a/components/Card.tsx +++ b/components/Card.tsx @@ -5,7 +5,7 @@ export const Card = styled('div', { flexDirection: 'column', height: '28em', padding: '$6 $5', - width: '24rem', + maxWidth: '24rem', boxShadow: '$default', background: '$slate1', borderRadius: '$lg' 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 21077ba..679c0db 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -1,14 +1,126 @@ +import { styled } from '@stitches/react' 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' +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', + }, + { + 'path': 'opendev', + 'title': 'Open Dev Series', + }, + + +] + +const NavContainer = styled('div', { + display: 'block', + flexFlow: 'column nowrap', + position: "fixed", + left: "100vw", + right: "inherit", + top: 0, + transform: "translateX(100vw)", + variants: { + isOpen: { + true: { + // 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', { + 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", + }, + zIndex: 10, +}) export default function Navbar() { + const [isOpen, setIsOpen] = useState(false); + return ( @@ -31,54 +146,21 @@ export default function Navbar() { - - - - Collection - - - - - Creators - - - - - Open Dev - - - - - COMP2521 - - - + {navItems.map((navItem, idx) => ( + + { setIsOpen(false); console.log('hi') }}> + {navItem.title} + + + + + ) + )} + {/* About - - - */} + + + setIsOpen((val) => !val)}> + + + + + {/* - {/* */} + - + */} + ) } diff --git a/pages/_app.tsx b/pages/_app.tsx index d6b0bae..eec9e3a 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,10 @@ function MyApp({ Component, pageProps }: AppProps) { <> - + + {/* */} + +