feat: add bottom navigation

webapp/src/components/BottomNavigation.tsx

@@ -0,0 +1,73 @@
+import { Flex, Icon, Text } from "@chakra-ui/react";
+import { WalletIcon } from "./icons/wallet";
+import { HomeIcon } from "./icons/home";
+import { AccountIcon } from "./icons/account";
+import { usePathname } from "next/navigation";
+import { useRouter } from "next/router";
+
+const BottomNavigation = () => {
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const navigationItems = [
+    {
+      label: "Accueil",
+      icon: HomeIcon,
+      href: "/dashboard",
+    },
+    {
+      label: "Mes réductions",
+      icon: WalletIcon,
+      href: "/dashboard/offers",
+    },
+    {
+      label: "Profil",
+      icon: AccountIcon,
+      href: "/dashboard/account",
+    },
+  ];
+
+  return (
+    <Flex
+      borderTopRadius={24}
+      bgColor="white"
+      position="fixed"
+      bottom={0}
+      left={0}
+      right={0}
+      justifyContent="space-between"
+      py={5}
+      px={14}
+    >
+      {navigationItems.map(({ href, label, icon }) => (
+        <Flex
+          key={label}
+          flexDir="column"
+          alignItems="center"
+          gap={1}
+          cursor="pointer"
+          onClick={() => {
+            router.push(href);
+          }}
+        >
+          <Icon
+            as={icon}
+            fill="none"
+            color={pathname === href ? "black" : "disabled"}
+            width="24px"
+            height="24px"
+          />
+          <Text
+            fontSize="2xs"
+            fontWeight="bold"
+            color={pathname === href ? "black" : "disabled"}
+          >
+            {label}
+          </Text>
+        </Flex>
+      ))}
+    </Flex>
+  );
+};
+
+export default BottomNavigation;

webapp/src/components/InstallationBanner.tsx

@@ -83,7 +83,7 @@ const InstallationBanner: React.FC = () => {
   return (
     <Flex
       position="absolute"
-      bottom={12}
+      bottom={24}
       left={6}
       right={6}
       bg="white"

webapp/src/components/icons/account.tsx

@@ -0,0 +1,24 @@
+import { Icon, IconProps } from "@chakra-ui/react";
+
+export const AccountIcon = (props: IconProps) => {
+  return (
+    <Icon width="24px" height="24px" viewBox="0 0 24 24" {...props}>
+      <circle
+        cx="11.9999"
+        cy="6.8278"
+        r="4.66468"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M20.846 21.7749V19.8766C20.846 17.6674 19.0552 15.8766 16.846 15.8766H7.15381C4.94467 15.8766 3.15381 17.6674 3.15381 19.8766V21.7749H12.6034"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Icon>
+  );
+};

webapp/src/components/icons/home.tsx

@@ -0,0 +1,15 @@
+import { Icon, IconProps } from "@chakra-ui/react";
+
+export const HomeIcon = (props: IconProps) => {
+  return (
+    <Icon width="24px" height="24px" viewBox="0 0 24 24" {...props}>
+      <path
+        d="M14.8499 15.8257V13.1822H8.8776V21.9383H2.5V10.9383L12 2.93832L21.5 10.9383V21.9383H14.8499"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Icon>
+  );
+};

webapp/src/components/icons/wallet.tsx

@@ -0,0 +1,22 @@
+import { Icon, IconProps } from "@chakra-ui/react";
+
+export const WalletIcon = (props: IconProps) => {
+  return (
+    <Icon width="24px" height="24px" viewBox="0 0 24 24" {...props}>
+      <path
+        d="M6.07819 7.86373L21.5865 9.68813V22.4033L4.99215 20.0501C3.51283 19.8403 2.41336 18.574 2.41336 17.0798V8.07352C2.41336 6.70448 3.34019 5.5091 4.66608 5.16808L18.5519 1.59668V5.74749"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M21.5866 13.6767L16.6496 13.1208C15.2025 12.9579 13.9356 14.0902 13.9356 15.5464V15.5464C13.9356 16.7849 14.863 17.827 16.0931 17.9708L21.5866 18.6131"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Icon>
+  );
+};

webapp/src/layouts/DefaultLayout.tsx

@@ -3,6 +3,7 @@ import Head from "next/head";
 import { usePathname } from "next/navigation";
 import { ReactNode } from "react";
 import InstallationBanner from "~/components/InstallationBanner";
+import BottomNavigation from "~/components/BottomNavigation";
 
 export default function DefaultLayout({
   children,
@@ -12,6 +13,7 @@ export default function DefaultLayout({
   classname?: string;
 }) {
   const pathname = usePathname();
+
   return (
     <>
       <Head>
@@ -58,6 +60,9 @@ export default function DefaultLayout({
           >
             {children}
           </Container>
+          {(pathname === "/dashboard" ||
+            pathname === "/dashboard/offers" ||
+            pathname === "/dashboard/account") && <BottomNavigation />}
           <InstallationBanner />
         </Box>
       </Box>

webapp/src/utils/chakra-theme.ts

@@ -66,6 +66,7 @@ export const theme = extendTheme({
       "950": "#18184e",
     },
     bgWhite: "#F7F7FA",
+    disabled: "#9595B1",
   },
   fonts: {
     heading: Marianne.style.fontFamily,