Skip to content

Commit

Permalink
feat: add ars logo to cm2d logo
Browse files Browse the repository at this point in the history
  • Loading branch information
@HoreKk
HoreKk committed Jan 18, 2024
1 parent 339e8e0 commit bb68d9e
Show file tree
Hide file tree
Showing 3 changed files with 107 additions and 91 deletions.
62 changes: 36 additions & 26 deletions webapp-next/components/landing/NavbarLanding.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { HamburgerIcon } from '@chakra-ui/icons';
import { HamburgerIcon } from "@chakra-ui/icons";
import {
Button,
Flex,
Expand All @@ -10,13 +10,13 @@ import {
Wrap,
WrapItem,
CloseButton,
Link
} from '@chakra-ui/react';
Link,
} from "@chakra-ui/react";

import NextLink from 'next/link';
import { useRouter } from 'next/router';
import cookie from 'js-cookie';
import { ELASTIC_API_KEY_NAME } from '@/utils/tools';
import NextLink from "next/link";
import { useRouter } from "next/router";
import cookie from "js-cookie";
import { ELASTIC_API_KEY_NAME } from "@/utils/tools";

export default function NavbarLanding() {
const { isOpen, onOpen, onClose } = useDisclosure();
Expand All @@ -25,8 +25,8 @@ export default function NavbarLanding() {
const hasApiKey = !!cookie.get(ELASTIC_API_KEY_NAME);

const links = [
{ label: 'Accueil', path: '/' },
{ label: 'À propos', path: '/about' }
{ label: "Accueil", path: "/" },
{ label: "À propos", path: "/about" },
];

return (
Expand All @@ -36,7 +36,7 @@ export default function NavbarLanding() {
h={[14, 14, 20]}
py={2}
px={4}
direction={['column', 'row']}
direction={["column", "row"]}
justify="space-between"
bg="white"
position="sticky"
Expand All @@ -48,18 +48,28 @@ export default function NavbarLanding() {
<Flex flexGrow={1} justify="center">
<Box ml={6} mt={[2, 0, 0]}>
<NextLink href="/" passHref>
<Image src="/CM2D.svg" alt="CM2D Logo" w={24} />
<Flex alignItems="center">
<Image src="/CM2D.svg" alt="CM2D Logo" w={24} mr={1.5} />
x
<Image
src="/ARS_logo.svg.png"
alt="ARS Logo"
w={16}
ml={2}
mt={3}
/>
</Flex>
</NextLink>
</Box>
</Flex>
{isOpen ? (
<CloseButton
size="lg"
onClick={onClose}
display={['inline', 'none']}
display={["inline", "none"]}
/>
) : (
<HamburgerIcon onClick={onOpen} display={['inline', 'none']} />
<HamburgerIcon onClick={onOpen} display={["inline", "none"]} />
)}
</Flex>
{hasApiKey ? (
Expand All @@ -68,42 +78,42 @@ export default function NavbarLanding() {
as={NextLink}
href="/bo"
variant="ghost"
bg={'primary.500'}
color={'white'}
bg={"primary.500"}
color={"white"}
_hover={{}}
height={12}
fontSize={16}
fontWeight={'600'}
fontWeight={"600"}
m={2}
>
RETOURNER À L&apos;APPLICATION -&gt;
</Button>
</Flex>
) : (
<Flex
display={[isOpen ? 'flex' : 'none', 'flex', 'flex']}
bg={'white'}
display={[isOpen ? "flex" : "none", "flex", "flex"]}
bg={"white"}
as="nav"
>
<Wrap
align="center"
justify="center"
mx={[0, 0, 28, 28]}
spacing={10}
direction={['column', 'column', 'row']}
direction={["column", "column", "row"]}
flex={1}
>
{links.map((link, index) => (
<WrapItem key={index}>
<NextLink href={link.path} passHref>
<Text
variant="ghost"
_hover={{ color: 'primary.500' }}
_hover={{ color: "primary.500" }}
fontSize={16}
color={
router.pathname === link.path ? 'primary.500' : 'inherit'
router.pathname === link.path ? "primary.500" : "inherit"
}
fontWeight={router.pathname === link.path ? '600' : '400'}
fontWeight={router.pathname === link.path ? "600" : "400"}
m={[2, 2, 4]}
>
{link.label}
Expand All @@ -115,13 +125,13 @@ export default function NavbarLanding() {
<NextLink href="/login" passHref>
<Button
variant="ghost"
bg={'primary.500'}
color={'white'}
bg={"primary.500"}
color={"white"}
_hover={{}}
height={12}
width={'40'}
width={"40"}
fontSize={16}
fontWeight={'600'}
fontWeight={"600"}
m={2}
>
CONNEXION
Expand Down
116 changes: 59 additions & 57 deletions webapp-next/components/layouts/Menu.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,57 +1,59 @@
import { Box, Flex, Image, Spacer, Stack } from '@chakra-ui/react';
import { Cm2dContext, baseFilters } from '@/utils/cm2d-provider';
import { useContext } from 'react';
import { FiltersAges } from '../filters/Ages';
import { FilterCauses } from '../filters/Causes';
import { FiltersDeathLocations } from '../filters/DeathLocations';
import { FiltersSexes } from '../filters/Sexes';
import { MenuTitle } from './MenuTitle';
import { SubMenu } from './SubMenu';
import { MenuLinks } from './MenuLinks';
import { UserCard } from './UserCard';
import { FilterDates } from '../filters/Dates';
import { FiltersDepartments } from '../filters/Departments';
import cookie from 'js-cookie';
import { hasAtLeastOneFilter, ELASTIC_API_KEY_NAME } from '@/utils/tools';
import { FilterAssociateCauses } from '../filters/AssociateCauses';
import { Box, Flex, Image, Spacer, Stack } from "@chakra-ui/react";
import { Cm2dContext, baseFilters } from "@/utils/cm2d-provider";
import { useContext } from "react";
import { FiltersAges } from "../filters/Ages";
import { FilterCauses } from "../filters/Causes";
import { FiltersDeathLocations } from "../filters/DeathLocations";
import { FiltersSexes } from "../filters/Sexes";
import { MenuTitle } from "./MenuTitle";
import { SubMenu } from "./SubMenu";
import { MenuLinks } from "./MenuLinks";
import { UserCard } from "./UserCard";
import { FilterDates } from "../filters/Dates";
import { FiltersDepartments } from "../filters/Departments";
import cookie from "js-cookie";
import { hasAtLeastOneFilter, ELASTIC_API_KEY_NAME } from "@/utils/tools";
import { FilterAssociateCauses } from "../filters/AssociateCauses";

export const ageRanges = [
{ from: 0, to: 0, key: 'Moins de 1 an' },
{ from: 1, to: 5, key: '1-5 ans' },
{ from: 6, to: 10, key: '6-10 ans' },
{ from: 11, to: 20, key: '11-20 ans' },
{ from: 21, to: 30, key: '21-30 ans' },
{ from: 31, to: 40, key: '31-40 ans' },
{ from: 41, to: 50, key: '41-50 ans' },
{ from: 51, to: 60, key: '51-60 ans' },
{ from: 61, to: 70, key: '61-70 ans' },
{ from: 71, key: '71 ans et +' }
{ from: 0, to: 0, key: "Moins de 1 an" },
{ from: 1, to: 5, key: "1-5 ans" },
{ from: 6, to: 10, key: "6-10 ans" },
{ from: 11, to: 20, key: "11-20 ans" },
{ from: 21, to: 30, key: "21-30 ans" },
{ from: 31, to: 40, key: "31-40 ans" },
{ from: 41, to: 50, key: "41-50 ans" },
{ from: 51, to: 60, key: "51-60 ans" },
{ from: 61, to: 70, key: "61-70 ans" },
{ from: 71, key: "71 ans et +" },
];

export function Menu() {
const context = useContext(Cm2dContext);

if (!context) {
throw new Error('Menu must be used within a Cm2dProvider');
throw new Error("Menu must be used within a Cm2dProvider");
}

const { filters, setFilters, user } = context;

return (
<Flex
flexDir={'column'}
flexDir={"column"}
pt={8}
borderRadius={16}
bg="white"
w={88}
minH={'calc(100vh - 2.5rem)'}
minH={"calc(100vh - 2.5rem)"}
position="sticky"
top={0}
boxShadow="0px 8px 15px -4px rgba(36, 108, 249, 0.08), 0px 4px 6px -2px rgba(36, 108, 249, 0.08);"
>
<Box pl={4} px={6}>
<Image src="/CM2D.svg" alt="CM2D Logo" w={24} />
</Box>
<Flex alignItems="center" pl={4} px={6}>
<Image src="/CM2D.svg" alt="CM2D Logo" w={24} mr={1.5} />
x
<Image src="/ARS_logo.svg.png" alt="ARS Logo" w={16} ml={2} mt={3} />
</Flex>
<Box mt={5} h="3px" w="full" bg="gray.50" />
<Box mt={10} px={6}>
<MenuTitle title="Cause de décès" />
Expand All @@ -67,15 +69,15 @@ export function Menu() {
button={
hasAtLeastOneFilter(filters)
? {
label: 'Réinitialiser',
label: "Réinitialiser",
onClick: () => {
setFilters({
...baseFilters,
categories: filters.categories,
start_date: filters.start_date,
end_date: filters.end_date
end_date: filters.end_date,
});
}
},
}
: undefined
}
Expand All @@ -89,9 +91,9 @@ export function Menu() {
</>
}
icon={{
src: 'icons/user-search-blue.svg',
srcOpen: 'icons/user-search.svg',
alt: 'Onglet démographie'
src: "icons/user-search-blue.svg",
srcOpen: "icons/user-search.svg",
alt: "Onglet démographie",
}}
>
<Stack dir="column" spacing={4}>
Expand All @@ -108,9 +110,9 @@ export function Menu() {
</>
}
icon={{
src: 'icons/file-list-search-blue.svg',
srcOpen: 'icons/file-list-search.svg',
alt: 'Onglet données du décès'
src: "icons/file-list-search-blue.svg",
srcOpen: "icons/file-list-search.svg",
alt: "Onglet données du décès",
}}
>
<Stack dir="column" spacing={4}>
Expand All @@ -121,19 +123,19 @@ export function Menu() {
<SubMenu
title={<>Causes associées</>}
icon={{
src: 'icons/folder-open-blue.svg',
srcOpen: 'icons/folder-open.svg',
alt: 'Onglet causes associées'
src: "icons/folder-open-blue.svg",
srcOpen: "icons/folder-open.svg",
alt: "Onglet causes associées",
}}
isDisabled={
!filters.categories.length || filters.categories_search !== 'full'
!filters.categories.length || filters.categories_search !== "full"
}
disabledMessage={
!filters.categories.length
? 'Veuillez sélectionner une cause de décès pour accéder aux causes associées'
? "Veuillez sélectionner une cause de décès pour accéder aux causes associées"
: 'Pour associer des causes, veuillez désélectionner "Rechercher uniquement dans le processus morbide"'
}
forceCollapse={filters.categories_search !== 'full'}
forceCollapse={filters.categories_search !== "full"}
>
<Stack dir="column" spacing={4}>
<FilterAssociateCauses />
Expand All @@ -145,24 +147,24 @@ export function Menu() {
<MenuLinks
links={[
{
label: 'À propos',
icon: '/icons/about-circle.svg',
link: '/about'
label: "À propos",
icon: "/icons/about-circle.svg",
link: "/about",
},
{
label: 'Mentions légales',
icon: '/icons/shield-user.svg',
link: '/legals/mentions-legales'
label: "Mentions légales",
icon: "/icons/shield-user.svg",
link: "/legals/mentions-legales",
},
{
label: 'Déconnexion',
icon: '/icons/log-out.svg',
label: "Déconnexion",
icon: "/icons/log-out.svg",
onClick: () => {
cookie.remove(ELASTIC_API_KEY_NAME);
window.location.reload();
},
link: '/'
}
link: "/",
},
]}
/>
</Box>
Expand Down
20 changes: 12 additions & 8 deletions webapp-next/components/login/ColumnWithImage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { Box, Flex, Image } from '@chakra-ui/react';
import Slider from './Slider';
import { Box, Flex, Image } from "@chakra-ui/react";
import Slider from "./Slider";

export const ColumnWithImage = () => {
return (
<Flex
bg={'primary.50'}
bg={"primary.50"}
flexDirection="column"
h="full"
w="full"
Expand All @@ -14,17 +14,21 @@ export const ColumnWithImage = () => {
borderLeftRadius="2xl"
justifyContent="space-between"
>
<Image src="/CM2D.svg" h={7} alignSelf={'flex-start'} />
<Flex alignItems="center">
<Image src="/CM2D.svg" alt="CM2D Logo" w={24} mr={1.5} />
x
<Image src="/ARS_logo.svg.png" alt="ARS Logo" w={16} ml={2} mt={3} />
</Flex>

<Image src="/Left.svg" w={'full'} maxH={'60%'} />
<Image src="/Left.svg" w={"full"} maxH={"60%"} />

<Slider
slideContents={[
{
title: 'Explorez les données sur les causes de décès',
title: "Explorez les données sur les causes de décès",
description:
'L’application CM2D permet de générer des visualisations de données sur mesure afin d’orienter et d’évaluer vos actions sur le terrain.'
}
"L’application CM2D permet de générer des visualisations de données sur mesure afin d’orienter et d’évaluer vos actions sur le terrain.",
},
// {
// title: 'Lorem ipsum dolor !',
// description:
Expand Down

0 comments on commit bb68d9e

Please sign in to comment.