Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/retrowin/llms.txt

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

Taskbar is the persistent navigation chrome fixed to the bottom of the RetroWin desktop. It faithfully reproduces the Windows 98 taskbar: a raised silver bar containing a Start button on the left and a system tray on the right. Clicking Start opens a pop-up menu — featuring the iconic vertical “Windows98” sidebar — with buttons that route to every section of the portfolio. The system tray displays an animated green CPU activity bar and a live clock that ticks every second. Taskbar accepts no props. It is intended to be mounted once at the application root, outside of any route component.

​
Usage

import { Taskbar } from './components/y2k/Taskbar';

function App() {
  return (
    <>
      <Taskbar />
      {/* route outlet / desktop content */}
    </>
  );
}

​
Internal State

State variableTypeDescription
dateDateHolds the current Date object, refreshed every 1 000 ms via setInterval. Powers the clock display in the system tray.
openbooleanTracks whether the Start menu is currently visible. Toggled by clicking the Start button; closed automatically after any menu item is selected.

​
Start Menu Navigation

The Start menu is rendered as an absolutely-positioned panel that slides above the taskbar when open is true. It contains the following navigation targets:
Menu itemRoute
About Me/about
Projects/projects
Skillz/skills
Guestbook/contact
Each button calls an internal handler that navigates to the target route via useNavigate() and then sets open to false to close the menu.

​
System Tray

The right side of the taskbar renders a sunken (win98-inset) system tray containing two elements:
  • CPU bar — a 16 × 12 px black-bordered box with a green animate-pulse fill bar whose height is randomised on each render. Mimics a Windows 98 resource monitor widget.
  • Clock — the current time formatted as HH:MM (12 or 24-hour depending on the user’s locale) using toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }). Updates every second.
Taskbar uses useNavigate() internally and must be rendered inside a React Router context.
The CPU bar height is randomised at render time using Math.random(), so it will re-randomise on every React re-render (including the clock tick). This is purely decorative.
Because Taskbar is position: fixed at bottom: 0 with z-index: 60, add padding-bottom: 2rem (or equivalent) to your desktop container so that window content is not obscured by the bar.

Build docs developers (and LLMs) love

Get started for freeTalk to us