💄 Change user account to display drawer [@svalencia]

src/components/Nav.tsx

-import React, { useMemo} from 'react'
+import React, { useMemo, useRef} from 'react'
 import { Link } from 'react-router-dom'
 import {useGoogleAuth} from 'hooks'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faUser } from '@fortawesome/free-solid-svg-icons'
-import { Box, Heading, Flex, Spacer, Button, Image, Avatar, HStack } from "@chakra-ui/react"
+import { AccountPage } from 'pages'
+import { Box, Heading, Flex, Spacer, Button, Image, Avatar, HStack, Input } from "@chakra-ui/react"
 import Logo from '../img/logo.png'
+import {
+    Drawer,
+    DrawerBody,
+    DrawerHeader,
+    DrawerOverlay,
+    DrawerContent,
+    DrawerCloseButton,
+    useDisclosure
+  } from "@chakra-ui/react"
 
 
 const Nav = () => {
     const { isSignedIn, signOut, signIn, manager } = useGoogleAuth();
     const handleAuth = () => { isSignedIn ? signOut() : signIn();}
     const authLinkText = useMemo(() => isSignedIn ? "Logout" : "Login", [isSignedIn]);
+    const { isOpen, onOpen, onClose } = useDisclosure();
+    const btnRef = useRef<HTMLButtonElement>(null);
     const userIcon = isSignedIn ? 
     <Avatar name={manager.firstName + " " + manager.lastName} boxSize="40px" borderRadius="full"  src={manager.imageUrl} alt="profile"/> : null
 
+
     return (
-        <div >
         <Flex className="header">
             <Box className="left-nav">
                 <Link to="/"><Image src={Logo} alt="project logo"height="110%" width="55%" /></Link>
             </Box>
             <Spacer />
             <HStack className="right-nav" spacing="1px">
-                    <Box><button
-                        // p={2}
-                        // size="sm"
-                        // color="white"
-                        // fontWeight="bold"
-                        // borderRadius="sm"
-                        // bgGradient="linear(to-r, teal.500,blue.500)"
-                        // _hover={{
-                        //     bgGradient: "linear(to-r, blue.500, yellow.500)",
-                        // }}
-                        >
+                <Box><button>
                     <Link to="/orders">Orders</Link></button></Box>
                 <Box><span>|</span></Box>
-                    <Box><button
-                        // p={2}
-                        // size="sm"
-                        // color="white"
-                        // fontWeight="bold"
-                        // borderRadius="sm"
-                        // bgGradient="linear(to-r, teal.500,blue.500)"
-                        // _hover={{
-                        //     bgGradient: "linear(to-r, blue.500, yellow.500)",
-                        // }}
-                        onClick={handleAuth}>{authLinkText}</button></Box>
-                        <Box><Link className="nav-link" to="/account">{userIcon}</Link></Box>
+                <Box><button onClick={handleAuth}>{authLinkText}</button></Box>
+                <Box><button ref={btnRef} onClick={onOpen}>{userIcon}</button></Box>
+                <Drawer
+                    isOpen={isOpen}
+                    placement="right"
+                    onClose={onClose}
+                    finalFocusRef={btnRef}
+                    >
+                    <DrawerOverlay />
+                    <DrawerContent>
+                        <DrawerCloseButton size="sm"/>
+                        <DrawerHeader align="center" >User Account</DrawerHeader>
+                        <DrawerBody>
+                            <AccountPage />
+                        </DrawerBody>
+                    </DrawerContent>
+                </Drawer>
             </HStack>
         </Flex>
-        </div>
     )
 }
 

src/index.css

@@ -159,22 +159,36 @@ input[type=text]:focus {
 
 
 .table-header {
-  background-color: rgba(228, 158, 67, 0.5);
+  background-color: rgba(236, 157, 65, 0.534);
   color: black;
 }
 
 
+
+/* User Drawer */
+
 .account {
-  padding: 50px 0;
+  padding: 40px 0;
+  border-top: 1px solid rgba(68, 64, 64, 0.363);
+  border-bottom: 1px solid rgba(68, 64, 64, 0.363);
 }
 
 
+/* .user-name {
+  padding-top: 3.5px;
+} */
+
+
+/* .chakra-stack__divider.css-vhtjkn {
+  height: -140px;
+} */
+
 
 /* footer */
 
 .footer {
   padding: 5px 0;
-  border-bottom: 3px solid rgba(80, 76, 69, 0.603);
+  border-bottom: 2.5px solid rgba(80, 76, 69, 0.603);
   background-color: rgba(216, 130, 32, 0.404);
   flex-shrink: 0;
   font-size: 12px;

src/pages/AccountPage.tsx

@@ -3,55 +3,31 @@ import {useGoogleAuth} from 'hooks'
 const AccountPage = () => {
     const { manager } = useGoogleAuth();
     return (
-        <Center className="account">
-            <Flex>
-                <Box w="170px" h="10">
+        <VStack className="account">
             <Avatar name={manager.firstName + " " + manager.lastName} size="2xl" src={manager.imageUrl} alt="profile" />
-                </Box>
-                <Spacer />
             <Box w="270px" >
                 <VStack 
                     divider={<StackDivider borderColor="gray.200" />}
                     spacing={4}
-                        align="stretch"
+                    align="center"
                 >
-                        <Box h="40px"                         // p={2}
+                <Box h="5px" className="user-name">{manager.firstName} {manager.lastName}</Box>
+                <Box h="28px"
+                    w="280px"                      
                     size="sm"
+                    align="center"
                     color="white"
                     fontWeight="bold"
-                            borderRadius="sm"
+                    borderRadius="md"
                     bgGradient="linear(to-r, teal.500,blue.500)"
                     // _hover={{
-                            //     bgGradient: "linear(to-r, orange.500, green.500)",
-                            // }}
-                            >Email: {manager.email }
-                        </Box>
-                        <Box h="40px"
-                            size="sm"
-                            color="white"
-                            fontWeight="bold"
-                            borderRadius="sm"
-                            bgGradient="linear(to-r, blue.500,yellow.500)"
-                            // _hover={{
                     //     bgGradient: "linear(to-r, blue.500, yellow.500)",
-                            // }}>
-                            >First Name: {manager.firstName}
-                        </Box>
-                        <Box h="40px"
-                            size="sm"
-                            color="white"
-                            fontWeight="bold"
-                            borderRadius="sm"
-                            bgGradient="linear(to-r, teal.500,purple.400)"
-                            // _hover={{
-                            //     bgGradient: "linear(to-r, blue.500, yellow.500)",
-                            // }}>
-                            >Last Name: {manager.lastName}
+                    // }}
+                    >{manager.email }
                 </Box>
                 </VStack>
             </Box>
-            </Flex>
-        </Center>
+        </VStack>
     )
 }
 

src/router/MainRouter.tsx

@@ -15,7 +15,7 @@ const MainRouter: React.FC = () => {
                         <Nav />
                         <main className="content">
                             <Switch>
-                                <PrivateRoute path="/account" component={AccountPage} />
+                                {/* <PrivateRoute path="/account" component={AccountPage} /> */}
                                 <PublicRoute exact path="/" component={HomePage} />
                                 <PrivateRoute path="/orders/:id" component={OrderShowPage} />
                                 <PrivateRoute path="/orders" component={OrderIndexPage} />