Skip to content

Commit

Permalink
create respnsible menus
Browse files Browse the repository at this point in the history
  • Loading branch information
Janderson Souza Matias authored and Janderson Souza Matias committed Nov 8, 2023
1 parent 99b3de5 commit 02ffc9c
Show file tree
Hide file tree
Showing 3 changed files with 105 additions and 69 deletions.
15 changes: 8 additions & 7 deletions src/components/Layouts/ProtectedLayout/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Box, HStack } from '@chakra-ui/react';
import { Box, Flex, HStack, useBreakpointValue } from '@chakra-ui/react';
import { Outlet, Navigate, useNavigate } from 'react-router-dom';
import { useContext, useEffect } from 'react';
import 'react-toastify/dist/ReactToastify.css';
Expand All @@ -13,14 +13,15 @@ export const ProtectedLayout = () => {
if (!user) navigate('/login');
}, [user, navigate]);

const flexDir = useBreakpointValue({ base: 'column', md: 'row' }) as 'column' | 'row';
const isMobile = useBreakpointValue({ base: true, md: false });

return (
<HStack w="100%">
<Box w="240px">
<Navbar />
</Box>
<Box maxH="100vh" w="100%" overflow="scroll">
<Flex w="100%" flexDir={flexDir}>
<Navbar />
<Box maxH="100vh" w="100%" overflow="scroll" mt={isMobile ? '100px' : '0'}>
<Outlet />
</Box>
</HStack>
</Flex>
);
};
98 changes: 65 additions & 33 deletions src/components/Navbar/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,33 @@
import React, { useContext } from "react";
import { Image, Stack, Text, VStack } from "@chakra-ui/react";
import { useTranslation } from "react-i18next";
import { MenuItems } from "./common";
import { MenuItem } from "./MenuItem";
import { CoachLogo } from "@/assets/images/logos";
import { UserContext } from "@/contexts/UserContext";
import UserCard from "../UserCard";
import React, { useContext, useState } from 'react';
import { Box, HStack, Image, Stack, Text, VStack, useBreakpointValue } from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';
import { MenuItems } from './common';
import { MenuItem } from './MenuItem';
import { CoachLogo } from '@/assets/images/logos';
import { UserContext } from '@/contexts/UserContext';
import UserCard from '../UserCard';
import { HamburgerIcon } from '@chakra-ui/icons';
import { useNavigate } from 'react-router-dom';

const Navbar: React.FC = () => {
const { logout, user } = useContext(UserContext);
const { t } = useTranslation();
const [open, setOpen] = useState(false);
const navigate = useNavigate();

return (
<VStack
minH={"100vh"}
w="240px !important"
display={"flex"}
alignItems="center"
borderRight="1px solid #DCE0E5"
>
<Image src={CoachLogo} alt={"Logo do coach"} m="24px 12px" mb="16px" />

<UserCard
logout={logout}
name={user?.name || ""}
email={user?.email || ""}
/>
const isMobile = useBreakpointValue({ base: true, md: false });
const navbarWidth = useBreakpointValue({ base: 'full', md: '240px' });

<VStack w={"100%"} alignItems={"flex-start"} mt="16px !important">
const menu = (
<>
<Box mx={2}>
<UserCard logout={logout} name={user?.name || ''} email={user?.email || ''} />
</Box>
<VStack w={'100%'} alignItems={'flex-start'} mt="16px !important">
{MenuItems.map((item, index) =>
item.subItems ? (
<Stack key={index} w={"100%"}>
<Text
m="16px"
mb="8px"
fontSize="12px"
color="#9AA2AC"
fontWeight={700}
>
<Stack key={index} w={'100%'}>
<Text m="16px" mb="8px" fontSize="12px" color="#9AA2AC" fontWeight={700}>
{t(`Navbar.${item.label}`)}
</Text>
{item.subItems.map((subItem, sIndex) => (
Expand All @@ -46,6 +36,10 @@ const Navbar: React.FC = () => {
icon={subItem.icon}
label={t(`Navbar.${subItem.label}`)}
route={subItem.route}
onClick={() => {
setOpen(false);
navigate(subItem.route);
}}
/>
))}
</Stack>
Expand All @@ -55,10 +49,48 @@ const Navbar: React.FC = () => {
icon={item.icon}
label={t(`Navbar.${item.label}`)}
route={item.route}
onClick={() => {
setOpen(false);
navigate(item.route);
}}
/>
)
),
)}
</VStack>
</>
);

return (
<VStack
minH={isMobile ? 'none' : '100vh'}
w={navbarWidth}
alignItems="center"
borderRight={{ md: '1px solid #DCE0E5' }}
>
{isMobile ? (
<VStack
h={open ? '100vh' : '80px'}
overflow="hidden"
position="fixed"
bg="#fff"
top={0}
right={0}
left={0}
zIndex={9999}
>
<HStack w="full" justifyContent="space-between">
<HamburgerIcon w={8} h={8} mx="24px" onClick={() => setOpen(!open)} cursor="pointer" />
<Image mx="auto" src={CoachLogo} alt={'Logo do coach'} m="24px" mb="16px" />
<Box w="72px" />
</HStack>
{menu}
</VStack>
) : (
<>
<Image src={CoachLogo} alt={'Logo do coach'} m="24px" mb="16px" />
{menu}
</>
)}
</VStack>
);
};
Expand Down
61 changes: 32 additions & 29 deletions src/pages/Dashboard/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useEffect, useState } from 'react';
import { Button, Center, HStack, Select, Spinner, Text, VStack } from '@chakra-ui/react';
import { Box, Button, Center, Flex, HStack, Select, Spinner, Text, VStack, useBreakpointValue } from '@chakra-ui/react';
import { IDashboard, ISchool, ITeachingPractices } from '@/types';
import DashboardService from '@/services/dashboard';
import Loader from '@/components/Base/Loader';
Expand All @@ -23,6 +23,7 @@ const DashboardPage: React.FC = () => {
const [schoolName, setSchoolName] = useState<string>();
const [schoolList, setSchoolList] = useState<ISchool[]>([]);
const [selected, setSelected] = useState<ITeachingPractices>();
const isMobile = useBreakpointValue({ base: true, md: false });

useEffect(() => {
if (!loading) {
Expand Down Expand Up @@ -58,8 +59,8 @@ const DashboardPage: React.FC = () => {

return (
<VStack mx="auto" minH="100vh" maxW="1200px" position="relative" overflow="scroll" alignItems="flex-start" p="56px">
<HStack>
<VStack alignItems="start" mb="12px" minW={250}>
<Flex flexDir={isMobile ? 'column' : 'row'} w="full">
<VStack alignItems="start" mb="12px" mr="12px" minW={250}>
<Text fontWeight="600">Select region</Text>
{user?.role === ROLES.admin ? (
<Select placeholder="..." onChange={(e) => handleRegion(e.target.value)} value={region}>
Expand All @@ -74,7 +75,7 @@ const DashboardPage: React.FC = () => {
)}
</VStack>

<VStack alignItems="start" mb="12px" minW={250}>
<VStack alignItems="start" mb="12px" mr="12px" minW={250}>
<Text fontWeight="600">Select district</Text>
{user?.role === ROLES.admin || user?.role === ROLES['region-analyst'] ? (
<SelectDistrict
Expand All @@ -88,7 +89,7 @@ const DashboardPage: React.FC = () => {
)}
</VStack>

<VStack alignItems="start" mb="12px" minW={250}>
<VStack alignItems="start" mb="12px" mr="12px" minW={250}>
<Text fontWeight="600">Select school</Text>
{loading ? (
<Spinner />
Expand All @@ -103,15 +104,15 @@ const DashboardPage: React.FC = () => {
</Select>
)}
</VStack>
</HStack>
</Flex>

{loading || !dashboard || !selected ? (
<Center w={'100%'} mt="80px">
<Loader />
</Center>
) : (
<>
<HStack w="100%" gap="16px" mb="56px" alignItems="stretch">
<Flex flexDir={isMobile ? 'column' : 'row'} w="full" gap="16px" mb="56px" alignItems="stretch">
<VStack flex={3} gap="16px" alignItems="stretch">
<Text color="#111417" fontSize="24px" fontWeight={600}>
Engagement
Expand Down Expand Up @@ -164,36 +165,38 @@ const DashboardPage: React.FC = () => {
values={dashboard.teachingPractices.map((item) => item.data.teachers)}
/>
</VStack>
</HStack>
</Flex>

<Text mb="8px" color="#111417" fontWeight={500} fontSize={'16px'}>
Select Teaching Practices to show
</Text>

<HStack mb="56px">
{dashboard.teachingPractices.map((item) => (
<Button
py="8px"
px="12px"
key={item.name}
fontWeight={400}
fontSize={'16px'}
borderRadius="full"
border="1px solid #DCE0E5"
onClick={() => setSelected(item)}
bg={selected.name === item.name ? '#C2E0FF' : '#ffffff'}
color={selected.name === item.name ? '#264673' : '#111417'}
>
{item.name}
</Button>
))}
</HStack>
<Box maxW="full" overflow="scroll">
<HStack mb="56px" w="1200px">
{dashboard.teachingPractices.map((item) => (
<Button
py="8px"
px="12px"
key={item.name}
fontWeight={400}
fontSize={'16px'}
borderRadius="full"
border="1px solid #DCE0E5"
onClick={() => setSelected(item)}
bg={selected.name === item.name ? '#C2E0FF' : '#ffffff'}
color={selected.name === item.name ? '#264673' : '#111417'}
>
{item.name}
</Button>
))}
</HStack>
</Box>

<Text color="#111417" fontSize="24px" fontWeight={600}>
{selected.name}
</Text>

<HStack w="100%" mt="24px" alignItems="stretch">
<Flex flexDir={isMobile ? 'column' : 'row'} w="full" mt="24px" alignItems="stretch">
<BarGraph
labels={['Needs work', 'Keep working', 'Needs attention', 'Almost there', 'Doing great']}
values={[
Expand All @@ -205,7 +208,7 @@ const DashboardPage: React.FC = () => {
]}
/>

<VStack flex={3} alignItems="stretch">
<VStack mt={isMobile ? 4 : 0} flex={3} alignItems="stretch">
<HStack alignItems="stretch">
<CardValue
label={'Teachers showing improvement or mastery'}
Expand Down Expand Up @@ -236,7 +239,7 @@ const DashboardPage: React.FC = () => {
/>
</VStack>
</VStack>
</HStack>
</Flex>
</>
)}
</VStack>
Expand Down

0 comments on commit 02ffc9c

Please sign in to comment.