refactor: enhance CategoryNav component with sticky positioning and improved styles

src/components/CategoryNav.css

@@ -1,8 +1,16 @@
 .category-nav {
-  width: 100%;
-  box-shadow: inset 0px -1px 0px var(--border-muted);
-  white-space: nowrap;
-  overflow-x: scroll;
+	width: 100%;
+	box-shadow: inset 0px -1px 0px var(--border-muted);
+	white-space: nowrap;
+	overflow-x: scroll;
+	position: sticky;
+	top: 0;
+	background-color: var(--background);
+	--shadow-color: rgb(0 0 0 / 0.04);
+	box-shadow: 0px 0px 0px 0px var(--shadow-color),
+		0px 1px 1px -0.5px var(--shadow-color),
+		0px 3px 3px -1.5px var(--shadow-color);
+	z-index: 999999;
 }
 
 /* hide scrollbar
@@ -13,4 +21,4 @@
 .category-nav::-webkit-scrollbar{
   display: none;
 }
-*/
+*/

src/components/CategoryNav.jsx

@@ -3,21 +3,24 @@ import data from "../data/tools.json";
 
 import CategoryNavItem from "./CategoryNavItem";
 
-export default function CategoryNav({ filter, setFilter }) {
-  const navItems = [
-    {title: "All Tools", category: "all"}, 
-    ...data.tools
-  ];
+export default function CategoryNav({ filter }) {
+	const navItems = [{ title: "All Tools", category: "all" }, ...data.tools];
 
-  return <nav className="category-nav" tabIndex="-1">
-    {navItems.map((c, i) => {
-      return <CategoryNavItem 
-        key={i}
-        title={c.title} 
-        category={c.category} 
-        filter={filter}
-        setFilter={setFilter}
-      />
-    })}
-  </nav>
-}
+	return (
+		<nav
+			className="category-nav"
+			tabIndex="-1"
+		>
+			{navItems.map((c, i) => {
+				return (
+					<CategoryNavItem
+						key={i}
+						title={c.title}
+						category={c.category}
+						filter={filter}
+					/>
+				);
+			})}
+		</nav>
+	);
+}