create sidebar responsive - create header

src/components/ui/dashboard/sidebar-item.tsx

@@ -0,0 +1,21 @@
+import { FC } from "react"
+import { SidebarInterface } from "../../../types"
+import clsx from "clsx"
+import { Link, useLocation } from "react-router-dom"
+
+type Props = {
+    item: SidebarInterface
+}
+export const SidebarItem: FC<Props> = ({ item }) => {
+    const { pathname } = useLocation()
+    return (
+        <Link to={item?.route} className={clsx("w-full flex flex-row gap-x-3 items-center rounded-[20px] p-3 min-w-52", {
+            "bg-secondary-color": item?.route === pathname
+        })}>
+            {item?.route === pathname ? item?.activeIcon : item?.icon}
+            <p className={clsx("font-normal text-base text-secondary-text-color", {
+                "!text-primary-text-color": item?.route === pathname
+            })}>{item?.title}</p>
+        </Link>
+    )
+}