Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/log-portfolio/llms.txt

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

Taskbar is the persistent navigation strip fixed to the bottom of the screen. It gives visitors three things at a glance: a Start button that opens a decorative program menu, a row of window buttons that mirror every open application, and a system tray that shows a live clock updating every second. The component is entirely self-contained — it reads window state from WindowContext and manages only its own Start-menu open/closed toggle locally.

​
Layout

The taskbar mounts as a fixed bar spanning the full viewport width: 
<div className="fixed bottom-0 left-0 right-0 h-10 win-bg win-border flex items-center px-1 z-[9999]">
PropertyValueNotes
Heighth-10 (40 px)Matches the pb-12 / pb-10 clearance used by the Desktop
Backgroundwin-bgShared Windows 98 grey surface class
Borderwin-borderRaised outer bevel
Z-index9999Sits above all application windows

​
Start Button

The Start button is a win-button that toggles a local boolean with useState. When active, win-border-inset is added to the button to give the pressed-in look: 
<button
  className={`win-button h-8 px-2 font-bold flex items-center gap-1 ${
    startOpen ? "win-border-inset" : ""
  }`}
  onClick={() => setStartOpen(!startOpen)}
>
  <img
    src="https://upload.wikimedia.org/wikipedia/commons/e/e1/Windows_logo_-_1992.svg"
    alt="Start"
    className="w-4 h-4"
  />
  <span className="italic pr-1">Start</span>
</button>
The label is rendered in italic, matching the original Windows 98 Start button typography.

​
Start Menu

When startOpen is true, an absolutely-positioned popup renders above the button: 
<div className="absolute bottom-full left-0 mb-1 w-64 win-bg win-border flex flex-col shadow-lg">

​
Sidebar

A narrow vertical strip on the left side of the menu reproduces the Windows 98 gradient sidebar: 
<div className="bg-gradient-to-b from-[#000080] to-[#1084d0] w-8 absolute left-0 top-0 bottom-0
                flex items-end pb-2 justify-center">
  <span className="text-white font-bold -rotate-90 whitespace-nowrap tracking-widest">
    Windows <span className="font-normal">98</span>
  </span>
</div>

​
Menu Items

Three items appear in the menu body (offset right of the sidebar with ml-8):

Programs

Renders a Terminal (Lucide) icon with a ChevronRight arrow on the right. Decorative only — clicking does not navigate anywhere.

Documents

Renders a yellow square div as the icon with a ChevronRight arrow. Decorative only.

Shut Down...

Rendered below a horizontal win-border-inset divider. Uses a red circle with a white ! as the icon. Decorative only — clicking does not trigger any shutdown behaviour.
All menu items share the same hover style: hover:bg-[#000080] hover:text-white, the classic Windows 98 blue selection highlight.
None of the Start menu items are wired to functional actions. They exist purely to complete the Windows 98 aesthetic. If you want to add real navigation (e.g., opening a specific window), call openWindow() from useWindows() inside the item’s onClick handler.

​
Window Buttons

The middle section of the taskbar is a flex row that renders one button per entry in windows from WindowContext: 
<div className="flex-1 flex gap-1 overflow-x-auto">
  {windows.map((win) => (
    <button
      key={win.id}
      className={`win-button h-8 px-2 min-w-[120px] max-w-[160px] flex items-center gap-2
                  justify-start truncate ${
                    activeWindowId === win.id && !win.isMinimized
                      ? "win-border-inset bg-gray-300"
                      : ""
                  }`}
      onClick={() => {
        if (win.isMinimized)                        restoreWindow(win.id);
        else if (activeWindowId !== win.id)         focusWindow(win.id);
        // clicking the active, non-minimized window does nothing
      }}
    >
      <div className="w-4 h-4 flex-shrink-0">{win.icon}</div>
      <span className="truncate text-sm">{win.title}</span>
    </button>
  ))}
</div>

​
Click Behaviour

Window stateAction on click
MinimizedrestoreWindow(id) — brings the window back onto the desktop
Active and not minimizedNo-op — the window is already focused
Inactive and not minimizedfocusWindow(id) — raises the window to the top

​
Active Button Style

When a window is the currently active (focused) window and is not minimized, its taskbar button receives win-border-inset bg-gray-300, giving it the pressed-in appearance to indicate it is in the foreground.

​
System Tray

The system tray sits at the right end of the taskbar in a win-border-inset container: 
<div className="win-border-inset px-2 h-8 flex items-center gap-2 ml-2 bg-gray-200">
  <div className="w-4 h-4 bg-green-500 rounded-full animate-pulse" title="Connected" />
  <span className="text-xs">{formatTime(currentTime)}</span>
</div>

​
Connection Indicator

A 16 × 16 px green circle with animate-pulse serves as a network connection indicator. It is always green and always pulsing — a nod to the era’s always-visible connection status icons.

​
Live Clock

The displayed time is updated every second via a setInterval that is cleaned up on unmount: 
const [currentTime, setCurrentTime] = useState(new Date());

useEffect(() => {
  const timer = setInterval(() => setCurrentTime(new Date()), 1000);
  return () => clearInterval(timer);
}, []);
Time is formatted with: 
currentTime.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
This produces locale-aware output such as 02:45 PM (en-US) or 14:45 (en-GB), matching the visitor’s system locale automatically.

Build docs developers (and LLMs) love

Get started for freeTalk to us