diff --git a/src/app/GlobalHeader.js b/src/app/GlobalHeader.js index fd246a7..8b39501 100644 --- a/src/app/GlobalHeader.js +++ b/src/app/GlobalHeader.js @@ -1,5 +1,16 @@ import React from "react"; -import { Box, Button, HStack, IconButton } from "@chakra-ui/core"; +import { + Box, + Button, + HStack, + IconButton, + Menu, + MenuButton, + MenuList, + MenuItem, + useBreakpointValue, +} from "@chakra-ui/core"; +import { HamburgerIcon } from "@chakra-ui/icons"; import { Link, useLocation } from "react-router-dom"; import { useAuth0 } from "@auth0/auth0-react"; import { ChevronLeftIcon } from "@chakra-ui/icons"; @@ -107,14 +118,16 @@ function UserNavBarSection() { Hi, {username}! )} - {id && ( - - Items - - )} - - Modeling - + + {id && ( + + Items + + )} + + Modeling + + logout({ returnTo: window.location.origin })}> Log out @@ -132,6 +145,33 @@ function UserNavBarSection() { } } +function NavLinksList({ children }) { + const navStyle = useBreakpointValue({ base: "menu", md: "buttons" }); + + if (navStyle === "menu") { + return ( + + + } /> + + {children} + + ); + } else { + return children; + } +} + +function NavLinkItem(props) { + const navStyle = useBreakpointValue({ base: "menu", md: "buttons" }); + + if (navStyle === "menu") { + return ; + } else { + return ; + } +} + const NavButton = React.forwardRef(({ icon, ...props }, ref) => { const Component = icon ? IconButton : Button;