Update style

src/App.tsx

@@ -2,6 +2,7 @@ import { RecoilRoot } from 'recoil'
 
 import Mutuals from "./components/Mutuals"
 import Card from "./components/Card"
+import Misc from "./components/Misc"
 import VerticalMenu from "./components/VerticalMenu"
 import HorizontalMenu from "./components/HorizontalMenu"
 import LanguageMenu from "./components/LanguageMenu"
@@ -41,7 +42,7 @@ export default function App() {
 
   useEffect(() => {
     handleScroll();
-    window.scrollTo(0, 60)
+    window.scrollTo(0, 10)
 
     window.addEventListener('scroll', handleScroll);
     return () => {
@@ -55,16 +56,17 @@ export default function App() {
         <>
           <Mutuals />
           <div>
-            <div className={`sticky h-screen`} style={{ opacity: cardOpacity, marginTop: `60px` }}>
+            <div className={`sticky h-screen`} style={{ opacity: cardOpacity, marginTop: `-200px` }}>
               <div id="card" className="fixed py-5 -mt-20" style={{ top: `${cardY}px` }}>
                 <Card />
+                <Misc />
               </div>
             </div>
 
             <div className="grid justify-items-center">
               <div id="content" className="absolute dark:text-white sm:min-w-[565px]" style={{ top: `${contentY}px` }}>
                 <div className="grid grid-container md:grid-cols-5 gap-2 min-h-[70vh] w-3xl">
-                  <div className="sticky top-5 hidden md:block md:col-span-1">
+                  <div className="hidden md:block md:col-span-1">
                     <VerticalMenu />
                   </div>
                   <div className="sticky top-14 md:hidden">

src/components/Footer.tsx

@@ -1,14 +1,9 @@
-import Weather from "./Weather"
-
 export default function Footer() {
     return (
         <div className="text-center text-gray-500 mb-5">
             <img alt="yude.jp banner" src="./banner_new.png" className="h-12 inline" />
             <img alt="happybusy" src="./busy_banner.webp" className="h-12 inline" />
             <img alt="Page view counter" src="https://moe-counter-cf.yude.workers.dev/yude.jp:home" className="h-20 mx-auto" />
-            <div>
-                <Weather />
-            </div>
             <p className="mt-5">
                 <a href="https://github.com/yudejp/yude.jp">
                     &copy; 2024 yude

src/components/HorizontalMenu.tsx

@@ -3,12 +3,9 @@ import { faUser, faStar, faComments } from '@fortawesome/free-regular-svg-icons'
 import { faPassport } from "@fortawesome/free-solid-svg-icons"
 import { Pages } from "./VerticalMenu"
 
-import { RecoilRoot, atom, useRecoilState } from 'recoil'
+import { RecoilRoot, useRecoilState } from 'recoil'
 
-export const currentPage = atom({
+import { currentPage } from "./VerticalMenu"
-    key: 'page',
-    default: Pages.Profile,
-})
 
 export default function HorizontalMenu() {
     const [page, setPage] = useRecoilState(currentPage);

src/components/Misc.tsx

@@ -0,0 +1,24 @@
+export default function Weather() {
+    return (
+        <div className="flex justify-center items-start w-screen">
+            <div>
+                <div className="inline-block">
+                    <iframe
+                        src="https://www.tenki-yoho.com/blogparts/img.php?all,acrweb"
+                        width={166}
+                        height={196}
+                    />
+                </div>
+                <div className="inline-block ml-3">
+                    <img width={94} src="buttons/009button.gif" />
+                    <img width={94} src="buttons/mac.gif" />
+                    <img width={94} src="buttons/right2repair.png" />
+                    <img width={94} src="buttons/vscbutton.gif" />
+                    <img width={94} src="buttons/parental.png" />
+                    <img width={94} src="buttons/www.gif" />
+
+                </div>
+            </div>
+        </div>
+    )
+}

src/components/VerticalMenu.tsx

@@ -27,36 +27,38 @@ export default function VerticalMenu() {
 
     return (
         <RecoilRoot>
-            <ul className="text-lg font-medium text-center hover:cursor-pointer">
+            <div className="sticky top-5">
-                <li
+                <ul className="text-lg font-medium text-center hover:cursor-pointer">
-                    className={`w-full px-4 py-2 rounded-lg${page === Pages.Profile ? activeColor : ""}`}
+                    <li
-                    onClick={() => { setPage(Pages.Profile) }}
+                        className={`w-full px-4 py-2 rounded-lg${page === Pages.Profile ? activeColor : ""}`}
-                >
+                        onClick={() => { setPage(Pages.Profile) }}
-                    <FontAwesomeIcon icon={faUser} className="w-10 h-10" />{" "}
+                    >
-                    <p>{t("profile")}</p>
+                        <FontAwesomeIcon icon={faUser} className="w-10 h-10" />{" "}
-                </li>
+                        <p>{t("profile")}</p>
-                <li
+                    </li>
-                    className={`w-full px-4 py-2 rounded-lg${page === Pages.Identifier ? activeColor : ""}`}
+                    <li
-                    onClick={() => { setPage(Pages.Identifier) }}
+                        className={`w-full px-4 py-2 rounded-lg${page === Pages.Identifier ? activeColor : ""}`}
-                >
+                        onClick={() => { setPage(Pages.Identifier) }}
-                    <FontAwesomeIcon icon={faPassport} className="w-10 h-10" />{" "}
+                    >
-                    <p>{t("identifier")}</p>
+                        <FontAwesomeIcon icon={faPassport} className="w-10 h-10" />{" "}
-                </li>
+                        <p>{t("identifier")}</p>
-                <li
+                    </li>
-                    className={`w-full px-4 py-2 rounded-lg${page === Pages.Services ? activeColor : ""}`}
+                    <li
-                    onClick={() => { setPage(Pages.Services) }}
+                        className={`w-full px-4 py-2 rounded-lg${page === Pages.Services ? activeColor : ""}`}
-                >
+                        onClick={() => { setPage(Pages.Services) }}
-                    <FontAwesomeIcon icon={faStar} className="w-10 h-10" />{" "}
+                    >
-                    <p>{t("services")}</p>
+                        <FontAwesomeIcon icon={faStar} className="w-10 h-10" />{" "}
-                </li>
+                        <p>{t("services")}</p>
-                <li
+                    </li>
-                    className={`w-full px-4 py-2 rounded-lg${page === Pages.Chat ? activeColor : ""}`}
+                    <li
-                    onClick={() => { setPage(Pages.Chat) }}
+                        className={`w-full px-4 py-2 rounded-lg${page === Pages.Chat ? activeColor : ""}`}
-                >
+                        onClick={() => { setPage(Pages.Chat) }}
-                    <FontAwesomeIcon icon={faComments} className="w-10 h-10" />{" "}
+                    >
-                    <p>{t("chat")}</p>
+                        <FontAwesomeIcon icon={faComments} className="w-10 h-10" />{" "}
-                </li>
+                        <p>{t("chat")}</p>
-            </ul>
+                    </li>
+                </ul>
+            </div>
         </RecoilRoot>
     )
 }

src/components/Weather.tsx

@@ -1,7 +0,0 @@
-export default function Weather() {
-    return (
-        <>
-            <div className="inline-block"><iframe src="https://www.tenki-yoho.com/blogparts/img.php?all,acrweb" width={200} height={200}><a href="https://www.tenki-yoho.com/">天気予報</a></iframe></div>
-        </>
-    )
-}