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

Sticky tab

Browse Source
This commit is contained in:
Sumire Isshiki 2024-03-11 19:49:17 +09:00
parent 56d18f25b4
commit 65dd7bf23c
5 changed files with 43 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.tsx
View File

@ -77,7 +77,7 @@ export default function App() {
<div className="hidden md:block md:col-span-1"> <div className="hidden md:block md:col-span-1">
<VerticalMenu /> <VerticalMenu />
</div> </div>
<div className="block md:hidden"> <div className="sticky top-5 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/Chat.tsx
View File

@ -140,7 +140,7 @@ export default function Chat() {
</button> </button>
</div> </div>
<div className="overflow-auto max-h-96 mt-5 rounded-lg max-w-xl"> <div className="overflow-auto h-96 mt-5 rounded-lg max-w-xl">
{ {
messages && messages &&
messages.map((message, index) => { messages.map((message, index) => {

2
src/components/HorizontalMenu.tsx
View File

@ -16,7 +16,7 @@ export default function HorizontalMenu() {
return ( return (
<RecoilRoot> <RecoilRoot>
<div className="text-lg font-medium text-center hover:cursor-pointer grid grid-cols-5 grid-flow-col"> <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 <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)}}

2
src/components/Profile.tsx
View File

@ -9,7 +9,7 @@ export default function Profile() {
<ol className="relative border-s border-gray-700 left-2"> <ol className="relative border-s border-gray-700 left-2">
<li className="mb-2 ms-4"> <li className="mb-2 ms-4">
<div className="absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -start-1.5 border border-gray-900 bg-gray-700"></div> <div className="absolute w-3 h-3 rounded-full mt-1.5 -start-1.5 border border-gray-900 bg-gray-700"></div>
<time className="mb-1 text-sm font-normal leading-none dark:text-gray-400"> <time className="mb-1 text-sm font-normal leading-none dark:text-gray-400">
2020 年 4 月 &ndash; 現在 2020 年 4 月 &ndash; 現在
</time> </time>

76
src/components/VerticalMenu.tsx
View File

@ -25,43 +25,45 @@ export default function VerticalMenu() {
return ( return (
<RecoilRoot> <RecoilRoot>
<ul className="w-full 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} />{" "} >
<p>プロフィール</p> <FontAwesomeIcon icon={faUser} />{" "}
</li> <p>プロフィール</p>
<li </li>
className={`w-full px-4 py-2 rounded-lg${page === Pages.Links ? activeColor : ""}`} <li
onClick={() => {setPage(Pages.Links)}} className={`w-full px-4 py-2 rounded-lg${page === Pages.Links ? activeColor : ""}`}
> onClick={() => {setPage(Pages.Links)}}
<FontAwesomeIcon icon={faLink} />{" "} >
<p>リンク</p> <FontAwesomeIcon icon={faLink} />{" "}
</li> <p>リンク</p>
<li </li>
className={`w-full px-4 py-2 rounded-lg${page === Pages.Keys ? activeColor : ""}`} <li
onClick={() => {setPage(Pages.Keys)}} className={`w-full px-4 py-2 rounded-lg${page === Pages.Keys ? activeColor : ""}`}
> onClick={() => {setPage(Pages.Keys)}}
<FontAwesomeIcon icon={faKey} />{" "} >
<p>公開鍵</p> <FontAwesomeIcon icon={faKey} />{" "}
</li> <p>公開鍵</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} />{" "} >
<p>サービス</p> <FontAwesomeIcon icon={faStar} />{" "}
</li> <p>サービス</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} />{" "} >
<p>チャット</p> <FontAwesomeIcon icon={faComments} />{" "}
</li> <p>チャット</p>
</ul> </li>
</ul>
</div>
</RecoilRoot> </RecoilRoot>
) )
} }