Removed mantine libraries; Removed mandatory authentication
This commit is contained in:
@ -1,11 +1,11 @@
|
||||
import { useMantineColorScheme } from '@mantine/core';
|
||||
import { Outlet, useNavigate } from 'react-router-dom';
|
||||
import { IconLogout, IconSettings, IconMoon, IconSun, IconMenu2, IconUser } from '@tabler/icons-react';
|
||||
import { Outlet, useLocation, useNavigate } from 'react-router-dom';
|
||||
import { IconLogout, IconSettings, IconMoon, IconSun, IconMenu2, IconUser, IconLogin } from '@tabler/icons-react';
|
||||
import { getUserData, logout, useAuthStore } from '../store/auth';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { UserData } from '../interfaces/auth';
|
||||
import { pages } from '../constants/app';
|
||||
import { Button, Image, makeStyles, Menu, MenuButton, MenuItem, MenuList, MenuPopover, MenuTrigger, Text } from '@fluentui/react-components';
|
||||
import { setColorScheme, useAppStore } from '../store/app';
|
||||
|
||||
const useStyles = makeStyles({
|
||||
root: {
|
||||
@ -49,6 +49,8 @@ const useStyles = makeStyles({
|
||||
|
||||
function DashboardLayout() {
|
||||
const navigate = useNavigate()
|
||||
const location = useLocation()
|
||||
const { colorScheme } = useAppStore()
|
||||
|
||||
const getPageTitle = () => {
|
||||
const currentPath = location.pathname
|
||||
@ -69,8 +71,6 @@ function DashboardLayout() {
|
||||
}
|
||||
}, [authStore])
|
||||
|
||||
const { colorScheme, setColorScheme } = useMantineColorScheme();
|
||||
|
||||
const classes = useStyles()
|
||||
|
||||
const [navbarOpen, setNavbarOpen] = useState(true)
|
||||
@ -80,7 +80,6 @@ function DashboardLayout() {
|
||||
<div className={classes.header}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
alignItems: 'center',
|
||||
gap: '0.75rem',
|
||||
@ -96,29 +95,30 @@ function DashboardLayout() {
|
||||
|
||||
</div>
|
||||
|
||||
<div style={{ flexShrink: 0 }}>
|
||||
<Menu positioning={{ autoSize: true }}>
|
||||
<MenuTrigger>
|
||||
<MenuButton appearance='transparent' icon={<IconUser />}>{`${userData?.name} ${userData?.surname}`}</MenuButton>
|
||||
</MenuTrigger>
|
||||
<Menu positioning={{ autoSize: true }}>
|
||||
<MenuTrigger>
|
||||
<MenuButton appearance='transparent' icon={authStore.isAuthenticated ? <IconUser /> : <IconSettings />}>{authStore.isAuthenticated && `${userData?.name} ${userData?.surname}`}</MenuButton>
|
||||
</MenuTrigger>
|
||||
|
||||
<MenuPopover>
|
||||
<MenuList>
|
||||
<MenuItem icon={
|
||||
colorScheme === 'dark' ? <IconMoon /> : <IconSun />
|
||||
} onClick={() => colorScheme === 'dark' ? setColorScheme('light') : setColorScheme('dark')}>Тема: {colorScheme === 'dark' ? 'тёмная' : 'светлая'}</MenuItem>
|
||||
<MenuItem icon={<IconSettings />} onClick={() => navigate('/settings')}>Настройки профиля</MenuItem>
|
||||
<MenuItem icon={<IconLogout />} onClick={() => {
|
||||
logout()
|
||||
<MenuPopover>
|
||||
<MenuList>
|
||||
{!authStore.isAuthenticated && <MenuItem icon={<IconLogin />} onClick={() => navigate('/auth/signin')}>Войти</MenuItem>}
|
||||
|
||||
<MenuItem icon={colorScheme === 'dark' ? <IconMoon /> : <IconSun />} onClick={() => colorScheme === 'dark' ? setColorScheme('light') : setColorScheme('dark')}>Тема: {colorScheme === 'dark' ? 'тёмная' : 'светлая'}</MenuItem>
|
||||
{authStore.isAuthenticated && <MenuItem icon={<IconSettings />} onClick={() => navigate('/settings')}>Настройки профиля</MenuItem>}
|
||||
{authStore.isAuthenticated && <MenuItem icon={<IconLogout />} onClick={() => {
|
||||
logout()
|
||||
|
||||
if (pages.find(page => page.path === '/auth/signin')?.enabled) {
|
||||
navigate("/auth/signin")
|
||||
}}>Выход</MenuItem>
|
||||
<MenuItem icon={<Image src={'/logo2.svg'} width={24} />}>
|
||||
0.1.0
|
||||
</MenuItem>
|
||||
</MenuList>
|
||||
</MenuPopover>
|
||||
</Menu>
|
||||
</div>
|
||||
}
|
||||
}}>Выход</MenuItem>}
|
||||
<MenuItem icon={<Image src={'/logo2.svg'} width={24} />}>
|
||||
0.1.0
|
||||
</MenuItem>
|
||||
</MenuList>
|
||||
</MenuPopover>
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -127,7 +127,7 @@ function DashboardLayout() {
|
||||
maxWidth: navbarOpen ? '200px' : '2.70rem',
|
||||
}}>
|
||||
{pages.filter((page) => page.drawer).filter((page) => page.enabled).map((item) => (
|
||||
<Button key={item.path} style={{ paddingLeft: '0.5rem', flexShrink: 0, flexWrap: 'nowrap', textWrap: 'nowrap', borderRadius: 0 }} appearance='subtle' onClick={() => navigate(item.path)}>
|
||||
<Button key={item.path} style={{ paddingLeft: '0.5rem', flexShrink: 0, flexWrap: 'nowrap', textWrap: 'nowrap', borderRadius: 0 }} appearance={location.pathname === item.path ? 'primary' : 'subtle'} onClick={() => navigate(item.path)}>
|
||||
<div style={{ display: 'flex', }}>
|
||||
{item.icon}
|
||||
</div>
|
||||
@ -143,9 +143,6 @@ function DashboardLayout() {
|
||||
</div>
|
||||
|
||||
</Button>
|
||||
// <NavItem style={{ flexShrink: 0, flexWrap: 'nowrap', textWrap: 'nowrap' }} onClick={() => navigate(item.path)} icon={item.icon} value={item.path}>
|
||||
// {item.label}
|
||||
// </NavItem>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -156,116 +153,6 @@ function DashboardLayout() {
|
||||
|
||||
</div>
|
||||
)
|
||||
|
||||
// return (
|
||||
// <AppShell
|
||||
// header={{ height: 60 }}
|
||||
// navbar={{
|
||||
// width: desktopOpened ? 200 : 50,
|
||||
// breakpoint: 'sm',
|
||||
// collapsed: { mobile: !mobileOpened },
|
||||
// }}
|
||||
// >
|
||||
// <AppShell.Header>
|
||||
// <Flex h="100%" px="md" w='100%' align='center' gap='sm'>
|
||||
// <Group>
|
||||
// <Burger opened={mobileOpened} onClick={toggleMobile} hiddenFrom="sm" size="sm" />
|
||||
// <Burger opened={desktopOpened} onClick={toggleDesktop} visibleFrom="sm" size="sm" />
|
||||
// </Group>
|
||||
|
||||
// <Group w='auto'>
|
||||
// <Text fw='600'>{getPageTitle()}</Text>
|
||||
// </Group>
|
||||
|
||||
// <Group id='header-portal' w='auto' ml='auto'>
|
||||
|
||||
// </Group>
|
||||
|
||||
// <Group style={{ flexShrink: 0 }}>
|
||||
// <Menu
|
||||
// width={260}
|
||||
// position="bottom-end"
|
||||
// transitionProps={{ transition: 'pop-top-right' }}
|
||||
// withinPortal
|
||||
// >
|
||||
// <Menu.Target>
|
||||
// <Button variant='transparent'>
|
||||
// <Group gap={7}>
|
||||
// <Avatar name={`${userData?.name} ${userData?.surname}`} radius="xl" size={30} />
|
||||
// <Text fw={500} size="sm" lh={1} mr={3}>
|
||||
// {`${userData?.name} ${userData?.surname}`}
|
||||
// </Text>
|
||||
// <IconChevronDown style={{ width: rem(12), height: rem(12) }} stroke={1.5} />
|
||||
// </Group>
|
||||
// </Button>
|
||||
// </Menu.Target>
|
||||
// <Menu.Dropdown>
|
||||
// <Menu.Label>{userData?.login}</Menu.Label>
|
||||
// <Menu.Item
|
||||
// leftSection={
|
||||
// colorScheme === 'dark' ? <IconMoon style={{ width: rem(16), height: rem(16) }} stroke={1.5} /> : <IconSun style={{ width: rem(16), height: rem(16) }} stroke={1.5} />
|
||||
// }
|
||||
// onClick={() => colorScheme === 'dark' ? setColorScheme('light') : setColorScheme('dark')}
|
||||
// >
|
||||
// Тема: {colorScheme === 'dark' ? 'тёмная' : 'светлая'}
|
||||
// </Menu.Item>
|
||||
// <Menu.Item
|
||||
// leftSection={
|
||||
// <IconSettings style={{ width: rem(16), height: rem(16) }} stroke={1.5} />
|
||||
// }
|
||||
// onClick={() => navigate('/settings')}
|
||||
// >
|
||||
// Настройки профиля
|
||||
// </Menu.Item>
|
||||
// <Menu.Item
|
||||
// onClick={() => {
|
||||
// logout()
|
||||
// navigate("/auth/signin")
|
||||
// }}
|
||||
// leftSection={<IconLogout style={{ width: rem(16), height: rem(16) }} stroke={1.5} />}
|
||||
// >
|
||||
// Выход
|
||||
// </Menu.Item>
|
||||
|
||||
// <Menu.Item>
|
||||
// <Flex gap='sm' align='center'>
|
||||
// <Image src={'/logo2.svg'} w={32} />
|
||||
// <Text>0.1.0</Text>
|
||||
// </Flex>
|
||||
// </Menu.Item>
|
||||
// </Menu.Dropdown>
|
||||
// </Menu>
|
||||
// </Group>
|
||||
// </Flex>
|
||||
// </AppShell.Header>
|
||||
// <AppShell.Navbar style={{ transition: "width 0.2s ease" }}>
|
||||
// {pages.filter((page) => page.drawer).filter((page) => page.enabled).map((item) => (
|
||||
// <NavLink
|
||||
// key={item.path}
|
||||
// onClick={() => navigate(item.path)}
|
||||
// label={item.label}
|
||||
// leftSection={item.icon}
|
||||
// active={location.pathname === item.path}
|
||||
// style={{ textWrap: 'nowrap' }}
|
||||
// // styles={(theme, { active }) => ({
|
||||
// // root: {
|
||||
// // color: active ? theme.colors.blue[6] : theme.colors.dark[5],
|
||||
// // fontWeight: active ? "bold" : "normal",
|
||||
// // },
|
||||
// // leftSection: {
|
||||
// // color: active ? theme.colors.blue[6] : theme.colors.dark[5], // Icon color
|
||||
// // }
|
||||
// // })}
|
||||
// />
|
||||
// ))}
|
||||
// </AppShell.Navbar>
|
||||
// <AppShell.Main>
|
||||
// <Flex bg={colorScheme === 'dark' ? undefined : '#E8E8E8'} w={{ sm: desktopOpened ? 'calc(100% - 200px)' : 'calc(100% - 50px)', base: '100%' }} h={'calc(100% - 60px)'} style={{ transition: "width 0.2s ease" }} pos={'fixed'}>
|
||||
// <Outlet />
|
||||
// </Flex>
|
||||
// </AppShell.Main>
|
||||
// </AppShell>
|
||||
// )
|
||||
}
|
||||
|
||||
export default DashboardLayout
|
||||
Reference in New Issue
Block a user