mirror of
https://github.com/Sonny93/my-links.git
synced 2025-12-11 08:43:04 +00:00
feat: remove category quick actions in side menu & add opened icon when category's active
This commit is contained in:
@@ -1,11 +1,8 @@
|
|||||||
import { useEffect, useRef } from "react";
|
import { useEffect, useRef } from "react";
|
||||||
import { AiOutlineFolder } from "react-icons/ai";
|
import { AiFillFolderOpen, AiOutlineFolder } from "react-icons/ai";
|
||||||
|
|
||||||
import { Category } from "types";
|
import { Category } from "types";
|
||||||
|
|
||||||
import EditItem from "components/QuickActions/EditItem";
|
|
||||||
import RemoveItem from "components/QuickActions/RemoveItem";
|
|
||||||
|
|
||||||
import styles from "./categories.module.scss";
|
import styles from "./categories.module.scss";
|
||||||
|
|
||||||
interface CategoryItemProps {
|
interface CategoryItemProps {
|
||||||
@@ -38,26 +35,16 @@ export default function CategoryItem({
|
|||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
style={{ display: "flex", alignItems: "center", gap: ".25em" }}
|
style={{ display: "flex", alignItems: "center", gap: ".25em" }}
|
||||||
>
|
>
|
||||||
<AiOutlineFolder size={24} />
|
{category.id === categoryActive.id ? (
|
||||||
|
<AiFillFolderOpen size={24} />
|
||||||
|
) : (
|
||||||
|
<AiOutlineFolder size={24} />
|
||||||
|
)}
|
||||||
|
|
||||||
<div className={styles["content"]}>
|
<div className={styles["content"]}>
|
||||||
<span className={styles["name"]}>{category.name}</span>
|
<span className={styles["name"]}>{category.name}</span>
|
||||||
<span className={styles["links-count"]}>— {category.links.length}</span>
|
<span className={styles["links-count"]}>— {category.links.length}</span>
|
||||||
</div>
|
</div>
|
||||||
<MenuOptions id={category.id} />
|
|
||||||
</li>
|
</li>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function MenuOptions({ id }: { id: number }): JSX.Element {
|
|
||||||
return (
|
|
||||||
<div className={styles["menu-item"]}>
|
|
||||||
<EditItem
|
|
||||||
type="category"
|
|
||||||
id={id}
|
|
||||||
onClick={(event) => event.stopPropagation()}
|
|
||||||
className={styles["option-edit"]}
|
|
||||||
/>
|
|
||||||
<RemoveItem type="category" id={id} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|||||||
Reference in New Issue
Block a user