yudejp/yude.jp
1
0
Fork 0
mirror of https://github.com/yudejp/yude.jp.git synced 2025-05-12 06:58:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adjust margin-top of horizontal menu

Browse Source
This commit is contained in:
Sumire Isshiki 2024-05-26 20:30:36 +09:00
parent a25c11474f
commit 38dde6b2a2
3 changed files with 33 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.tsx
View File

@ -64,10 +64,10 @@ export default function App() {
<div className="grid justify-items-center"> <div className="grid justify-items-center">
<div id="content" className="absolute dark:text-white sm:min-w-[565px]" style={{ top: `${contentY}px` }}> <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="grid grid-container md:grid-cols-5 gap-2 min-h-[70vh] w-3xl">
<div className="hidden md:block md:col-span-1"> <div className="sticky top-5 hidden md:block md:col-span-1">
<VerticalMenu /> <VerticalMenu />
</div> </div>
<div className="sticky top-5 md:hidden"> <div className="sticky top-12 md:hidden">
<HorizontalMenu /> <HorizontalMenu />
</div> </div>
<div className="px-5 md:col-span-4 md:px-0"> <div className="px-5 md:col-span-4 md:px-0">

2
src/components/HorizontalMenu.tsx
View File

@ -16,7 +16,7 @@ export default function HorizontalMenu() {
return ( return (
<RecoilRoot> <RecoilRoot>
<div className="relative text-lg font-medium text-center hover:cursor-pointer grid grid-cols-5 grid-flow-col backdrop-blur-2xl bg-zinc-100/30 dark:bg-neutral-900/30 rounded-lg"> <div className="relative text-lg font-medium text-center hover:cursor-pointer grid grid-cols-4 grid-flow-col backdrop-blur-2xl bg-zinc-100/30 dark:bg-neutral-900/30 rounded-lg">
<div <div
className={`self-start py-3 rounded-lg${page === Pages.Profile ? activeColor : ""}`} className={`self-start py-3 rounded-lg${page === Pages.Profile ? activeColor : ""}`}
onClick={() => { setPage(Pages.Profile) }} onClick={() => { setPage(Pages.Profile) }}

62
src/components/VerticalMenu.tsx
View File

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