feat/fix/chore: refactor project structure + add favicon

- Changement de structure de fichier
- Ajout des favicons des sites
- Suppression et mise à jour de dépendances
- Ajout React-Icons pour gérer les icons
- Amélioration du l'UI

components/SideMenu/Categories/Categories.tsx

@@ -0,0 +1,31 @@
+import { Category } from "../../../types";
+import CategoryItem from "./CategoryItem";
+
+import styles from "./categories.module.scss";
+
+interface CategoriesProps {
+  categories: Category[];
+  categoryActive: Category;
+  handleSelectCategory: (category: Category) => void;
+}
+export default function Categories({
+  categories,
+  categoryActive,
+  handleSelectCategory,
+}: CategoriesProps) {
+  return (
+    <div className={styles["categories"]}>
+      <h4>Catégories</h4>
+      <ul className={styles["items"]}>
+        {categories.map((category, key) => (
+          <CategoryItem
+            category={category}
+            categoryActive={categoryActive}
+            handleSelectCategory={handleSelectCategory}
+            key={key}
+          />
+        ))}
+      </ul>
+    </div>
+  );
+}

components/SideMenu/Categories/CategoryItem.tsx

@@ -0,0 +1,49 @@
+import LinkTag from "next/link";
+import { AiFillDelete, AiFillEdit } from "react-icons/ai";
+
+import { Category } from "../../../types";
+
+import styles from "./categories.module.scss";
+
+interface CategoryItemProps {
+  category: Category;
+  categoryActive: Category;
+  handleSelectCategory: (category: Category) => void;
+}
+
+export default function CategoryItem({
+  category,
+  categoryActive,
+  handleSelectCategory,
+}: CategoryItemProps): JSX.Element {
+  const className = `${styles["item"]} ${
+    category.id === categoryActive.id ? styles["active"] : ""
+  }`;
+  const onClick = () => handleSelectCategory(category);
+
+  return (
+    <li className={className} onClick={onClick}>
+      <div className={styles["content"]}>
+        <span className={styles["name"]}>{category.name}</span>
+        <span className={styles["links-count"]}>— {category.links.length}</span>
+      </div>
+      <MenuOptions id={category.id} />
+    </li>
+  );
+}
+
+function MenuOptions({ id }: { id: number }): JSX.Element {
+  return (
+    <div className={styles["menu-item"]}>
+      <LinkTag href={`/category/edit/${id}`} className={styles["option-edit"]}>
+        <AiFillEdit />
+      </LinkTag>
+      <LinkTag
+        href={`/category/remove/${id}`}
+        className={styles["option-remove"]}
+      >
+        <AiFillDelete color="red" />
+      </LinkTag>
+    </div>
+  );
+}

components/SideMenu/Categories/categories.module.scss

@@ -0,0 +1,90 @@
+.categories {
+    height: 100%;
+    width: 100%;
+    min-height: 0;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+}
+
+.items {
+    padding-right: 5px;
+    overflow-y: scroll;
+}
+
+.item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    &.active {
+        color: #fff;
+        background: #3f88c5;
+        border-color: #3f88c5;
+    }
+
+    &:hover:not(.active) {
+        color: #3f88c5;
+        background: #f0eef6;
+        border-bottom: 2px solid #3f88c5;
+    }
+
+    &.active .menu-item .option-edit svg {
+        fill: #fff;
+    }
+
+    & .content {
+        width: 100%;
+        display: flex;
+        flex: 1;
+        align-items: center;
+
+        & .name {
+            margin-right: 5px;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+        }
+
+        & .links-count {
+            min-width: fit-content;
+            font-size: 0.85em;
+            color: #bbb;
+        }
+    }
+    &:hover .content {
+        width: calc(100% - 42px);
+    }
+
+    & .menu-item {
+        height: 100%;
+        min-width: fit-content;
+        margin-left: 5px;
+        display: none;
+        gap: 2px;
+        align-items: center;
+        justify-content: center;
+        animation: fadein 0.3s both;
+
+        & > a {
+            border: 0;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            &:hover {
+                transform: scale(1.25);
+            }
+
+            & svg {
+                height: 20px;
+                width: 20px;
+            }
+        }
+    }
+    &:hover .menu-item {
+        display: flex;
+    }
+}