diff --git a/public/index.html b/public/index.html index ec3f9d4..41fcda0 100644 --- a/public/index.html +++ b/public/index.html @@ -1,31 +1,23 @@ - - - - - - - - Web3Dev - - - - - -
- - + + + + + + + + Web3Task + + + + + + +
+ + + \ No newline at end of file diff --git a/src/content/applications/Tasks/HomeTasks.tsx b/src/content/applications/Tasks/HomeTasks.tsx index 95b6a06..28f85d0 100644 --- a/src/content/applications/Tasks/HomeTasks.tsx +++ b/src/content/applications/Tasks/HomeTasks.tsx @@ -7,6 +7,7 @@ import CoverHomeTasks from "../../../components/Cover/CoverHomeTasks"; import usePagination from "src/components/Pagination"; import SearchFilters from "src/components/Task/SearchFiltersTasks"; import { useSearchFilters } from "src/hooks/useSearchFilters"; +import { Helmet } from "react-helmet-async"; const HomeTasks = () => { const taskService = useTaskService(); @@ -50,6 +51,9 @@ const HomeTasks = () => { return ( <> + + Web3Task + diff --git a/src/content/applications/Tasks/details/DetailsTask.tsx b/src/content/applications/Tasks/details/DetailsTask.tsx index 6045bdd..26a239e 100644 --- a/src/content/applications/Tasks/details/DetailsTask.tsx +++ b/src/content/applications/Tasks/details/DetailsTask.tsx @@ -27,7 +27,7 @@ const DetailsTask = () => { return ( <> - Web3Task - Profile + Web3Task - Task Details { @@ -74,7 +75,7 @@ const AdminOptions = () => { case "setRole": { try { await handleRole(role.roleId, role.authorizedAddress, role.isAuthorized); - + } catch (error) { console.error('Erro ao enviar o formulário:', error); } @@ -112,11 +113,14 @@ const AdminOptions = () => { return ( <> + + Web3Task - Adm Settings + - + Deposit (handleInputChange('deposit', event))} name='roleId' /> (handleInputChange('deposit', event))} name='amount' /> diff --git a/src/content/applications/Tasks/settings/CreateTask.tsx b/src/content/applications/Tasks/settings/CreateTask.tsx index 0331d84..2f82492 100644 --- a/src/content/applications/Tasks/settings/CreateTask.tsx +++ b/src/content/applications/Tasks/settings/CreateTask.tsx @@ -14,6 +14,7 @@ import { Task } from "src/models/task"; import SuspenseLoader from 'src/components/SuspenseLoader'; import CoverCreateTask from '../../../../components/Cover/CoverCreateTask'; import { useSnackBar } from 'src/contexts/SnackBarContext'; +import { Helmet } from 'react-helmet-async'; let newTask: Task = { status: 0, @@ -151,111 +152,115 @@ const CreateTask = ({ data }) => { }, [setLoading]); return ( - - - + <> + + Web3Task - Create Task + + - - - { - loading ? : ( - - - -

{errors.title?.message}

+ display={'flex'} + justifyContent={'center'} + alignItems={'center'} + height={'100%'} + flexDirection={'column'}> - -

{errors.authorizedRoles?.message}

+ + + + { + loading ? : ( + + + +

{errors.title?.message}

- -

{errors.creatorRole?.message}

+ +

{errors.authorizedRoles?.message}

- + +

{errors.creatorRole?.message}

- + - + - - - Pod3LabsRecompensaIcon - -
- -

{errors.valueReward?.message}

-
-
- setExpireDate(newValue)} - slotProps={{ - textField: { size: 'medium' }, - openPickerIcon: { style: { color: theme.palette.primary.main } }, - switchViewButton: { style: { color: 'info' } } - }} - /> - {/*

{errors.endDate?.message}

*/} -
- + - + + + Pod3LabsRecompensaIcon + +
+ +

{errors.valueReward?.message}

+
+
+ setExpireDate(newValue)} + slotProps={{ + textField: { size: 'medium' }, + openPickerIcon: { style: { color: theme.palette.primary.main } }, + switchViewButton: { style: { color: 'info' } } + }} + /> + {/*

{errors.endDate?.message}

*/} +
+ - - - ) - } - - + + + + ) + } + + + ); } diff --git a/src/content/overview/Hero/index.tsx b/src/content/overview/Hero/index.tsx deleted file mode 100644 index 1b1ad0a..0000000 --- a/src/content/overview/Hero/index.tsx +++ /dev/null @@ -1,150 +0,0 @@ -import { Box, Button, Container, Grid, Typography } from "@mui/material"; -import { Link as RouterLink } from "react-router-dom"; - -import { styled } from "@mui/material/styles"; - -const TypographyH1 = styled(Typography)( - ({ theme }) => ` - font-size: ${theme.typography.pxToRem(50)}; -` -); - -const TypographyH2 = styled(Typography)( - ({ theme }) => ` - font-size: ${theme.typography.pxToRem(17)}; -` -); - -const LabelWrapper = styled(Box)( - ({ theme }) => ` - background-color: ${theme.colors.success.main}; - color: ${theme.palette.success.contrastText}; - font-weight: bold; - border-radius: 30px; - text-transform: uppercase; - display: inline-block; - font-size: ${theme.typography.pxToRem(11)}; - padding: ${theme.spacing(0.5)} ${theme.spacing(1.5)}; - margin-bottom: ${theme.spacing(2)}; -` -); - -const MuiAvatar = styled(Box)( - ({ theme }) => ` - width: ${theme.spacing(8)}; - height: ${theme.spacing(8)}; - border-radius: ${theme.general.borderRadius}; - background-color: #e5f7ff; - flex-shrink: 0; - display: flex; - align-items: center; - justify-content: center; - margin: 0 auto ${theme.spacing(2)}; - - img { - width: 60%; - height: 60%; - display: block; - } -` -); - -const TsAvatar = styled(Box)( - ({ theme }) => ` - width: ${theme.spacing(8)}; - height: ${theme.spacing(8)}; - border-radius: ${theme.general.borderRadius}; - background-color: #dfebf6; - flex-shrink: 0; - display: flex; - align-items: center; - justify-content: center; - margin: 0 auto ${theme.spacing(2)}; - - img { - width: 60%; - height: 60%; - display: block; - } -` -); - -function Hero() { - - return ( - - - - Version 1.0.0 - - { 'hero.title' } - - - { 'hero.text1' } - - - - - - - - Material-UI - - - - { 'hero.icon1.label' } - - - - - - Typescript - - - - { 'hero.icon2.label' } - - - - - { 'hero.text2' } - - - - - - ); -} - -export default Hero; diff --git a/src/content/overview/index.tsx b/src/content/overview/index.tsx deleted file mode 100644 index fcc2cef..0000000 --- a/src/content/overview/index.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { useEffect, useState } from 'react'; -import { Box, Container, Card } from "@mui/material"; -import { Helmet } from "react-helmet-async"; -import { styled } from "@mui/material/styles"; -import Logo from "src/components/LogoSign"; -import Hero from "./Hero"; -import SuspenseLoader from 'src/components/SuspenseLoader'; - -const OverviewWrapper = styled(Box)( - () => ` - overflow: auto; - flex: 1; - overflow-x: hidden; - align-items: center; -` -); - -function Overview() { - const [ loading, setLoading ] = useState(false); - - useEffect(() => { - - setLoading(false); - }, []) - - return ( - <> - { - loading - ? - : - - - { 'overview.title' } - - - - - - - - - - - } - - ); -} - -export default Overview; diff --git a/src/layouts/SidebarLayout/Header/Buttons/Notifications/index.tsx b/src/layouts/SidebarLayout/Header/Buttons/Notifications/index.tsx deleted file mode 100644 index 0fe1b0b..0000000 --- a/src/layouts/SidebarLayout/Header/Buttons/Notifications/index.tsx +++ /dev/null @@ -1,123 +0,0 @@ -import { - alpha, - Badge, - Box, - Divider, - IconButton, - List, - ListItem, - Popover, - Tooltip, - Typography, -} from "@mui/material"; -import { useRef, useState } from "react"; -import NotificationsActiveTwoToneIcon from "@mui/icons-material/NotificationsActiveTwoTone"; -import { styled } from "@mui/material/styles"; - -import { formatDistance, subDays } from "date-fns"; - -const NotificationsBadge = styled(Badge)( - ({ theme }) => ` - - .MuiBadge-badge { - background-color: ${alpha(theme.palette.error.main, 0.1)}; - color: ${theme.palette.error.main}; - min-width: 16px; - height: 16px; - padding: 0; - - &::after { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border-radius: 50%; - box-shadow: 0 0 0 1px ${alpha(theme.palette.error.main, 0.3)}; - content: ""; - } - } -` -); - -function HeaderNotifications() { - const ref = useRef(null); - const [isOpen, setOpen] = useState(false); - - const handleOpen = (): void => { - setOpen(true); - }; - - const handleClose = (): void => { - setOpen(false); - }; - - return ( - <> - - - - - - - - - - Notifications - - - - - - - - Messaging Platform - - - {formatDistance(subDays(new Date(), 3), new Date(), { - addSuffix: true, - })} - - - - {" "} - new messages in your inbox - - - - - - - ); -} - -export default HeaderNotifications; diff --git a/src/layouts/SidebarLayout/Header/Buttons/Search/index.tsx b/src/layouts/SidebarLayout/Header/Buttons/Search/index.tsx deleted file mode 100644 index 5344864..0000000 --- a/src/layouts/SidebarLayout/Header/Buttons/Search/index.tsx +++ /dev/null @@ -1,282 +0,0 @@ -import { forwardRef, Ref, useState, ReactElement, ChangeEvent } from "react"; -import { - Avatar, - Link, - Box, - Button, - Divider, - IconButton, - InputAdornment, - lighten, - List, - ListItem, - ListItemAvatar, - TextField, - Theme, - Tooltip, - Typography, - Dialog, - DialogContent, - DialogTitle, - Slide, - Hidden, -} from "@mui/material"; -import { styled } from "@mui/material/styles"; -import { TransitionProps } from "@mui/material/transitions"; -import SearchTwoToneIcon from "@mui/icons-material/SearchTwoTone"; -import FindInPageTwoToneIcon from "@mui/icons-material/FindInPageTwoTone"; - -import ChevronRightTwoToneIcon from "@mui/icons-material/ChevronRightTwoTone"; - -const Transition = forwardRef(function Transition( - props: TransitionProps & { children: ReactElement }, - ref: Ref -) { - return ; -}); - -const DialogWrapper = styled(Dialog)( - () => ` - .MuiDialog-container { - height: auto; - } - - .MuiDialog-paperScrollPaper { - max-height: calc(100vh - 64px) - } -` -); - -const SearchInputWrapper = styled(TextField)( - ({ theme }) => ` - background: ${theme.colors.alpha.white[100]}; - .MuiFormControl-root { - border-radius: 10px; - } - - .MuiInputBase-input { - font-size: ${theme.typography.pxToRem(17)}; - } -` -); - -const DialogTitleWrapper = styled(DialogTitle)( - ({ theme }) => ` - background: ${theme.colors.alpha.black[5]}; - padding: ${theme.spacing(3)} -` -); - -function HeaderSearch() { - const [openSearchResults, setOpenSearchResults] = useState(false); - const [searchValue, setSearchValue] = useState(""); - - const handleSearchChange = (event: ChangeEvent): void => { - setSearchValue(event.target.value); - - if (event.target.value) { - if (!openSearchResults) { - setOpenSearchResults(true); - } - } else { - setOpenSearchResults(false); - } - }; - - const [open, setOpen] = useState(false); - - const handleClickOpen = () => { - setOpen(true); - }; - - const handleClose = () => { - setOpen(false); - }; - - return ( - <> - - - - - - - - - - - - ), - }} - placeholder="Search terms here..." - fullWidth - label="Search" - /> - - - - {openSearchResults && ( - - - - Search results for{" "} - - {searchValue} - - - - Advanced search - - - - - - - - - theme.palette.secondary.main, - }} - > - - - - - - - - Dashboard for Healthcare Platform - - - - lighten(theme.palette.secondary.main, 0.5), - }} - > - This page contains all the necessary information for - managing all hospital staff. - - - - - - - - - - theme.palette.secondary.main, - }} - > - - - - - - - - Example Projects Application - - - - lighten(theme.palette.secondary.main, 0.5), - }} - > - This is yet another search result pointing to a app page. - - - - - - - - - - theme.palette.secondary.main, - }} - > - - - - - - - - Search Results Page - - - - lighten(theme.palette.secondary.main, 0.5), - }} - > - Choose if you would like to show or not this typography - section here... - - - - - - - - - - - )} - - - ); -} - -export default HeaderSearch; diff --git a/src/layouts/SidebarLayout/Header/Buttons/ToggleTheme/index.tsx b/src/layouts/SidebarLayout/Header/Buttons/ToggleTheme/index.tsx deleted file mode 100644 index 8108c22..0000000 --- a/src/layouts/SidebarLayout/Header/Buttons/ToggleTheme/index.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { IconButton, Tooltip } from "@mui/material"; -import { useThemeContext } from "src/theme/ThemeProvider"; - -const HeaderToggleTheme = () => { - const { toggleTheme, themeIcon } = useThemeContext(); - - return ( - - - {themeIcon} - - - ); -}; - -export default HeaderToggleTheme; diff --git a/src/layouts/SidebarLayout/Header/Buttons/index.tsx b/src/layouts/SidebarLayout/Header/Buttons/index.tsx deleted file mode 100644 index 3e42e85..0000000 --- a/src/layouts/SidebarLayout/Header/Buttons/index.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { Box } from "@mui/material"; -import HeaderSearch from "./Search"; -import HeaderNotifications from "./Notifications"; -import HeaderToggleTheme from "./ToggleTheme"; - -function HeaderButtons() { - return ( - <> - - - - - - - - - ); -} - -export default HeaderButtons; diff --git a/src/layouts/SidebarLayout/Header/Menu/index.tsx b/src/layouts/SidebarLayout/Header/Menu/index.tsx deleted file mode 100644 index eb78575..0000000 --- a/src/layouts/SidebarLayout/Header/Menu/index.tsx +++ /dev/null @@ -1,145 +0,0 @@ -import { - Box, - List, - ListItem, - ListItemText, - Menu, - MenuItem, -} from "@mui/material"; -import { useRef, useState } from "react"; -import { NavLink } from "react-router-dom"; -import { styled } from "@mui/material/styles"; -import ExpandMoreTwoToneIcon from "@mui/icons-material/ExpandMoreTwoTone"; - -const ListWrapper = styled(Box)( - ({ theme }) => ` - .MuiTouchRipple-root { - display: none; - } - - .MuiListItem-root { - transition: ${theme.transitions.create(["color", "fill"])}; - &.MuiListItem-indicators { - padding: ${theme.spacing(1, 2)}; - - .MuiListItemText-root { - .MuiTypography-root { - &:before { - height: 4px; - width: 22px; - opacity: 0; - visibility: hidden; - display: block; - position: absolute; - bottom: -10px; - transition: all .2s; - border-radius: ${theme.general.borderRadiusLg}; - content: ""; - background: ${theme.colors.primary.main}; - } - } - } - - &.active, - &:active, - &:hover { - - background: transparent; - - .MuiListItemText-root { - .MuiTypography-root { - &:before { - opacity: 1; - visibility: visible; - bottom: 0px; - } - } - } - } - } - } -` -); - -function HeaderMenu() { - const ref = useRef(null); - const [isOpen, setOpen] = useState(false); - - const handleOpen = (): void => { - setOpen(true); - }; - - const handleClose = (): void => { - setOpen(false); - }; - - return ( - <> - - - - - - - - {'menu.item2.label'} - - } - /> - - - - {'menu.item3.label'} - - - - - } - /> - - - - - - {'menu.item3.subItens.subItem1.label'} - - - {'menu.item3.subItens.subItem2.label'} - - - - ); -} - -export default HeaderMenu; diff --git a/src/layouts/SidebarLayout/Header/UserConnect/index.tsx b/src/layouts/SidebarLayout/Header/UserConnect/index.tsx deleted file mode 100644 index da1a6ac..0000000 --- a/src/layouts/SidebarLayout/Header/UserConnect/index.tsx +++ /dev/null @@ -1,115 +0,0 @@ -import { useRef, useState } from "react"; - -import { NavLink } from "react-router-dom"; - -import { - Avatar, - Box, - Button, - Divider, - Hidden, - lighten, - List, - ListItem, - ListItemText, - Popover, - Typography, -} from "@mui/material"; - -import InboxTwoToneIcon from "@mui/icons-material/InboxTwoTone"; -import { styled } from "@mui/material/styles"; -import ExpandMoreTwoToneIcon from "@mui/icons-material/ExpandMoreTwoTone"; -import AccountBoxTwoToneIcon from "@mui/icons-material/AccountBoxTwoTone"; -import LockOpenTwoToneIcon from "@mui/icons-material/LockOpenTwoTone"; -import AccountTreeTwoToneIcon from "@mui/icons-material/AccountTreeTwoTone"; -import MessageIcon from "@mui/icons-material/Message"; - -const UserBoxButton = styled(Button)( - ({ theme }) => ` - padding-left: ${theme.spacing(1)}; - padding-right: ${theme.spacing(1)}; -` -); - -const MenuUserBox = styled(Box)( - ({ theme }) => ` - background: ${theme.colors.alpha.black[5]}; - padding: ${theme.spacing(2)}; -` -); - -const UserBoxText = styled(Box)( - ({ theme }) => ` - text-align: left; - padding-left: ${theme.spacing(1)}; -` -); - -const UserBoxLabel = styled(Typography)( - ({ theme }) => ` - font-weight: ${theme.typography.fontWeightBold}; - color: ${theme.palette.secondary.main}; - display: block; -` -); - -const UserBoxDescription = styled(Typography)( - ({ theme }) => ` - color: ${lighten(theme.palette.secondary.main, 0.5)} -` -); - -function HeaderUserConnect() { - const ref = useRef(null); - const [isOpen, setOpen] = useState(false); - - const handleOpen = (): void => { - setOpen(true); - }; - - const handleClose = (): void => { - setOpen(false); - }; - - return ( - <> - - - - Connect - Dapp - - - - - - - - - {} - - - - - - - - ); -} - -export default HeaderUserConnect; diff --git a/src/layouts/SidebarLayout/Header/Userbox/index.tsx b/src/layouts/SidebarLayout/Header/Userbox/index.tsx deleted file mode 100644 index 6c45d6c..0000000 --- a/src/layouts/SidebarLayout/Header/Userbox/index.tsx +++ /dev/null @@ -1,149 +0,0 @@ -import { useRef, useState } from "react"; - -import { NavLink } from "react-router-dom"; - -import { - Avatar, - Box, - Button, - Divider, - Hidden, - lighten, - List, - ListItem, - ListItemText, - Popover, - Typography, -} from "@mui/material"; - -import InboxTwoToneIcon from "@mui/icons-material/InboxTwoTone"; -import { styled } from "@mui/material/styles"; -import ExpandMoreTwoToneIcon from "@mui/icons-material/ExpandMoreTwoTone"; -import AccountBoxTwoToneIcon from "@mui/icons-material/AccountBoxTwoTone"; -import LockOpenTwoToneIcon from "@mui/icons-material/LockOpenTwoTone"; -import AccountTreeTwoToneIcon from "@mui/icons-material/AccountTreeTwoTone"; - -const UserBoxButton = styled(Button)( - ({ theme }) => ` - padding-left: ${theme.spacing(1)}; - padding-right: ${theme.spacing(1)}; -` -); - -const MenuUserBox = styled(Box)( - ({ theme }) => ` - background: ${theme.colors.alpha.black[5]}; - padding: ${theme.spacing(2)}; -` -); - -const UserBoxText = styled(Box)( - ({ theme }) => ` - text-align: left; - padding-left: ${theme.spacing(1)}; -` -); - -const UserBoxLabel = styled(Typography)( - ({ theme }) => ` - font-weight: ${theme.typography.fontWeightBold}; - color: ${theme.palette.secondary.main}; - display: block; -` -); - -const UserBoxDescription = styled(Typography)( - ({ theme }) => ` - color: ${theme.palette.secondary.main} -` -); - -function HeaderUserbox() { - const user = { - name: "Jonas Silva", - avatar: "/static/images/avatars/1.jpg", - jobtitle: "Developer", - }; - - const ref = useRef(null); - const [isOpen, setOpen] = useState(false); - - const handleOpen = (): void => { - setOpen(true); - }; - - const handleClose = (): void => { - setOpen(false); - }; - - return ( - <> - - - - - {user.name} - - {user.jobtitle} - - - - - - - - - - - - {user.name} - - {user.jobtitle} - - - - - - - - - - - - - - - - - - - - - - - - - ); -} - -export default HeaderUserbox; diff --git a/src/layouts/SidebarLayout/Header/index.tsx b/src/layouts/SidebarLayout/Header/index.tsx deleted file mode 100644 index 7c088a7..0000000 --- a/src/layouts/SidebarLayout/Header/index.tsx +++ /dev/null @@ -1,121 +0,0 @@ -import { useContext, useEffect, useState } from "react"; - -import { - Box, - alpha, - Stack, - lighten, - Divider, - IconButton, - Tooltip, - styled, - useTheme, -} from "@mui/material"; -import MenuTwoToneIcon from "@mui/icons-material/MenuTwoTone"; -import { SidebarContext } from "src/contexts/SidebarContext"; -import CloseTwoToneIcon from "@mui/icons-material/CloseTwoTone"; - -import HeaderButtons from "./Buttons"; -import HeaderUserbox from "./Userbox"; -import HeaderUserConnect from "./UserConnect"; -import HeaderMenu from "./Menu"; - - -const HeaderWrapper = styled(Box)( - ({ theme }) => ` - height: ${theme.header.height}; - color: ${theme.header.textColor}; - padding: ${theme.spacing(0, 2)}; - right: 0; - z-index: 6; - background-color: ${alpha(theme.header.background, 0.95)}; - backdrop-filter: blur(3px); - position: fixed; - justify-content: space-between; - width: 100%; - @media (min-width: ${theme.breakpoints.values.lg}px) { - left: ${theme.sidebar.width}; - width: auto; - } -` -); - -function Header() { - const { sidebarToggle, toggleSidebar } = useContext(SidebarContext); - const theme = useTheme(); - const [isConnected, setConnected] = useState(false); - - - const connect = async () => { - - } - - useEffect(() => { - if (!isConnected){ - connect(); - } - },[]) - - return ( - - } - alignItems="center" - spacing={2} - > - - - - {isConnected ? ( - <> - - - - ) : ( - <> - - - - )} - - - - {!sidebarToggle ? ( - - ) : ( - - )} - - - - - - ); -} - -export default Header; diff --git a/src/layouts/SidebarLayout/Sidebar/SidebarMenu/index.tsx b/src/layouts/SidebarLayout/Sidebar/SidebarMenu/index.tsx deleted file mode 100644 index 125aa04..0000000 --- a/src/layouts/SidebarLayout/Sidebar/SidebarMenu/index.tsx +++ /dev/null @@ -1,240 +0,0 @@ -import { useContext } from "react"; -import { - ListSubheader, - alpha, - Box, - List, - styled, - Button, - ListItem, -} from "@mui/material"; -import { NavLink as RouterLink } from "react-router-dom"; -import { SidebarContext } from "src/contexts/SidebarContext"; - -import DesignServicesTwoToneIcon from "@mui/icons-material/DesignServicesTwoTone"; -import BrightnessLowTwoToneIcon from "@mui/icons-material/BrightnessLowTwoTone"; -import MmsTwoToneIcon from "@mui/icons-material/MmsTwoTone"; -import TableChartTwoToneIcon from "@mui/icons-material/TableChartTwoTone"; -import AccountCircleTwoToneIcon from "@mui/icons-material/AccountCircleTwoTone"; -import BallotTwoToneIcon from "@mui/icons-material/BallotTwoTone"; -import BeachAccessTwoToneIcon from "@mui/icons-material/BeachAccessTwoTone"; -import EmojiEventsTwoToneIcon from "@mui/icons-material/EmojiEventsTwoTone"; -import FilterVintageTwoToneIcon from "@mui/icons-material/FilterVintageTwoTone"; -import HowToVoteTwoToneIcon from "@mui/icons-material/HowToVoteTwoTone"; -import LocalPharmacyTwoToneIcon from "@mui/icons-material/LocalPharmacyTwoTone"; -import RedeemTwoToneIcon from "@mui/icons-material/RedeemTwoTone"; -import SettingsTwoToneIcon from "@mui/icons-material/SettingsTwoTone"; -import TrafficTwoToneIcon from "@mui/icons-material/TrafficTwoTone"; -import CheckBoxTwoToneIcon from "@mui/icons-material/CheckBoxTwoTone"; -import ChromeReaderModeTwoToneIcon from "@mui/icons-material/ChromeReaderModeTwoTone"; -import WorkspacePremiumTwoToneIcon from "@mui/icons-material/WorkspacePremiumTwoTone"; -import CameraFrontTwoToneIcon from "@mui/icons-material/CameraFrontTwoTone"; -import DisplaySettingsTwoToneIcon from "@mui/icons-material/DisplaySettingsTwoTone"; -import LogoDev from "@mui/icons-material/LogoDev"; - -const MenuWrapper = styled(Box)( - ({ theme }) => ` - .MuiList-root { - padding: ${theme.spacing(1)}; - - & > .MuiList-root { - padding: 0 ${theme.spacing(0)} ${theme.spacing(1)}; - } - } - - .MuiListSubheader-root { - text-transform: uppercase; - font-weight: bold; - font-size: ${theme.typography.pxToRem(12)}; - color: ${theme.colors.alpha.trueWhite[50]}; - padding: ${theme.spacing(0, 2.5)}; - line-height: 1.4; - } -` -); - -const SubMenuWrapper = styled(Box)( - ({ theme }) => ` - .MuiList-root { - - .MuiListItem-root { - padding: 1px 0; - - .MuiBadge-root { - position: absolute; - right: ${theme.spacing(3.2)}; - - .MuiBadge-standard { - background: ${theme.colors.primary.main}; - font-size: ${theme.typography.pxToRem(10)}; - font-weight: bold; - text-transform: uppercase; - color: ${theme.palette.primary.contrastText}; - } - } - - .MuiButton-root { - display: flex; - color: ${theme.colors.alpha.trueWhite[70]}; - background-color: transparent; - width: 100%; - justify-content: flex-start; - padding: ${theme.spacing(1.2, 3)}; - - .MuiButton-startIcon, - .MuiButton-endIcon { - transition: ${theme.transitions.create(["color"])}; - - .MuiSvgIcon-root { - font-size: inherit; - transition: none; - } - } - - .MuiButton-startIcon { - color: ${theme.colors.alpha.trueWhite[30]}; - font-size: ${theme.typography.pxToRem(20)}; - margin-right: ${theme.spacing(1)}; - } - - .MuiButton-endIcon { - color: ${theme.colors.alpha.trueWhite[50]}; - margin-left: auto; - opacity: .8; - font-size: ${theme.typography.pxToRem(20)}; - } - - &.active, - &:hover { - background-color: ${alpha(theme.colors.alpha.trueWhite[100], 0.06)}; - color: ${theme.colors.alpha.trueWhite[100]}; - - .MuiButton-startIcon, - .MuiButton-endIcon { - color: ${theme.colors.alpha.trueWhite[100]}; - } - } - } - - &.Mui-children { - flex-direction: column; - - .MuiBadge-root { - position: absolute; - right: ${theme.spacing(7)}; - } - } - - .MuiCollapse-root { - width: 100%; - - .MuiList-root { - padding: ${theme.spacing(1, 0)}; - } - - .MuiListItem-root { - padding: 1px 0; - - .MuiButton-root { - padding: ${theme.spacing(0.8, 3)}; - - .MuiBadge-root { - right: ${theme.spacing(3.2)}; - } - - &:before { - content: ' '; - background: ${theme.colors.alpha.trueWhite[100]}; - opacity: 0; - transition: ${theme.transitions.create([ - "transform", - "opacity", - ])}; - width: 6px; - height: 6px; - transform: scale(0); - transform-origin: center; - border-radius: 20px; - margin-right: ${theme.spacing(1.8)}; - } - - &.active, - &:hover { - - &:before { - transform: scale(1); - opacity: 1; - } - } - } - } - } - } - } -` -); - -function SidebarMenu() { - const { closeSidebar } = useContext(SidebarContext); - - return ( - <> - - - - - - - - - - - - {'menu.item2.label'} - - } - > - - - - - - - - - - - - - - ); -} - -export default SidebarMenu; diff --git a/src/layouts/SidebarLayout/Sidebar/index.tsx b/src/layouts/SidebarLayout/Sidebar/index.tsx deleted file mode 100644 index 5a4aeb9..0000000 --- a/src/layouts/SidebarLayout/Sidebar/index.tsx +++ /dev/null @@ -1,141 +0,0 @@ -import { useContext } from "react"; -import Scrollbar from "src/components/Scrollbar"; -import { SidebarContext } from "src/contexts/SidebarContext"; - -import { - Box, - Drawer, - alpha, - styled, - Divider, - useTheme, - Button, - lighten, - darken, - Tooltip, -} from "@mui/material"; - -import SidebarMenu from "./SidebarMenu"; -import Logo from "src/components/LogoSign"; - -const SidebarWrapper = styled(Box)( - ({ theme }) => ` - width: ${theme.sidebar.width}; - min-width: ${theme.sidebar.width}; - color: ${theme.colors.alpha.trueWhite[70]}; - position: relative; - z-index: 7; - height: 100%; - padding-bottom: 68px; -` -); - -function Sidebar() { - const { sidebarToggle, toggleSidebar } = useContext(SidebarContext); - const closeSidebar = () => toggleSidebar(); - const theme = useTheme(); - const logoImage = "/static/images/logo/logo-" + theme.palette.mode + ".svg" - - return ( - <> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -} - -export default Sidebar; diff --git a/src/layouts/SidebarLayout/index.tsx b/src/layouts/SidebarLayout/index.tsx deleted file mode 100644 index 1a8a51c..0000000 --- a/src/layouts/SidebarLayout/index.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { FC, ReactNode } from "react"; -import { Box, alpha, lighten, useTheme } from "@mui/material"; -import { Outlet } from "react-router-dom"; - -import Sidebar from "./Sidebar"; -import Header from "./Header"; -import Footer from 'src/components/Footer'; -interface SidebarLayoutProps { - children?: ReactNode; -} - -const SidebarLayout: FC = () => { - const theme = useTheme(); - - return ( - <> - -
- - - - - -