Feature: return to home button

[Bran18]

📝 Add Navigation Component to Marketplace Sidebar

🛠️ Issue

• Closes Add return to home button in Marketplace page #12

📖 Description

• This PR introduces a new navigation btn in the Marketplace sidebar, improving the user experience by providing easy access to key section of the application. Instead of just adding a simple "Return to Home" button, i've implemented a more scalable and maintainable navigation solution.

✅ Changes made

• Added imports for usePathname and useRouter from Next.js
• Added the Home icon from lucide-react
• Added path checking logic in the SidebarComponent using usePathname
• Added a "Home" button at the top of the sidebar content that only appears when the URL contains "/marketplace"
• Styled the button to match the existing design system

📜 Additional Notes

• The current implementation serves the immediate need for a home button, as the application grows, you might want to consider a more scalable navigation solution. Here's a proposed enhancement that could be implemented when more routes are added to the application:

Navigation helper component

interface NavItem {
  label: string;
  icon: React.ReactNode;
  href: string;
  showOn: string[];
}

const navigationItems: NavItem[] = [
  {
    label: "Home",
    icon: <Home className="h-4 w-4" />,
    href: "/",
    showOn: ["/marketplace"]
  },
  {
    label: "My Orders",
    icon: <ShoppingBag className="h-4 w-4" />,
    href: "/orders",
    showOn: ["/marketplace"]
  },
  {
    label: "Wishlist",
    icon: <Heart className="h-4 w-4" />,
    href: "/wishlist",
    showOn: ["/marketplace"]
  }
];

function SidebarNavigation() {
  const pathname = usePathname();
  const router = useRouter();

  const visibleItems = navigationItems.filter(item => 
    item.showOn.some(path => pathname?.includes(path))
  );

  if (visibleItems.length === 0) return null;

  return (
    <nav className="mb-6 border-b border-gray-200 pb-6">
      <div className="space-y-2">
        {visibleItems.map((item) => (
          <Button
            key={item.href}
            variant="ghost"
            className="w-full justify-start gap-2"
            onClick={() => router.push(item.href)}
          >
            {item.icon}
            {item.label}
          </Button>
        ))}
      </div>
    </nav>
  );
}

Consider This Implementation When:

• Multiple navigation items need to be added
• Different sections of the app require different navigation options
• The app requires dynamic navigation based on user roles or contexts

Video Preview

Screen.Recording.2024-11-21.at.7.53.19.PM.mov

[danielcdz]

can you move the button to somewhere in the header bar instead of inside the filters?

[Bran18]

can you move the button to somewhere in the header bar instead of inside the filters?

Done mate, It is now placed next to the filter toggler in the header section

[danielcdz]

can you resolve the conflicts and attach and updated gif of how it looks? @Bran18

[Bran18]

@danielcdz done mate, the branch is sync with main and this is the home navigation btn position now:

Screen.Recording.2024-11-23.at.9.56.16.AM.mov

[Bran18]

I just added an extra responsive just in case