#
Taskbar
The Taskbar component provides a persistent interface for launching applications and managing open windows in the NidamJS desktop environment. It displays application icons that serve as triggers to open windows, with visual feedback when windows are open.
#
Overview
The taskbar acts as the primary navigation hub for the desktop. It docks to one edge of the screen and displays application icons. When a window is open, the corresponding taskbar icon shows an active indicator, and clicking the icon will either bring the existing window into focus or open a new one.
#
How It Works
The TaskbarManager class handles the taskbar functionality:
- Event Binding: Listens for clicks on taskbar icons to trigger window opening
- Window State Sync: Subscribes to
window:openedandwindow:closedevents to update icon states - Visual Feedback: Toggles the
is-openclass on icons based on window state
When you click a taskbar icon, the manager calls windowManager.open(endpoint) with the endpoint specified in the icon's data-modal attribute. If a window with that endpoint is already open, it will be brought into focus.
#
Features
- Flexible Positioning: Dock the taskbar to the bottom (default), left, or right side of the screen
- Visual Indicators: Active applications display a pill-shaped indicator below the icon
- Automatic Sync: Real-time updates based on window lifecycle events
- Responsive Animations: Smooth transitions for hover states and state changes
- Multiple Styles: Default floating style and extended Windows-style bar
#
Usage
#
Basic Structure
The taskbar is defined in HTML using the nd-taskbar attribute. Individual items use the nd-taskbar-icon attribute and must map to a window endpoint via data-modal.
<div nd-taskbar>
<div nd-taskbar-icon data-modal="terminal">
<img src="/icons/terminal.png" alt="Terminal" />
</div>
<div nd-taskbar-icon data-modal="browser">
<img src="/icons/browser.png" alt="Browser" />
</div>
<div nd-taskbar-icon data-modal="settings">
<img src="/icons/settings.png" alt="Settings" />
</div>
</div>
#
Taskbar Styles
NidamJS provides two built-in taskbar styles:
Default Style (Floating)
The default floating style positions the taskbar as a rounded bar that floats above the desktop with a glassmorphic appearance.
<div nd-taskbar>
<!-- Icons here -->
</div>Extended Style (Windows-style)
The extended style creates a full-width bar docked to the bottom of the screen, similar to the Windows taskbar.
<div nd-taskbar="extend">
<!-- Icons here -->
</div>
#
Changing Position
You can change the orientation and position of the taskbar using the nd-taskbar-position attribute.
Bottom (Default)
<div nd-taskbar nd-taskbar-position="bottom">...</div>Left
<div nd-taskbar nd-taskbar-position="left">...</div>Right
<div nd-taskbar nd-taskbar-position="right">...</div>
#
Icon Labels
For the extended taskbar style, you can add text labels beneath or beside icons:
<div nd-taskbar="extend">
<div nd-taskbar-icon data-modal="terminal">
<img src="/icons/terminal.png" alt="Terminal" />
<span>Terminal</span>
</div>
</div>Or use buttons with text:
<div nd-taskbar="extend">
<button nd-taskbar-icon class="toolbar-btn" data-modal="terminal">
Terminal
</button>
</div>
#
Structure & Styling
#
DOM Structure
The TaskbarManager targets specific attributes to apply logic and styling.
<!-- Taskbar Container -->
<div nd-taskbar nd-taskbar-position="bottom">
<!-- Inactive Icon -->
<div nd-taskbar-icon data-modal="app-id">
<img src="..." />
</div>
<!-- Active Icon (is-open class added by TaskbarManager) -->
<div nd-taskbar-icon data-modal="app-id" class="is-open">
<img src="..." />
<!-- The "is-open" class displays the indicator via CSS ::after -->
</div>
</div>
#
CSS Architecture
The taskbar styles are organized in three CSS files:
root.css: Defines all CSS custom properties (variables)default.css: Implements the default floating taskbar styleextend.css: Implements the extended Windows-style taskbar
#
CSS Variables
Customize the look and feel of the taskbar by overriding CSS custom properties in your stylesheet. Variables are scoped under the [nd-taskbar] selector.
#
Taskbar Container
#
Positioning (Bottom)
#
Positioning (Side - Left/Right)
#
Flex Layout
#
Icon Item
#
Icon Hover State
#
Icon Open State (Extended Style)
#
Active Indicator (Pill)
#
Indicator Hover State
#
Customization Examples
#
Changing Taskbar Appearance
:root {
/* Make the taskbar darker and more opaque */
--nd-taskbar-bg: rgba(15, 23, 42, 0.85);
--nd-taskbar-border: 1px solid rgba(100, 116, 139, 0.3);
/* Adjust positioning */
--nd-taskbar-bottom: 20px;
--nd-taskbar-radius: 16px;
/* Customize the blur effect */
--nd-taskbar-backdrop-filter: blur(20px);
}
#
Customizing Icons
:root {
/* Larger icons */
--nd-taskbar-icon-width: 64px;
--nd-taskbar-icon-height: 64px;
--nd-taskbar-icon-radius: 16px;
/* Custom hover effect */
--nd-taskbar-icon-hover: rgba(59, 130, 246, 0.5);
--nd-taskbar-icon-hover-transform: scale(1.1);
}
#
Customizing the Active Indicator
:root {
/* Make the indicator more prominent */
--nd-taskbar-indicator-bg: #3b82f6;
--nd-taskbar-indicator-width: 24px;
--nd-taskbar-indicator-height: 4px;
--nd-taskbar-indicator-shadow: 0 0 12px rgba(59, 130, 246, 0.6);
}
#
Creating a Dark Theme Taskbar
:root {
--nd-taskbar-bg: rgba(30, 41, 59, 0.9);
--nd-taskbar-backdrop-filter: blur(16px);
--nd-taskbar-border: 1px solid rgba(51, 65, 85, 0.5);
--nd-taskbar-icon-hover: rgba(51, 65, 85, 0.7);
--nd-taskbar-indicator-bg: #38bdf8;
--nd-taskbar-indicator-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
}
#
Side Taskbar Configuration
:root {
/* Left position */
--nd-taskbar-position: fixed;
--nd-taskbar-left: 10px;
--nd-taskbar-top: 50%;
--nd-taskbar-transform: translateY(-50%);
--nd-taskbar-flex-direction: column;
--nd-taskbar-min-height: 400px;
/* Adjust icons for vertical layout */
--nd-taskbar-icon-max-width: 60px;
}
#
Extended Style Variables
When using nd-taskbar="extend", additional variables customize the Windows-style appearance:
[nd-taskbar="extend"] {
--nd-taskbar-width: 100%;
--nd-taskbar-min-width: 100%;
--nd-taskbar-bottom: 0;
--nd-taskbar-left: 0;
--nd-taskbar-transform: none;
--nd-taskbar-radius: 0;
--nd-taskbar-bg: rgb(30 41 59 / 0.9);
}
[nd-taskbar="extend"] [nd-taskbar-icon] {
--nd-taskbar-icon-width: auto;
--nd-taskbar-icon-min-width: 50px;
--nd-taskbar-icon-height: 42px;
--nd-taskbar-icon-radius: 4px;
}
#
API Reference
#
HTML Attributes
#
CSS Selectors
#
JavaScript Events
The TaskbarManager listens for these window events:
#
Programmatic Control
To manually control taskbar icons from JavaScript:
// Get all taskbar icons for a specific endpoint
const icons = document.querySelectorAll(
'[nd-taskbar-icon][data-modal="terminal"]',
);
// Manually add the open state
icons.forEach((icon) => icon.classList.add("is-open"));
// Remove the open state
icons.forEach((icon) => icon.classList.remove("is-open"));