SideBarElement.tsx)¶

Overview¶

A reusable navigation element component used within the sidebar that handles routing and displays icons with optional text labels. This component is designed to work in both collapsed and expanded states of the parent sidebar.

Features¶

Icon display with accessibility support
Optional text label that appears in expanded state
Active route highlighting
Route navigation via Next.js router
Smooth transitions for text visibility
Support for both collapsible and expanded sidebar states

Props¶

interface SideBarElementProps {
  icon: React.FC<{ size?: number; className?: string }>; // Lucide icon component
  iconAltText: string; // Accessibility text for icon
  text: string; // Label text
  route: string; // Navigation route
  canShowText: boolean; // Whether to show text (based on sidebar state)
}

Implementation¶

HTML Structure¶

<a className="flex items-center p-2 rounded-lg cursor-pointer hover:bg-blue-700 transition-all duration-300">
  <div className="flex items-center justify-center w-6 h-6">
    <Icon size={20} className="text-white" />
  </div>
  {canShowText && (
    <span className="ml-3 transition-opacity duration-300 whitespace-nowrap">
      {text}
    </span>
  )}
</a>

Methods¶

const handleClick = (e: React.MouseEvent) => {
  e.preventDefault();
  router.push(route);
};

Integration¶

SideBarElement is used by the SideBar component to create each navigation item. The parent SideBar controls whether text is displayed through the canShowText prop, which corresponds to the sidebar's expanded/collapsed state.

Dependencies¶

import { useRouter } from "next/router";
import React from "react";

Usage Example¶

<SideBarElement
  icon={Home}
  iconAltText="home"
  text="Home"
  route="/"
  canShowText={isOpen}
/>

Notes¶

Designed to be used within the SideBar component
Uses Lucide icons for consistent styling
Features hover effects for better user experience
The component handles its own routing logic via Next.js router

interface SideBarElementProps {
  icon?: string;
  iconAltText?: string;
  text: string;
  badgeText?: string;
  route: string;
  canShowText: boolean;
}

Implementation¶

State Management¶

Uses router state from Next.js.

Methods¶

function navigateTo(route: string) {
  router.push(route);
}

Unique Functionality¶

Conditional icon rendering
Optional badge display
Route navigation handling
Responsive text sizing

HTML Structure¶

<li className={`sidebar-element py-2 m-0`}>
  <a
    onClick={() => navigateTo(route)}
    className="flex items-center p-2 text-white-900 rounded-lg dark:text-white"
  >
    {icon && <img src={icon} alt={iconAltText} />}
    <span className="flex-1 text-xs sm:text-base ml-3 sm:whitespace-nowrap">
      {text}
    </span>
    {badgeText && (
      <span className="inline-flex items-center justify-center sm:px-2 ms-1 sm:ms-3 text-sm font-medium text-white bg-pink-600 rounded-full">
        {badgeText}
      </span>
    )}
  </a>
</li>

API Integration¶

No direct API integration.

Components Used¶

No additional components used.

Notes¶

Uses Tailwind CSS for styling
Supports dark mode theme
Features responsive design
Handles navigation events
Includes optional elements