Skip to content

HostelAdmin Component

Overview

The HostelAdmin component renders a sidebar navigation menu specifically designed for hostel administrators in an educational institution management system. It provides a collapsible interface with sections for Hostel management, Complaints, and Profile access.

Component Structure

Imports

import React, { useState } from "react";
import { IoMdArrowDropright } from "react-icons/io";
import { IoMdArrowDropdown } from "react-icons/io";
import { Link } from "react-router-dom";
  • React, useState: Core React library and state management hook
  • IoMdArrowDropright, IoMdArrowDropdown: Icon components from React Icons library that visually indicate collapsed/expanded states
  • Link: React Router component for client-side navigation

State Management

const [expandedSections, setExpandedSections] = useState({
    hostel: false,
    complaint: false,
    profile: false,
});

The component uses a single state object to track the expansion state of each section: - hostel: Controls visibility of hostel management options - complaint: Controls visibility of complaint management options - profile: Controls visibility of profile options

All sections are initially collapsed (set to false).

Toggle Function

const toggleSection = (section) => {
    setExpandedSections((prev) => ({
        ...prev,
        [section]: !prev[section],
    }));
};

This function handles the expansion/collapse behavior: 1. Takes a section identifier as parameter 2. Uses the functional state update pattern (with previous state) 3. Uses the spread operator to maintain all existing state values 4. Uses computed property syntax [section] to update only the specified section 5. Toggles the boolean value of the specified section using the logical NOT operator (!)

JSX Structure

The component returns a hierarchical unordered list with three main sections:

  1. Hostel Section: Contains links to leave management, mess management, and transfer requests
  2. Complaint Section: Contains a link to view complaints
  3. Profile Section: Contains an option to view the admin's profile

Each section follows the same pattern: - A clickable header with toggle functionality - An arrow icon that changes based on expansion state - A nested list with relevant navigation options that displays conditionally

Hostel Section

When expanded, displays: - Leave (/hostel/leave) - Mess (/hostel/mess) - Transfer (/hostel/transfer)

Complaint Section

When expanded, displays: - View Complaints (/complaint)

Profile Section

When expanded, displays: - View Profile (no link provided)

Implementation Details

Conditional Rendering

{expandedSections.hostel && (
    <ul className="pl-5">
        {/* List items */}
    </ul>
)}

The component uses the logical AND (&&) operator for conditional rendering. When a section's state is true, the corresponding submenu is rendered; otherwise, nothing is displayed.

Icon Toggle

{expandedSections.hostel ? <IoMdArrowDropdown /> : <IoMdArrowDropright />}

A ternary operator switches between dropdown and right-pointing arrow icons based on the section's expansion state, providing visual feedback to the user.

<Link to="/hostel/leave" className='text-gray-700 hover:text-gray-900'>
    <li>Leave</li>
</Link>

Note that in the Hostel section, the Link component wraps the <li> elements, while in the Complaint section, the Link is inside the <li>. Both approaches work but represent slightly different HTML structures.

Styling

The component uses Tailwind CSS utility classes for styling: - list-none: Removes default list bullets - pl-5: Adds left padding (5 units) - mt-5 and mt-2: Add top margin - font-bold: Makes text bold - cursor-pointer: Changes cursor to pointer on hover - flex items-center: Arranges items horizontally and centers them vertically - text-gray-700, hover:text-gray-900: Text color and hover state

Usage

This component should be imported and placed within a layout that has React Router configured. Typically, it would be used as a sidebar in the hostel administration section of the application.

import HostelAdmin from './components/HostelAdmin';

const HostelAdminDashboard = () => {
    return (
        <div className="dashboard-layout">
            <div className="sidebar">
                <HostelAdmin />
            </div>
            <div className="main-content">
                {/* Dashboard content */}
            </div>
        </div>
    );
};