From 007331e83e39597d2981ebf3b7e343ec23359d53 Mon Sep 17 00:00:00 2001
From: M1ngdaXie <156019134+M1ngdaXie@users.noreply.github.com>
Date: Thu, 26 Mar 2026 14:19:13 -0700
Subject: [PATCH] feat: add menubar with clock and decorative menu items

---
 src/components/MenuBar/MenuBar.css | 53 ++++++++++++++++++++++++++++++
 src/components/MenuBar/MenuBar.tsx | 31 +++++++++++++++++
 2 files changed, 84 insertions(+)
 create mode 100644 src/components/MenuBar/MenuBar.css
 create mode 100644 src/components/MenuBar/MenuBar.tsx

diff --git a/src/components/MenuBar/MenuBar.css b/src/components/MenuBar/MenuBar.css
new file mode 100644
index 0000000..d2c0a0e
--- /dev/null
+++ b/src/components/MenuBar/MenuBar.css
@@ -0,0 +1,53 @@
+.menubar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: var(--menubar-height);
+  background: rgba(20, 20, 28, 0.72);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  border-bottom: 1px solid var(--glass-border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 12px;
+  z-index: 1000;
+  user-select: none;
+}
+
+.menubar-left {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.menubar-logo {
+  font-size: 14px;
+  margin-right: 8px;
+  cursor: default;
+}
+
+.menubar-item {
+  font-size: 12px;
+  font-weight: 500;
+  color: rgba(255,255,255,0.85);
+  padding: 2px 8px;
+  border-radius: 4px;
+  cursor: default;
+}
+
+.menubar-item:hover {
+  background: rgba(255,255,255,0.1);
+}
+
+.menubar-right {
+  display: flex;
+  align-items: center;
+}
+
+.menubar-clock {
+  font-size: 12px;
+  font-weight: 500;
+  color: rgba(255,255,255,0.85);
+}
diff --git a/src/components/MenuBar/MenuBar.tsx b/src/components/MenuBar/MenuBar.tsx
new file mode 100644
index 0000000..aa3c37f
--- /dev/null
+++ b/src/components/MenuBar/MenuBar.tsx
@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react';
+import './MenuBar.css';
+
+const MENU_ITEMS = ['File', 'Edit', 'View', 'Go', 'Help'];
+
+export default function MenuBar() {
+  const [time, setTime] = useState(() => formatTime(new Date()));
+
+  useEffect(() => {
+    const id = setInterval(() => setTime(formatTime(new Date())), 1000);
+    return () => clearInterval(id);
+  }, []);
+
+  return (
+    <div className="menubar">
+      <div className="menubar-left">
+        <span className="menubar-logo">&#63743;</span>
+        {MENU_ITEMS.map(item => (
+          <span key={item} className="menubar-item">{item}</span>
+        ))}
+      </div>
+      <div className="menubar-right">
+        <span className="menubar-clock">{time}</span>
+      </div>
+    </div>
+  );
+}
+
+function formatTime(d: Date) {
+  return d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true });
+}