From 38422ab0cd6826fea1bf8c71a0fa06f07676a489 Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Tue, 24 Aug 2021 20:07:33 +0300
Subject: [PATCH] feat: user info in mobile nav

---
 src/components/Header/User/UserInfo.tsx |  2 +-
 src/components/Nav/Desktop/NavLink.tsx  |  6 ++-
 src/components/Nav/Mobile/Nav.tsx       | 53 ++++++++++++++++++++++---
 3 files changed, 53 insertions(+), 8 deletions(-)

diff --git a/src/components/Header/User/UserInfo.tsx b/src/components/Header/User/UserInfo.tsx
index e49e2d0..0f598df 100644
--- a/src/components/Header/User/UserInfo.tsx
+++ b/src/components/Header/User/UserInfo.tsx
@@ -44,7 +44,7 @@ const UserInfo: React.FC = () => {
       <Menu>
         <MenuButton as={Button} pr={6}>
           <Flex alignItems='center'>
-            <Avatar size='sm' name='user name' marginRight={3} />
+            <Avatar size='sm' name={`${userStore.me.first_name} ${userStore.me.last_name}`} marginRight={3} />
             <Text as='span' mr={2}>
               {`${userStore.me.first_name} ${userStore.me.last_name}`}
             </Text>
diff --git a/src/components/Nav/Desktop/NavLink.tsx b/src/components/Nav/Desktop/NavLink.tsx
index d2a5a48..7af7ddb 100644
--- a/src/components/Nav/Desktop/NavLink.tsx
+++ b/src/components/Nav/Desktop/NavLink.tsx
@@ -40,7 +40,11 @@ const NavLink: React.FC<{ link: LinkType; onCloseDrawer?: () => void }> = ({ lin
     >
       <Box
         color={history.location.pathname === link.location || activeLink.title === link.title ? 'blue.400' : ''}
-        backgroundColor={activeLink.title === link.title ? `${colorMode === 'dark' ? 'gray.700' : 'gray.100'}` : ''}
+        backgroundColor={
+          activeLink.title === link.title || history.location.pathname === link.location
+            ? `${colorMode === 'dark' ? 'gray.700' : 'gray.100'}`
+            : ''
+        }
         alignItems='center'
         borderRadius='9999px'
         display='flex'
diff --git a/src/components/Nav/Mobile/Nav.tsx b/src/components/Nav/Mobile/Nav.tsx
index 3a6f724..3f45bc8 100644
--- a/src/components/Nav/Mobile/Nav.tsx
+++ b/src/components/Nav/Mobile/Nav.tsx
@@ -1,12 +1,18 @@
 import React from 'react';
-import { Flex } from '@chakra-ui/layout';
-import { Drawer, DrawerOverlay, DrawerContent, DrawerHeader, DrawerBody } from '@chakra-ui/modal';
+import { Avatar } from '@chakra-ui/avatar';
+import { Flex, Box, Text } from '@chakra-ui/layout';
+import { Drawer, DrawerOverlay, DrawerContent, DrawerBody } from '@chakra-ui/modal';
 import { HamburgerIcon } from '@chakra-ui/icons';
-import { useDisclosure, IconButton } from '@chakra-ui/react';
+import { useDisclosure, IconButton, useColorMode, Skeleton } from '@chakra-ui/react';
 import config from '../../../config';
 import NavLink from '../Desktop/NavLink';
+import { useRootStore } from '../../../hooks/useRootStore';
+import { Link } from 'react-router-dom';
+import { observer } from 'mobx-react';
 
 const NavMobile: React.FC = () => {
+  const { userStore } = useRootStore();
+  const { colorMode } = useColorMode();
   const { isOpen, onOpen, onClose } = useDisclosure();
 
   return (
@@ -14,14 +20,49 @@ const NavMobile: React.FC = () => {
       <IconButton aria-label='Navigation' icon={<HamburgerIcon />} onClick={onOpen} />
       <Drawer placement='left' onClose={onClose} isOpen={isOpen}>
         <DrawerOverlay />
-        <DrawerContent>
-          <DrawerHeader borderBottomWidth='1px'>Navigation</DrawerHeader>
+        <DrawerContent backgroundColor={colorMode === 'dark' ? 'gray.800' : 'white'}>
           <DrawerBody>
             <Flex as='nav' flexDirection='column' alignItems='flex-start' textDecoration='none'>
               {config.links.map((link, i) => (
                 <NavLink link={link} key={i} onCloseDrawer={onClose} />
               ))}
             </Flex>
+            {userStore.me ? (
+              <Box
+                position='absolute'
+                bottom={0}
+                right={0}
+                left={0}
+                minHeight='60px'
+                padding='10px'
+                margin='5'
+                borderRadius='md'
+                backgroundColor={colorMode === 'dark' ? 'gray.700' : 'gray.100'}
+              >
+                <Flex alignItems='center'>
+                  <Avatar size='sm' name={`${userStore.me.first_name} ${userStore.me.last_name}`} marginRight={3} />
+                  <Flex flexDirection='column'>
+                    <Text as='span' mr={2} lineHeight='1.2'>
+                      {`${userStore.me.first_name} ${userStore.me.last_name}`}
+                    </Text>
+                    <Link to={`/profile`} style={{ fontSize: '13px', textDecoration: 'underline' }} onClick={onClose}>
+                      View profile
+                    </Link>
+                  </Flex>
+                </Flex>
+              </Box>
+            ) : (
+              <Skeleton
+                h='60px'
+                position='absolute'
+                borderRadius='md'
+                bottom={0}
+                right={0}
+                left={0}
+                padding='10px'
+                margin='5'
+              />
+            )}
           </DrawerBody>
         </DrawerContent>
       </Drawer>
@@ -29,4 +70,4 @@ const NavMobile: React.FC = () => {
   );
 };
 
-export default NavMobile;
+export default observer(NavMobile);