Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/windows-xp-developer/llms.txt

Use this file to discover all available pages before exploring further.

The Taskbar component faithfully recreates the iconic Windows XP bottom bar. Fixed to the bottom of the viewport at full width, it provides the primary navigation trigger (the Start button), an active window indicator that reflects the current route, and a right-side system tray showing status icons alongside a live clock. It is self-contained — it manages its own state and reads the current route directly, accepting no props.

​
Anatomy

The Taskbar is divided into two regions: a left-hand navigation area and a right-hand system tray. The full bar carries an XP-blue gradient (from-[#245edb] via-[#3f8cf3] to-[#245edb]), stands h-12 tall, and is separated from page content by a border-t border-[#4a95ff] highlight line.

​
Left side

Start button A green gradient pill with a rounded right edge (rounded-r-2xl). It displays a Windows-logo circle (a red/green/blue gradient sphere) alongside italic bold start text. Clicking the button toggles the StartMenu overlay open or closed — when the menu is open the button depresses into a darker inset shadow (from-[#1c4b27] to-[#3b8c4c]). Active window indicator A dark-blue recessed pill (from-[#1c4b99] to-[#0d3270]) that sits immediately to the right of the Start button. It reads the current pathname from useLocation() and maps it to a human-readable page label. The label updates automatically on every navigation.

​
Path-to-label mapping

PathLabel
/Home
/aboutAbout Me
/projectsMy Projects
/skillsSkills Dashboard
/workWork History
/case-studiesCase Studies
/articlesArticles Library
/testimonialsTestimonials
/contactContact Form
Any unrecognised path falls back to "Portfolio".

​
Right side — system tray

The system tray sits at the far right of the bar inside a slightly deeper blue panel (from-[#0d85e5] to-[#0058e6]), separated from the left region by an inset left border.
  • Wi-Fi icon — Lucide Wifi at size 14, indicating network connectivity.
  • Volume icon — Lucide Volume2 at size 14, representing audio output.
  • Live clock — Displays the current time formatted as HH:MM using new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }). A small Lucide Clock icon precedes the time string.
The Taskbar calls useLocation() internally to derive the active window label. It must be rendered inside a BrowserRouter or HashRouter context — mounting it outside a router will throw a React Router invariant error at runtime.

​
Props

The Taskbar accepts no props. All state (Start Menu open/closed) and data (current pathname, current time) are managed internally.

​
Internal state

const [isMenuOpen, setIsMenuOpen] = React.useState(false);
const location = useLocation(); // reads pathname from router context

// Formatted at render time — not reactive to second changes
const time = new Date().toLocaleTimeString([], {
  hour: '2-digit',
  minute: '2-digit',
});

​
Example placement

The Taskbar is rendered once inside Layout and is not intended to be instantiated elsewhere. 
import { T as Taskbar } from './components/Taskbar.js';

// Inside Layout — do not use standalone outside a router
function Layout({ children }) {
  return (
    <div className="h-screen frutiger-bg flex flex-col">
      <main className="flex-1 overflow-y-auto pb-12">
        {children}
      </main>
      <Taskbar />
    </div>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us