Merge pull request #171 from Jaewoook/feature/system-menubar

Add system menubar

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 />

app/hooks/index.ts

@@ -1,3 +1,4 @@
+export { useClock } from "./useClock";
 export { useDrag } from "./useDrag";
 export { useCoordinateValues } from "./useCoordinateValues";
 export { useOutsideClick } from "./useOutsideClick";

app/hooks/useClock.tsx

@@ -0,0 +1,18 @@
+import { useEffect, useState } from "react";
+
+export const useClock = () => {
+  const [time, setTime] = useState<Date>(new Date());
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setTime(new Date());
+    }, 1000);
+
+    return () => {
+      clearInterval(intervalId);
+    }
+  }, []);
+
+
+  return time;
+};

app/login/components/ClockIndicator/index.tsx

@@ -1,24 +1,15 @@
 "use client";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { format } from "date-fns";
 
+import { useClock } from "../../../hooks";
 import * as css from "./ClockIndicator.css";
 
 export const ClockIndicator = () => {
-  const [time, setTime] = useState<Date>(new Date());
+  const time = useClock();
   const dateIndicator = useMemo(() => format(time, "EEEE, MMMM d"), [time])
   const timeIndicator = useMemo(() => format(time, "h:mm"), [time])
 
-  useEffect(() => {
-    const intervalId = setInterval(() => {
-      setTime(new Date());
-    }, 1000);
-
-    return () => {
-      clearInterval(intervalId);
-    }
-  }, []);
-
   return (
     <section className={css.clockContainer}>
         <p className={css.dateIndicatorText}>{dateIndicator}</p>