Update menu styling

src/App.tsx

@@ -2,7 +2,8 @@ import { RecoilRoot } from 'recoil'
 
 import Mutuals from "./components/Mutuals"
 import Card from "./components/Card"
-import Menu from "./components/Menu"
+import VerticalMenu from "./components/VerticalMenu"
+import HorizontalMenu from "./components/HorizontalMenu"
 import ContentRenderer from "./components/ContentRenderer"
 import Footer from "./components/Footer"
 
@@ -71,7 +72,10 @@ export default function App() {
         <div id="content" className="absolute text-white" style={{ top: `${contentY}px`}}>
           <div className="grid grid-container md:grid-cols-5 gap-2 min-h-[70vh] w-3xl">
             <div className="hidden md:block md:col-span-1">
-              <Menu />
+              <VerticalMenu />
+            </div>
+            <div className="block md:hidden">
+              <HorizontalMenu />
             </div>
             <div className="w-full px-5 md:col-span-4 md:px-0">
               <ContentRenderer />

src/components/ContentRenderer.tsx

@@ -6,7 +6,7 @@ import Keys from "./Keys"
 import Spotify from "./Spotify"
 import Services from "./Services"
 
-import { currentPage, Pages } from "./Menu"
+import { currentPage, Pages } from "./VerticalMenu"
 
 
 

src/components/HorizontalMenu.tsx

@@ -0,0 +1,55 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faUser, faStar} from '@fortawesome/free-regular-svg-icons'
+import { faLink, faKey } from '@fortawesome/free-solid-svg-icons'
+
+import { RecoilRoot, atom, useRecoilState } from 'recoil'
+
+export enum Pages {
+    Profile = 0,
+    Links = 1,
+    Keys = 2,
+    Activities = 3,
+    Spotify = 4,
+    Services = 5,
+  }
+
+export const currentPage = atom({
+    key: 'page',
+    default: Pages.Profile,
+})
+
+export default function HorizontalMenu() {
+    const [page, setPage] = useRecoilState(currentPage);
+
+    return (
+      <RecoilRoot>
+        <div className="text-lg font-medium text-center hover:cursor-pointer grid grid-cols-4 grid-flow-col">
+            <div
+                className={`self-start py-3 rounded-lg ${page === Pages.Profile ? "bg-slate-700" : ""}`}
+                onClick={() => {setPage(Pages.Profile)}}
+            >
+                <FontAwesomeIcon icon={faUser} />{" "}
+            </div>
+            <div
+                className={`self-start py-3 rounded-lg ${page === Pages.Links ? "bg-slate-700" : ""}`}
+                onClick={() => {setPage(Pages.Links)}}
+            >
+                <FontAwesomeIcon icon={faLink} />{" "}
+            </div>
+            <div
+                className={`self-start py-3 rounded-lg ${page === Pages.Keys ? "bg-slate-700" : ""}`}
+                onClick={() => {setPage(Pages.Keys)}}
+            >
+                <FontAwesomeIcon icon={faKey} />{" "}
+            </div>
+            <div
+                className={`self-start py-3 rounded-lg ${page === Pages.Services ? "bg-slate-700" : ""}`}
+                onClick={() => {setPage(Pages.Services)}}
+            >
+                <FontAwesomeIcon icon={faStar} />{" "}
+            </div>
+        </div>
+      </RecoilRoot>
+    )
+  }
+  

src/components/VerticalMenu.tsx

@@ -18,35 +18,35 @@ export const currentPage = atom({
     default: Pages.Profile,
 })
 
-export default function Menu() {
+export default function VerticalMenu() {
     const [page, setPage] = useRecoilState(currentPage);
 
     return (
       <RecoilRoot>
         <ul className="w-full text-lg font-medium text-center hover:cursor-pointer">
             <li
-                className={`w-full px-4 py-2${page === Pages.Profile ? " bg-slate-700" : ""}`}
+                className={`w-full px-4 py-2 rounded-lg${page === Pages.Profile ? " bg-slate-700" : ""}`}
                 onClick={() => {setPage(Pages.Profile)}}
             >
                 <FontAwesomeIcon icon={faUser} />{" "}
                 <p>プロフィール</p>
             </li>
             <li
-                className={`w-full px-4 py-2${page === Pages.Links ? " bg-slate-700" : ""}`}
+                className={`w-full px-4 py-2 rounded-lg${page === Pages.Links ? " bg-slate-700" : ""}`}
                 onClick={() => {setPage(Pages.Links)}}
             >
                 <FontAwesomeIcon icon={faLink} />{" "}
                 <p>リンク</p>
             </li>
             <li
-                className={`w-full px-4 py-2${page === Pages.Keys ? " bg-slate-700" : ""}`}
+                className={`w-full px-4 py-2 rounded-lg${page === Pages.Keys ? " bg-slate-700" : ""}`}
                 onClick={() => {setPage(Pages.Keys)}}
             >
                 <FontAwesomeIcon icon={faKey} />{" "}
                 <p>公開鍵</p>
             </li>
             <li
-                className={`w-full px-4 py-2${page === Pages.Services ? " bg-slate-700" : ""}`}
+                className={`w-full px-4 py-2 rounded-lg${page === Pages.Services ? " bg-slate-700" : ""}`}
                 onClick={() => {setPage(Pages.Services)}}
             >
                 <FontAwesomeIcon icon={faStar} />{" "}