Skip to content

SideBar (components/base/SideBar.tsx)

Overview

Navigation sidebar component that provides main application routing and user navigation. It features an expandable/collapsible design that shows icons only when collapsed and both icons and text when expanded.

Features

  • Expandable/collapsible navigation sidebar
  • Hover and click expansion triggers
  • Active route highlighting
  • Notification center integration
  • User authentication state display
  • Logout functionality
  • Responsive design with smooth transitions

Implementation

State Management

const [isOpen, setIsOpen] = useState(false);
const [openTrigger, setOpenTrigger] = useState<"hover" | "click" | null>(null);
const [showNotifications, setShowNotifications] = useState(false);
const [userName, setUserName] = useState<string | null>(null);

The sidebar includes the following navigation items:

  • Notifications (Bell icon)
  • Home (route: "/")
  • Projects (route: "/documents")
  • Bid Library (route: "/knowledgebase")
  • Bidbot (route: "/chatbot")
  • Settings (route: "/settings")

Methods

const handleSignout = () => // Handles user logout
const handleClick = (e: React.MouseEvent) => // Manages sidebar expansion/collapse on click
const handleMouseEnter = () => // Expands sidebar on hover
const handleMouseLeave = () => // Collapses sidebar when mouse leaves
const handleNotificationItemClick = (e: React.MouseEvent) => // Toggles notification panel
const getItemStyle = (path: string) => // Returns styling for active/inactive menu items
const formatNotificationDate = (dateString: string | Date) => // Formats notification dates

HTML Structure

The sidebar has a nested structure:

  • Main container div (sidebar)
  • Logo section
  • Navigation list (expanded or collapsed based on state)
    • Notification button
    • Navigation items
  • User section with logout button

Props

No props - standalone component

Components Used

  • SideBarElement - Individual navigation item
  • Various Lucide icons (LogOut, BookOpen, Home, FileText, etc.)

Dependencies

import React, { useState, useRef, useEffect } from "react";
import { useSession, signOut } from "next-auth/react";
import { useRouter } from "next/router";
import SideBarElement from "./SideBarElement";
import { LogOut, BookOpen, Home, FileText, Briefcase, BellRing, etc. } from "lucide-react";
import { decrypt } from "@/lib/encryption";
import { useNotifications } from "@/lib/hooks/useNotifications";

Notes

  • Integrates with the notification system to display unread notification count
  • Uses session data to display the authenticated user's name
  • Provides encrypted username support
  • Features smooth animations for expanding/collapsing
  • Includes detailed notification panel with read/unread status and timestamp formatting

Props

No props required for this component.

Implementation

State Management

const [isBeta, setBeta] = useState(true);
const router = useRouter();

Methods

No additional methods required.

Unique Functionality

  • Brand logo rendering
  • Navigation menu structure
  • Beta feature handling
  • Route organisation

HTML Structure

<div className="sidebar bg-blue-925 text-white border-r border-gray-300">
  <img
    src="/app/assets/icons/bidscript_white.svg"
    alt="sidebar-icon"
    className="relative h-30 w-10 m-3"
  />
  <ul className="space-y-2 mt-5 px-2 font-medium">
    <SideBarElement
      icon="/app/new-tender.svg"
      iconAltText="mytenderapplication"
      text="Home"
      route="/"
      canShowText={true}
    />
    <SideBarElement
      icon="/app/filestorage.svg"
      iconAltText="fileStorage"
      text="Resource Hub"
      route="documents"
      canShowText={true}
    />
    <SideBarElement
      icon="/app/workspace-icon.svg"
      iconAltText="workspace"
      text="Workspace"
      route="editor"
      badgeText="Beta"
      canShowText={true}
    />
  </ul>
</div>

API Integration

No direct API integration.

Components Used

Notes

  • Uses Tailwind CSS for styling
  • Implements responsive design
  • Features beta functionality
  • Supports navigation routing
  • Includes branding elements