feat: navbar and footer

src/components/layout/Footer/Footer.module.css

@@ -0,0 +1,32 @@
+.container {
+    @mixin light {
+        border-top: solid gray 2px;
+    }
+    @mixin dark {
+        border-top: solid var(--mantine-color-dark-7) 2px;
+    }
+}
+
+.link {
+    width: 100%;
+    height: rem(50px);
+    border-radius: var(--mantine-radius-md);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+    @mixin light {
+        color: var(--mantine-color-gray-7);
+    }
+    @mixin dark {
+        color: var(--mantine-color-dark-0);
+    }
+
+    &[data-active] {
+        &,
+        &:hover {
+            color: var(--mantine-color-blue-light-color);
+        }
+    }
+}

src/components/layout/Footer/Footer.tsx

@@ -0,0 +1,31 @@
+import { IconCircleDotted, IconLayoutKanban } from "@tabler/icons-react";
+import FooterButtons from "@/components/layout/Footer/FooterButtons";
+
+const buttonsData = [
+    {
+        icon: IconLayoutKanban,
+        label: "Сделки",
+        href: "/deals",
+    },
+    {
+        icon: IconCircleDotted,
+        label: "Label 1",
+        href: "/oiiai",
+    },
+    {
+        icon: IconCircleDotted,
+        label: "Label 2",
+        href: "/opaopa",
+    },
+    {
+        icon: IconCircleDotted,
+        label: "Label 3",
+        href: "/hihihaha",
+    },
+];
+
+const Footer = () => {
+    return <FooterButtons buttonsData={buttonsData} />;
+};
+
+export default Footer;

src/components/layout/Footer/FooterButtons.tsx

@@ -0,0 +1,39 @@
+import { IconPlus } from "@tabler/icons-react";
+import { Group, Stack, Text } from "@mantine/core";
+import FooterClickable from "@/components/layout/Footer/FooterClickable";
+import styles from "./Footer.module.css";
+
+type LinkData = {
+    icon: typeof IconPlus;
+    label: string;
+    href: string;
+};
+
+type Props = {
+    buttonsData: LinkData[];
+};
+
+const FooterButtons = ({ buttonsData }: Props) => {
+    return (
+        <Group
+            className={styles.container}
+            p={"xs"}
+            wrap={"nowrap"}
+            justify={"space-between"}>
+            {buttonsData.map(data => (
+                <FooterClickable
+                    href={data.href}
+                    key={data.label}>
+                    <Stack
+                        gap={0}
+                        align={"center"}>
+                        <data.icon />
+                        <Text>{data.label}</Text>
+                    </Stack>
+                </FooterClickable>
+            ))}
+        </Group>
+    );
+};
+
+export default FooterButtons;

src/components/layout/Footer/FooterClickable.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { ReactNode } from "react";
+import { usePathname, useRouter } from "next/navigation";
+import { UnstyledButton } from "@mantine/core";
+import styles from "./Footer.module.css";
+
+type Props = {
+    href: string;
+    children: ReactNode;
+};
+
+const FooterClickable = ({ children, href }: Props) => {
+    const pathname = usePathname();
+    const router = useRouter();
+
+    const onClick = () => router.push(href);
+
+    return (
+        <UnstyledButton
+            onClick={onClick}
+            className={styles.link}
+            data-active={pathname === href || undefined}>
+            {children}
+        </UnstyledButton>
+    );
+};
+
+export default FooterClickable;