update NavItem component

app/(dashboard)/u/[username]/_components/sidebar/nav-item.tsx

@@ -1,14 +1,11 @@
 "use client";
 
-import { LiveBadge } from "@/components/live-badge";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
-import { UserAvatar } from "@/components/user-avatar";
 import { cn } from "@/lib/utils";
-import { useSidebar } from "@/store/use-sidebar";
+import { useCreatorSidebar } from "@/store/use-creator-sidebar";
 import { LucideIcon } from "lucide-react";
 import Link from "next/link";
-import { usePathname } from "next/navigation";
 
 interface NavItemProps {
   icon: LucideIcon;
@@ -23,9 +20,7 @@ export const NavItem = ({
   href,
   isActive,
 }: NavItemProps) => {
-  const pathname = usePathname();
-
-  const { collapsed } = useSidebar((state) => state);
+  const { collapsed } = useCreatorSidebar((state) => state);
 
   return (
     <Button
@@ -38,18 +33,16 @@ export const NavItem = ({
       )}
     >
       <Link href={href}>
-        <div
-          className={cn(
-            "flex items-center w-full gap-x-4",
-            collapsed && "justify-center"
-          )}
-        ></div>
+        <div className="flex items-center gap-x-4">
+          <Icon className={cn("h-4 w-4", collapsed ? "mr-0" : "mr-2")} />
+          {!collapsed && <span>{label}</span>}
+        </div>
       </Link>
     </Button>
   );
 };
 
-export const UserItemSkeleton = () => {
+export const NavItemSkeleton = () => {
   return (
     <li className="flex items-center gap-x-4 px-3 py-2">
       <Skeleton className="min-h-[32px] min-w-[32px] rounded-full" />