commit 86286972d2e7f981f724b16aae6dc92cacb4335f
parent 39eefbde4d451dc89ff2c216d4e8d9268c86d879
Author: Sunny <kajimalu10@gmail.com>
Date: Thu, 14 Aug 2025 22:50:05 +0900
update sidepane style
Diffstat:
3 files changed, 38 insertions(+), 45 deletions(-)
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -147,3 +147,10 @@ body {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
+
+/* ================================== */
+/* Side Pane Button Style */
+/* ================================== */
+.btn-sidepane {
+ @apply w-full flex items-center p-2 rounded-md text-slate-300 hover:bg-gray-700 hover:text-white transition-colors duration-200;
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -10,12 +10,6 @@ export interface TapEntry {
isOshi: boolean;
}
-const LoginIcon = () => (
- <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
- <path strokeLinecap="round" strokeLinejoin="round" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
- </svg>
-);
-
export default function Home() {
const { user, accessToken, isLoading, login } = useAuth();
@@ -132,7 +126,6 @@ export default function Home() {
onClick={() => login()}
className="btn btn-primary inline-flex items-center justify-center whitespace-nowrap"
>
- <LoginIcon />
<span>Googleでログイン</span>
</button>
</div>
diff --git a/src/components/SidePane.tsx b/src/components/SidePane.tsx
@@ -1,26 +1,23 @@
"use client";
-interface UserProfile {
- name: string;
- picture: string;
-}
+interface UserProfile { name: string; picture: string; }
+interface SidePaneProps { isOpen: boolean; onClose: () => void; user: UserProfile | null; logout: () => void; }
-interface SidePaneProps {
- isOpen: boolean;
- onClose: () => void; // ペインを閉じるための関数
- user: UserProfile | null;
- logout: () => void; // ログアウト処理を行う関数
-}
-
-// ログアウトアイコン
const LogoutIcon = () => (
- <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+ <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-11.5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
</svg>
);
+const MenuItemIcon = () => (
+ <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-3 text-gray-500" fill="none" viewBox="0 1 24 24" stroke="currentColor" strokeWidth={2}>
+ <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+ </svg>
+);
+
+
export default function SidePane({ isOpen, onClose, user, logout }: SidePaneProps) {
- const menuItems = ['About', '利用規約', 'プライバシーポリシー', 'お問い合わせ', '運営者情報'];
+ const menuItems = ['About', '利用規約', 'プライバシーポリシー', '運営者情報'];
const handleLogoutClick = () => {
if (window.confirm("本当にログアウトしますか？")) {
@@ -31,45 +28,41 @@ export default function SidePane({ isOpen, onClose, user, logout }: SidePaneProp
return (
<main>
- {/* オーバーレイ */}
- <div
- className={`fixed inset-0 bg-black/50 z-30 transition-opacity ${isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}
- onClick={onClose}
- ></div>
-
- {/* サイドペイン本体 */}
- <aside
- className={`fixed top-0 right-0 h-full w-72 bg-gray-800 text-white shadow-lg transform transition-transform z-40 ${isOpen ? 'translate-x-0' : 'translate-x-full'}`}
- >
- <nav className="p-6 flex flex-col h-full">
- {/* メニュー項目 */}
- <ul className="space-y-4">
- {menuItems.map(item => <li key={item}><a href="#" className="hover:text-blue-300">{item}</a></li>)}
+ <div className={`fixed inset-0 bg-black/50 z-30 transition-opacity ${isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'}`} onClick={onClose}></div>
+ <aside className={`fixed top-0 right-0 h-full w-72 bg-gray-800 text-white shadow-lg transform transition-transform z-40 ${isOpen ? 'translate-x-0' : 'translate-x-full'}`}>
+ <nav className="p-4 flex flex-col h-full">
+
+ <ul className="space-y-1">
+ {menuItems.map(item => (
+ <li key={item}>
+ <a href="#" className="btn-sidepane">
+ <MenuItemIcon />
+ <span>{item}</span>
+ </a>
+ </li>
+ ))}
</ul>
- {/* 言語選択 */}
<div className="mt-8">
- <p className="text-sm text-gray-400 mb-2">Language</p>
- <div className="flex space-x-3">
+ <p className="text-sm text-gray-400 mb-2 px-2">Language</p>
+ <div className="flex space-x-3 px-2">
<span>🇯🇵</span><span>🇺🇸</span><span>🇨🇳</span><span>🇰🇷</span>
</div>
</div>
-
- {/* 認証情報*/}
+
<div className="mt-auto">
- {/* userが存在する場合（ログイン中）のみ、このブロックを表示 */}
{user && (
<>
- <div className="flex items-center gap-4 mb-4">
+ <div className="flex items-center gap-4 mb-2 p-2">
<img src={user.picture} alt="user avatar" className="w-10 h-10 rounded-full" />
<span className="font-semibold">{user.name}</span>
</div>
- <button onClick={handleLogoutClick} className="btn btn-ghost w-full justify-start text-left !text-white">
- <LogoutIcon /> ログアウト
+ <button onClick={handleLogoutClick} className="btn-sidepane">
+ <LogoutIcon />
+ <span>ログアウト</span>
</button>
</>
)}
- {/* userが存在しない場合は何も表示しない */}
</div>
</nav>
</aside>
