bubble/educt-client
1
0
Fork 0
mirror of https://github.com/sergeyyarkov/educt-client.git synced 2026-10-11 10:19:22 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: user info in mobile nav

Browse Source
This commit is contained in:
Sergey Yarkov 2021-08-24 20:07:33 +03:00
parent 95494c5658
commit 38422ab0cd
3 changed files with 53 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Header/User/UserInfo.tsx
View File

@ -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>

6
src/components/Nav/Desktop/NavLink.tsx
View File

@ -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'

53
src/components/Nav/Mobile/Nav.tsx
View File

@ -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);