feat: user info in mobile nav

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>

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'

src/components/Nav/Mobile/Nav.tsx

@@ -1,12 +1,18 @@
 import React from 'react';
-import { Flex } from '@chakra-ui/layout';
+import { Avatar } from '@chakra-ui/avatar';
-import { Drawer, DrawerOverlay, DrawerContent, DrawerHeader, DrawerBody } from '@chakra-ui/modal';
+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>
+        <DrawerContent backgroundColor={colorMode === 'dark' ? 'gray.800' : 'white'}>
-          <DrawerHeader borderBottomWidth='1px'>Navigation</DrawerHeader>
           <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);