Simple Color-Coded Index and Sidebar Pattern

This guide explains how to implement color-coded grouping in index pages with matching sidebar menu items, providing visual cues to help users navigate related content more easily.

Overview

The color-coded pattern enhances navigation by:

Applying consistent color themes to each category of content
Visually connecting index page sections with their corresponding sidebar links
Improving content discoverability through visual organization
Providing intuitive visual cues for related content

Implementation Steps

1. Prepare the Index Page

First, structure your index page with clear section groupings:

Create a new index.md file or update an existing one
Add a custom sidebar_class_name to the frontmatter
Structure the page content with clear section headings
Wrap each section's links in a div with appropriate class names

---
title: Your Section Title
sidebar_position: X
sidebar_class_name: your-section-name
---

# Your Section Title

This section covers topics related to X, including:
- Category One
- Category Two
- Category Three
- Category Four

## Overview

Brief overview of this section...

## Category One
<div class="sidebar-section category-one-section">
- [Link One](./link-one)
- [Link Two](./link-two)
- [Link Three](./link-three)
</div>

## Category Two
<div class="sidebar-section category-two-section">
- [Link Four](./link-four)
- [Link Five](./link-five)
</div>

2. Add CSS Styling

Add CSS styles that define both the index page sections and corresponding sidebar menu items:

Open src/css/custom.css
Add styles for the index page sections
Add styles for the sidebar menu items using attribute selectors that match URL patterns
Include dark mode support

/* Section styling in the index page */
.your-section-name .sidebar-section {
  margin: 1rem 0;
  padding: 0.5rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.your-section-name .sidebar-section:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

[data-theme='dark'] .your-section-name .sidebar-section:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* Section-specific colors */
.category-one-section {
  border-left: 4px solid #2196f3; /* Blue */
}

.category-two-section {
  border-left: 4px solid #4caf50; /* Green */
}

/* Add more categories with different colors as needed */

/* Dark mode adjustments */
[data-theme='dark'] .category-one-section {
  border-left-color: #64b5f6;
}

[data-theme='dark'] .category-two-section {
  border-left-color: #81c784;
}

/* Sidebar menu styling to match the categories */
/* Category One items */
.menu__link[href*="link-one"],
.menu__link[href*="link-two"],
.menu__link[href*="link-three"] {
  border-left: 4px solid #2196f3;
  margin-left: -8px;
  padding-left: 12px;
}

/* Category Two items */
.menu__link[href*="link-four"],
.menu__link[href*="link-five"] {
  border-left: 4px solid #4caf50;
  margin-left: -8px;
  padding-left: 12px;
}

/* Dark mode adjustments for menu items */
[data-theme='dark'] .menu__link[href*="link-one"],
[data-theme='dark'] .menu__link[href*="link-two"],
[data-theme='dark'] .menu__link[href*="link-three"] {
  border-left-color: #64b5f6;
}

[data-theme='dark'] .menu__link[href*="link-four"],
[data-theme='dark'] .menu__link[href*="link-five"] {
  border-left-color: #81c784;
}

Real-World Example: Project Controls

Here's how this pattern was implemented for the Project Controls section:

Index Page Structure

---
title: Project Controls
sidebar_position: 3
sidebar_class_name: project-controls
---

# Project Controls Procedures

This section covers procedures related to project controls, including:
- Project Initiation & Setup
- Subcontractor Management
- Project Execution & Monitoring
- Change Management
- Project Closeout

## Overview

Project Controls procedures help maintain oversight and control of project timelines, budgets, and changes.

## Project Initiation & Setup
<div class="sidebar-section initiation-section">
- [Owner Contract Issuance](./owner-contract-issuance)
- [Certificate of Insurance (COI)](./coi)
- [Create Budget](./create-budget)
- [Budget Management](./budget-management)
- [CPM Schedule](./cpm-schedule) (TBD)
</div>

## Subcontractor Management
<div class="sidebar-section subcontractor-section">
- [Subcontract Issuance](./subcontract-issuance)
- [Subcontract Compliance](./subcontract-compliance)
- [Sub Onboarding](./sub-onboarding)
</div>

## Project Execution & Monitoring
<div class="sidebar-section execution-section">
- [OAC Meeting](./oac-meeting) (TBD)
- [Preconstruction Meeting](./preconstruction-meeting)
- [Invoice Cost Classification](./invoice-cost-classification)
- [Sub and Vendor Payments](./sub-vendor-payments)
- [Sub Pay App](./sub-pay-app)
- [Sub Lien Waivers](./sub-lien-waivers)
</div>

CSS Styling

/* Project Controls Section Styling */
.project-controls .sidebar-section {
  margin: 1rem 0;
  padding: 0.5rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.project-controls .sidebar-section:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

[data-theme='dark'] .project-controls .sidebar-section:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* Section-specific colors */
.initiation-section {
  border-left: 4px solid #2196f3; /* Blue */
}

.subcontractor-section {
  border-left: 4px solid #4caf50; /* Green */
}

.execution-section {
  border-left: 4px solid #ff9800; /* Orange */
}

.change-section {
  border-left: 4px solid #f44336; /* Red */
}

.closeout-section {
  border-left: 4px solid #9c27b0; /* Purple */
}

/* Project Controls Sidebar Menu Styling */
/* Initiation & Setup items */
.menu__link[href*="owner-contract-issuance"],
.menu__link[href*="certificate-of-insurance"],
.menu__link[href*="coi"],
.menu__link[href*="create-budget"],
.menu__link[href*="budget-management"],
.menu__link[href*="cpm-schedule"] {
  border-left: 4px solid #2196f3;
  margin-left: -8px;
  padding-left: 12px;
}

/* Subcontractor Management items */
.menu__link[href*="subcontract-issuance"],
.menu__link[href*="subcontract-compliance"],
.menu__link[href*="sub-onboarding"] {
  border-left: 4px solid #4caf50;
  margin-left: -8px;
  padding-left: 12px;
}

Best Practices

Color Selection:
- Choose contrasting colors for each category
- Ensure colors look good in both light and dark modes
- Limit to 5-7 colors maximum for optimal user experience
URL Patterns:
- Use consistent URL naming patterns for easier CSS targeting
- Consider including category names in URLs (e.g., /initiation-owner-contract)
Maintainability:
- Document color codes used for each category
- Keep CSS selectors up to date when adding new pages
- Use common patterns in URL naming to simplify CSS rules
Accessibility:
- Don't rely solely on color for categorization (use text labels too)
- Ensure sufficient contrast in both light and dark modes
- Avoid colors that might be problematic for colorblind users

Troubleshooting

Issue: Sidebar links not showing the correct color

Check that the URL pattern in CSS selector matches the actual URL
Verify file slugs are consistent with the pattern
Check for typos in CSS selectors

Issue: Index page sections not showing correct styling

Ensure correct sidebar_class_name in frontmatter
Verify that div classes match CSS selectors
Check that section divs are properly closed with </div>

Example Color Palettes

Here are some suggested color palettes for different section types:

Documentation/Procedure Sections

Category 1: #2196f3 (Blue)
Category 2: #4caf50 (Green)
Category 3: #ff9800 (Orange)
Category 4: #f44336 (Red)
Category 5: #9c27b0 (Purple)

Department Sections

Operations: #00838f (Cyan)
HR: #6a1b9a (Deep Purple)
Finance: #2e7d32 (Dark Green)
Marketing: #d84315 (Deep Orange)
IT: #283593 (Indigo)

Overview​

Implementation Steps​

1. Prepare the Index Page​

2. Add CSS Styling​

Real-World Example: Project Controls​

Index Page Structure​

CSS Styling​

Best Practices​

Troubleshooting​

Example Color Palettes​

Documentation/Procedure Sections​

Department Sections​