docs/TopBar.js at main · thunderplays/docs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
"use client";

import { Flex, Text, IconButton, Button, useColorMode, useColorModeValue, Menu, MenuButton, MenuList, MenuItem, Avatar } from '@chakra-ui/react';
import { SunIcon, MoonIcon } from '@chakra-ui/icons';
import { useAuth } from '../context/AuthContext';

export default function TopBar() {
  const { colorMode, toggleColorMode } = useColorMode();
  const bgColor = useColorModeValue('gray.100', 'gray.700');
  const { user, logout } = useAuth();

  return (
    <Flex
      as="header"
      w="100%"
      p={4}
      bg={bgColor}
      position="fixed"
      top={0}
      zIndex={10}
      justify="space-between"
      align="center"
    >
      <Text fontSize="lg" fontWeight="bold">
        {user ? `Bem-vindo, ${user.nome}` : 'Alpha Project'}
      </Text>

      <Flex align="center">
        <IconButton
          aria-label="Toggle color mode"
          icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
          onClick={toggleColorMode}
          mr={4}
        />
        {user && (
          <Menu>
            <MenuButton>
              <Avatar name={user.nome} src="https://bit.ly/broken-link" />
            </MenuButton>
            <MenuList>
              <MenuItem>Change Image</MenuItem>
              <MenuItem>Change Login/Senha</MenuItem>
              <MenuItem onClick={logout}>Sign Out</MenuItem>
            </MenuList>
          </Menu>
        )}
      </Flex>
    </Flex>
  );
}