Add icons and collapsible navigation groups to sidebar

[Copilot]

The sidebar navigation lacked visual hierarchy and mobile responsiveness. Enhanced with Bootstrap Icons, collapsible menu groups, and mobile-friendly hamburger menu.

Changes

Visual enhancements:

• Added Bootstrap Icons to all navigation items (ship, anchor, tools, etc.)
• Implemented collapsible groups: "Supply & Maintenance" and "Operations"
• Added chevron animation on expand/collapse
• Fixed sidebar positioning on desktop with proper z-index layering

Mobile responsiveness:

• Hamburger toggle button for screens ≤768px
• Slide-in/out animation with click-outside-to-close
• Header padding adjustment for toggle button placement

User experience:

• Auto-expand parent group when navigating to child page
• Smooth transitions on hover and collapse states
• Submenu indentation for visual nesting

Accessibility:

• ARIA labels on navigation and toggle button
• aria-expanded and aria-controls on collapsible elements

Implementation

<!-- Collapsible group with icons and ARIA attributes -->
<div class="collapse-toggle collapsed" 
     data-bs-toggle="collapse" 
     data-bs-target="#supplyGroup"
     aria-expanded="false" 
     aria-controls="supplyGroup">
    <i class="bi bi-chevron-right"></i>
    <i class="bi bi-box-seam-fill"></i>Supply & Maintenance
</div>
<div class="collapse submenu" id="supplyGroup">
    <a class="nav-link" asp-controller="SupplyServices" asp-action="Index">
        <i class="bi bi-droplet-fill"></i>Supply Services
    </a>
    <!-- ... -->
</div>

JavaScript auto-expands the active section on page load using Bootstrap's Collapse API with toggle: false to prevent double-toggling.

Screenshots

Desktop - Expanded menu:

Mobile - Hamburger menu:

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Improve sidebar navigation with icons and collapsible menus</issue_title>
<issue_description>The sidebar navigation looks plain. Please enhance it with Bootstrap or font-awesome icons for each section and make sub-sections collapsible/expandable.
Example:

• Add a ship icon for “Ship Agencies”
• Use folder/box icons for “Supply Services”, etc.
• Consider using a mobile-friendly menu</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Improve sidebar navigation with icons and collapsible menus #1

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.