Top Menu Bar
Relevant source files
The following files were used as context for generating this wiki page:
The Top Menu Bar is a core UI component of the Portfolio OS, designed to mimic the macOS desktop experience. It provides persistent global status information, application-specific context, and system-wide controls such as language switching and time display.
This component is fixed to the top of the viewport and integrates deeply with the Window Management system to display the name of the currently focused application. It also serves as the primary interface for internationalization (i18n) settings, allowing users to toggle between English and Persian locales.
Sources: features/desktop/components/MenuBar.tsx:43, app/globals.css:122-130
Architecture and Components
The Menu Bar is implemented as a functional React component using Next.js "use client" directive. It is structured into two main flex containers: the left side for application branding/identity and the right side for system status and utilities.
Visual Styling
The component utilizes a "Liquid Glass" (macOS Tahoe) surface system defined in the global CSS. It features high transparency, backdrop blurring, and subtle saturation to pull colors from the underlying wallpaper.
| Style Class | Implementation Details |
|---|---|
fixed inset-x-0 top-0 | Pins the bar to the top of the screen with a height of 7 units (h-7). |
z-[9999] | Ensures the menu bar stays above all windows and desktop icons. |
backdrop-blur-2xl | High-intensity blur for the glass effect. |
bg-white/15 | Low-opacity background to maintain translucency. |
Sources: features/desktop/components/MenuBar.tsx:43-45, app/globals.css:135-143
Application Context and Title Logic
The Menu Bar dynamically updates its title based on the state of the WindowManager. If a window is currently focused, the bar displays the localized name of that application; otherwise, it defaults to the system "Finder" label.
The diagram shows the logic used to determine the text displayed next to the Apple icon.
The logic uses the useWindowManager hook to track the focusedId. If focusedId exists, getApp(focusedId) retrieves the application metadata to access the titleKey.
Sources: features/desktop/components/MenuBar.tsx:28-32, context/WindowManagerContext.tsx:16
System Utilities and Internationalization
The right-aligned section of the Menu Bar contains several status icons and interactive elements:
- Status Icons: Displays Lucide icons for Wifi, Battery, Control Center (Sliders), and Search.
- Language Selector: A dropdown menu allowing users to switch between supported locales (English and Persian).
- Clock: A live time display provided by the
useClockhook.
Language Switching Logic
The language switch involves a React Transition to handle the asynchronous update of the user locale, followed by a router refresh to apply the new translations.
The sequence of events triggered when a user selects a different language in the Top Menu Bar.
Sources: features/desktop/components/MenuBar.tsx:34-39, messages/en.json:16-21
Key Dependencies and Data Structures
The Menu Bar relies on localized strings defined in the messages/ directory and icon assets from lucide-react.
Translation Keys
| Namespace | Key | Description |
|---|---|---|
menu | finder | Default title when no app is focused. |
menu | language | Accessible label for the language dropdown. |
menu | english | Display name for "English" option. |
menu | persian | Display name for "Persian" option. |
apps | [appId] | Used to resolve the active application's title. |
Sources: messages/en.json:1-21, messages/fa.json:1-21, features/desktop/components/MenuBar.tsx:48-52
Implementation Snippet
// features/desktop/components/MenuBar.tsx:28-32
const activeTitle = focusedId
? tApps(getApp(focusedId as AppId).titleKey)
: tMenu("finder");
This logic determines the primary identity shown in the top-left of the OS UI.
Summary
The Top Menu Bar acts as the "Global Header" for the Portfolio OS. It bridges the gap between the underlying Window Management system and the user's need for status awareness. By integrating with next-intl and the WindowManagerContext, it ensures that the UI remains contextually relevant to the active task while providing easy access to system-wide settings like localization.
Sources: features/desktop/components/MenuBar.tsx:1-85, context/WindowManagerContext.tsx:43-57