Update layout drastically

package.json

@@ -21,6 +21,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scroll-percentage": "^4.3.2",
+    "recoil": "^0.7.7",
     "tailwindcss": "^3.4.1"
   },
   "devDependencies": {

src/App.tsx

@@ -1,18 +1,17 @@
-import Card from "./components/Card"
+import { RecoilRoot } from 'recoil'
-import Profile from "./components/Profile"
+
-import Links from "./components/Links"
-import Keys from "./components/Keys"
-import Activities from "./components/Activities"
-import Footer from "./components/Footer"
 import Mutuals from "./components/Mutuals"
-import Spotify from "./components/Spotify"
+import Card from "./components/Card"
-import Services from "./components/Services"
+import Menu from "./components/Menu"
+import ContentRenderer from "./components/ContentRenderer"
+import Footer from "./components/Footer"
 
 import { useState, useEffect } from 'react';
 
 export default function App() {
   const [cardY, setCardY] = useState(0);
   const [contentY, setContentY] = useState(0);
+  
   const [cardOpacity, setCardOpacity] = useState(1.0);
   
   const handleScroll = () => {
@@ -57,34 +56,34 @@ export default function App() {
   }, []);
 
   return (
-    <>
+    <RecoilRoot>
-    <div id="mutuals">
+      <div id="mutuals">
-      <Mutuals />
+        <Mutuals />
-    </div>
-    <div>
-      <div className={`sticky h-screen absolute`} style={{ opacity: cardOpacity, marginTop: `${document.getElementById("mutuals")?.offsetHeight}px` }}>
-        <div id="card" className="fixed bg-neutral-900 py-5 -mt-20" style={{ top: `${cardY}px` }}>
-          <Card />
-        </div>
       </div>
-        
+      <div>
-      <div className="flex justify-center">
+        <div className={`sticky h-screen absolute`} style={{ opacity: cardOpacity, marginTop: `${document.getElementById("mutuals")?.offsetHeight}px` }}>
-      <div id="content" className="absolute text-white max-w-6xl" style={{ top: `${contentY}px`}}>
+          <div id="card" className="fixed bg-neutral-900 py-5 -mt-20" style={{ top: `${cardY}px` }}>
-        <div className="grid grid-cols-1 xl:grid-cols-2 gap-4 mb-5 w-full">
+            <Card />
-          <Profile />
+          </div>
-          <Links />
-          <Keys />
-          <Activities />
-          <Spotify />
-          <Services />
         </div>
           
-        <div className="mb-5" id="test">
+        <div className="flex justify-center">
-          <Footer />
+        <div id="content" className="absolute text-white" style={{ top: `${contentY}px`}}>
+          <div className="grid md:grid-cols-5 gap-2 min-h-[70vh] max-w-3xl">
+            <div className="hidden md:block">
+              <Menu />
+            </div>
+            <div className="w-full px-5 md:col-span-4 md:px-0">
+              <ContentRenderer />
+            </div>
+          </div>
+
+          <div className="mb-5" id="test">
+            <Footer />
+          </div> 
+        </div>
         </div>
       </div>
-      </div>
+    </RecoilRoot>
-    </div>
-    </>
   )
 }

src/components/Activities.tsx

@@ -1,7 +1,7 @@
 export default function Activities() {
     return (
         <>
-        <div className="p-5 rounded-lg max-w-2xl">
+        <div className="rounded-lg w-full">
             <h1 className="text-2xl text-center">Recent activities</h1>
             <div className="border border-white-500"></div>
 

src/components/ContentRenderer.tsx

@@ -0,0 +1,25 @@
+import { useRecoilState } from 'recoil'
+
+import Profile from "./Profile"
+import Links from "./Links"
+import Keys from "./Keys"
+import Activities from "./Activities"
+import Spotify from "./Spotify"
+import Services from "./Services"
+
+import { currentPage, Pages } from "./Menu"
+
+
+
+export default function ContentRenderer() {
+    const [page, setPage] = useRecoilState(currentPage);
+    return (
+        <>
+            { page === Pages.Profile && <><Profile /><Spotify /></> }
+            { page === Pages.Links && <Links /> }
+            { page === Pages.Keys && <Keys /> }
+            { page === Pages.Activities && <Activities /> }
+            { page === Pages.Services && <Services /> }
+        </>
+    )
+}

src/components/Header.tsx

@@ -1,8 +0,0 @@
-export default function Header() {
-    return (
-      <h1 className="text-3xl font-bold underline">
-        Hello world!
-      </h1>
-    )
-  }
-  

src/components/Keys.tsx

@@ -1,7 +1,7 @@
 export default function Keys() {
     return (
         <>
-        <div className="p-5 rounded-lg max-w-2xl">
+        <div className="rounded-lg w-full">
             <h1 className="text-2xl text-center">Public keys</h1>
             <div className="border border-white-500"></div>
 

src/components/Links.tsx

@@ -5,9 +5,7 @@ import { faAnglesRight } from '@fortawesome/free-solid-svg-icons'
 export default function Links() {
     return (
         <>
-            <div className="p-5 rounded-lg max-w-2xl">
+            <div className="rounded-lg w-full">
-                <h1 className="text-2xl text-center">Links</h1>
-                <div className="border border-white-500 mb-3"></div>
                 <div className="gap-x-6 gap-y-8 flex flex-wrap">
                     <div className="w-24 h-16">
                         <a href="https://x.com/yude_jp">

src/components/Menu.tsx

@@ -0,0 +1,46 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faUser, faStar} from '@fortawesome/free-regular-svg-icons'
+import { faLink, faKey, faSquarePersonConfined } 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 Menu() {
+    const [page, setPage] = useRecoilState(currentPage);
+
+    return (
+      <RecoilRoot>
+        <ul className="w-full text-lg font-medium">
+            <li className="w-full px-4 py-2" onClick={() => {setPage(Pages.Profile)}}>
+                <FontAwesomeIcon icon={faUser} />{" "}プロフィール
+            </li>
+            <li className="w-full px-4 py-2" onClick={() => {setPage(Pages.Links)}}>
+                <FontAwesomeIcon icon={faLink} />{" "}リンク
+            </li>
+            <li className="w-full px-4 py-2" onClick={() => {setPage(Pages.Keys)}}>
+                <FontAwesomeIcon icon={faKey} />{" "}公開鍵
+            </li>
+            <li className="w-full px-4 py-2" onClick={() => {setPage(Pages.Activities)}}>
+                <FontAwesomeIcon icon={faSquarePersonConfined} />{" "}活動
+            </li>
+            <li className="w-full px-4 py-2" onClick={() => {setPage(Pages.Services)}}>
+                <FontAwesomeIcon icon={faStar} />{" "}サービス
+            </li>
+        </ul>
+      </RecoilRoot>
+    )
+  }
+  

src/components/Profile.tsx

@@ -4,7 +4,7 @@ import { faCake, faMapPin } from '@fortawesome/free-solid-svg-icons'
 export default function Profile() {
     return (
         <>
-        <div className="p-5 rounded-lg max-w-2xl">
+        <div className="rounded-lg w-full">
             <h1 className="text-2xl text-center">Profile</h1>
             <div className="border border-white-500"></div>
 

src/components/Services.tsx

@@ -1,12 +1,12 @@
 export default function Services() {
     return (
         <>
-        <div className="p-5 rounded-lg max-w-2xl">
+        <div className="rounded-lg w-full">
             <h1 className="text-2xl text-center">Active services</h1>
             <div className="border border-white-500"></div>
 
             <h2 className="text-xl font-semibold text-gray-200 mt-2 mb-1 ml-1">
-                Major public services
+                サービス
             </h2>
             <ul className="max-w-md space-y-1 ml-5 mt-3 list-disc list-inside text-gray-400">
                 <li>

src/components/Spotify.tsx

@@ -1,7 +1,7 @@
 export default function Spotify() {
     return (
         <>
-        <div className="p-5 rounded-lg max-w-2xl">
+        <div className="rounded-lg w-full">
             <img alt="Spotify Recently Played" src="https://spotify-recently-played-readme.vercel.app/api?user=yude1119&amp;width=400" width="563" height="495" />
         </div>
         </>