feat(menubar): add base MenuBar component

- show default clock

app/components/MenuBar/MenuBar.css.ts

@@ -0,0 +1,30 @@
+import { style } from "@vanilla-extract/css";
+
+export const container = style({
+  height: 32,
+  backgroundColor: "rgba(33, 33, 33, 0.4)",
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  zIndex: 1,
+  paddingLeft: 16,
+  paddingRight: 16,
+  display: "flex",
+});
+
+export const menuWrapper = style({
+  display: "inline-flex",
+  alignItems: "center",
+  flex: 1,
+});
+
+export const rightMenuWrapper = style([menuWrapper, {
+  flexDirection: "row-reverse",
+  marginLeft: "auto",
+}]);
+
+export const clock = style({
+  color: "#fff",
+  fontSize: 14,
+});

app/components/MenuBar/index.tsx

@@ -0,0 +1,21 @@
+"use client";
+import { format } from "date-fns";
+import { useMemo } from "react";
+
+import { useClock } from "../../hooks";
+import * as css from "./MenuBar.css";
+
+export const MenuBar = () => {
+  const time = useClock();
+  const clock = useMemo(() => format(time, "E MMM d") + "\u00A0\u00A0" + format(time, "h:mm a"), [time]);
+
+  return (
+    <nav className={css.container}>
+      <div className={css.menuWrapper}>
+      </div>
+      <div className={css.rightMenuWrapper}>
+        <p className={css.clock}>{clock}</p>
+      </div>
+    </nav>
+  );
+};

app/home/components/Shortcuts.tsx

@@ -15,6 +15,8 @@ export const ProfileShortcut = () => {
     <Shortcut
       icon={<Image width={72} height={72} src="/images/icons/icon-profile.png" alt="profile icon" />}
       label="Profile"
+      initialX="24px"
+      initialY="40px"
       onClick={handleClick}
     />
   );
@@ -30,7 +32,8 @@ export const ResumeShortcut = () => {
     <Shortcut
       icon={<Image width={72} height={72} src="/images/icons/icon-resume.png" alt="resume icon" />}
       label="Resume"
-      initialY="120px"
+      initialX="24px"
+      initialY="160px"
       onClick={handleClick}
     />
   );
@@ -46,7 +49,8 @@ export const SettingsShortcut = () => {
     <Shortcut
       icon={<Image width={72} height={72} src="/images/icons/icon-settings.png" alt="settings icon" />}
       label="Settings"
-      initialY="240px"
+      initialX="24px"
+      initialY="280px"
       onClick={handleClick}
     />
   );
@@ -61,7 +65,8 @@ export const GitHubShortcut = () => {
     <Shortcut
       icon={<Image width={72} height={72} src="/images/icons/icon-github.png" alt="github icon" />}
       label="GitHub"
-      initialY="360px"
+      initialX="24px"
+      initialY="400px"
       onClick={handleClick}
     />
   );
@@ -77,7 +82,8 @@ export const BlogShortcut = () => {
     <Shortcut
       icon={<Image width={72} height={72} src="/images/icons/icon-blog.png" alt="blog icon" />}
       label="Blog"
-      initialY="480px"
+      initialX="24px"
+      initialY="520px"
       onClick={handleClick}
     />
   );

app/home/page.tsx

@@ -1,4 +1,5 @@
 import { LayerManager } from "../components/Layer";
+import { MenuBar } from "../components/MenuBar";
 import { Profile } from "./components/Profile";
 import { Resume } from "./components/Resume";
 import { Settings } from "./components/Settings";
@@ -70,6 +71,7 @@ import * as Shortcut from "./components/Shortcuts";
 const Main = () => {
   return (
     <LayerManager>
+      <MenuBar />
       <Shortcut.ResumeShortcut />
       <Shortcut.GitHubShortcut />
       <Shortcut.SettingsShortcut />