From 905eda068fc1e2c331e309f56fc9dcb63ca3963b Mon Sep 17 00:00:00 2001 From: kimatata <117462761+kimatata@users.noreply.github.com> Date: Sun, 10 Aug 2025 12:58:41 +0900 Subject: [PATCH] chore: sidebar design update on project page (#272) --- frontend/messages/en.json | 1 + frontend/messages/ja.json | 1 + frontend/messages/pt-BR.json | 1 + frontend/package-lock.json | 9 +- frontend/package.json | 2 +- .../[locale]/projects/[projectId]/Sidebar.tsx | 85 +++++++++++++------ .../[locale]/projects/[projectId]/layout.tsx | 1 + frontend/types/project.ts | 1 + 8 files changed, 69 insertions(+), 32 deletions(-) diff --git a/frontend/messages/en.json b/frontend/messages/en.json index aebb48e..709bbb5 100644 --- a/frontend/messages/en.json +++ b/frontend/messages/en.json @@ -154,6 +154,7 @@ }, "Project": { "project": "Project", + "toggle_sidebar": "Toggle Sidebar", "home": "Home", "test_cases": "Test Cases", "test_runs": "Test Runs", diff --git a/frontend/messages/ja.json b/frontend/messages/ja.json index 621bede..09f1788 100644 --- a/frontend/messages/ja.json +++ b/frontend/messages/ja.json @@ -155,6 +155,7 @@ }, "Project": { "project": "プロジェクト", + "toggle_sidebar": "サイドバーの切り替え", "home": "ホーム", "test_cases": "テストケース", "test_runs": "テストラン", diff --git a/frontend/messages/pt-BR.json b/frontend/messages/pt-BR.json index ff7afec..4d4d2cc 100644 --- a/frontend/messages/pt-BR.json +++ b/frontend/messages/pt-BR.json @@ -154,6 +154,7 @@ }, "Project": { "project": "Projeto", + "toggle_sidebar": "Alternar barra lateral", "home": "Início", "test_cases": "Casos de Teste", "test_runs": "Execuções de Teste", diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 1f64ca3..10af470 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -23,7 +23,7 @@ "dayjs": "^1.11.13", "framer-motion": "^11.18.2", "intl-messageformat": "^10.7.15", - "lucide-react": "^0.475.0", + "lucide-react": "^0.539.0", "next": "^14.2.24", "next-intl": "^3.26.5", "next-themes": "^0.4.4", @@ -10502,9 +10502,10 @@ "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==" }, "node_modules/lucide-react": { - "version": "0.475.0", - "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.475.0.tgz", - "integrity": "sha512-NJzvVu1HwFVeZ+Gwq2q00KygM1aBhy/ZrhY9FsAgJtpB+E4R7uxRk9M2iKvHa6/vNxZydIB59htha4c2vvwvVg==", + "version": "0.539.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.539.0.tgz", + "integrity": "sha512-VVISr+VF2krO91FeuCrm1rSOLACQUYVy7NQkzrOty52Y8TlTPcXcMdQFj9bYzBgXbWCiywlwSZ3Z8u6a+6bMlg==", + "license": "ISC", "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } diff --git a/frontend/package.json b/frontend/package.json index f87a34e..e957082 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -24,7 +24,7 @@ "dayjs": "^1.11.13", "framer-motion": "^11.18.2", "intl-messageformat": "^10.7.15", - "lucide-react": "^0.475.0", + "lucide-react": "^0.539.0", "next": "^14.2.24", "next-intl": "^3.26.5", "next-themes": "^0.4.4", diff --git a/frontend/src/app/[locale]/projects/[projectId]/Sidebar.tsx b/frontend/src/app/[locale]/projects/[projectId]/Sidebar.tsx index 82fedd5..dc3b317 100644 --- a/frontend/src/app/[locale]/projects/[projectId]/Sidebar.tsx +++ b/frontend/src/app/[locale]/projects/[projectId]/Sidebar.tsx @@ -1,7 +1,15 @@ 'use client'; import { useState, useEffect } from 'react'; -import { Listbox, ListboxItem } from '@heroui/react'; -import { Home, Files, FlaskConical, Users, Settings } from 'lucide-react'; +import { Button, Tooltip } from '@heroui/react'; +import { + PanelLeftClose, + PanelLeftOpen, + ChartColumnStacked, + ClipboardList, + FlaskConical, + UserRound, + Settings, +} from 'lucide-react'; import { usePathname, useRouter } from '@/src/i18n/routing'; import useGetCurrentIds from '@/utils/useGetCurrentIds'; import { ProjectMessages } from '@/types/project'; @@ -16,11 +24,15 @@ export default function Sidebar({ messages, locale }: Props) { const router = useRouter(); const pathname = usePathname(); - const [currentKey, setCurrentTab] = useState('home'); - const baseClass = 'p-3'; - const selectedClass = `${baseClass} bg-neutral-200 dark:bg-neutral-700`; + const [currentKey, setCurrentKey] = useState('home'); + const [isSideBarOpen, setIsSideBarOpen] = useState(true); - const handleTabClick = (key: string) => { + const TOGGLE_ICON_STROKE_WIDTH = 1; + const TOGGLE_ICON_SIZE = 18; + const ICON_STROKE_WIDTH = 1; + const ICON_SIZE = 26; + + const handleClick = (key: string) => { if (key === 'home') { router.push(`/projects/${projectId}/home`, { locale: locale }); } else if (key === 'cases') { @@ -37,15 +49,15 @@ export default function Sidebar({ messages, locale }: Props) { useEffect(() => { const handleRouteChange = (currentPath: string) => { if (currentPath.includes('home')) { - setCurrentTab('home'); + setCurrentKey('home'); } else if (currentPath.includes('folders')) { - setCurrentTab('cases'); + setCurrentKey('cases'); } else if (currentPath.includes('runs')) { - setCurrentTab('runs'); + setCurrentKey('runs'); } else if (currentPath.includes('members')) { - setCurrentTab('members'); + setCurrentKey('members'); } else if (currentPath.includes('settings')) { - setCurrentTab('settings'); + setCurrentKey('settings'); } }; @@ -56,44 +68,63 @@ export default function Sidebar({ messages, locale }: Props) { { key: 'home', text: messages.home, - startContent: , + startContent: , }, { key: 'cases', text: messages.testCases, - startContent: , + startContent: , }, { key: 'runs', text: messages.testRuns, - startContent: , + startContent: , }, { key: 'members', text: messages.members, - startContent: , + startContent: , }, { key: 'settings', text: messages.settings, - startContent: , + startContent: , }, ]; return ( -
- +
+
+ + + +
+ +
{tabItems.map((itr) => ( - handleTabClick(itr.key)} - className={currentKey === itr.key ? selectedClass : baseClass} - > - {itr.text} - +
+ +
))} - +
); } diff --git a/frontend/src/app/[locale]/projects/[projectId]/layout.tsx b/frontend/src/app/[locale]/projects/[projectId]/layout.tsx index 0fb1744..b5dd1b5 100644 --- a/frontend/src/app/[locale]/projects/[projectId]/layout.tsx +++ b/frontend/src/app/[locale]/projects/[projectId]/layout.tsx @@ -11,6 +11,7 @@ export default function SidebarLayout({ }) { const t = useTranslations('Project'); const messages: ProjectMessages = { + toggleSidebar: t('toggle_sidebar'), home: t('home'), testCases: t('test_cases'), testRuns: t('test_runs'), diff --git a/frontend/types/project.ts b/frontend/types/project.ts index da7045d..a880e24 100644 --- a/frontend/types/project.ts +++ b/frontend/types/project.ts @@ -40,6 +40,7 @@ export type ProjectsMessages = { }; export type ProjectMessages = { + toggleSidebar: string; home: string; testCases: string; testRuns: string;