chore: sidebar design update on project page (#272)

2025-08-10 12:58:41 +09:00
parent 763a3ab832
commit 905eda068f
8 changed files with 69 additions and 32 deletions
--- 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",
--- a/frontend/messages/ja.json
+++ b/frontend/messages/ja.json
@@ -155,6 +155,7 @@
  },
  "Project": {
    "project": "プロジェクト",
+    "toggle_sidebar": "サイドバーの切り替え",
    "home": "ホーム",
    "test_cases": "テストケース",
    "test_runs": "テストラン",
--- 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",
--- 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"
      }
--- 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",
--- 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: <Home strokeWidth={1} size={20} />,
+      startContent: <ChartColumnStacked strokeWidth={ICON_STROKE_WIDTH} size={ICON_SIZE} />,
    },
    {
      key: 'cases',
      text: messages.testCases,
-      startContent: <Files strokeWidth={1} size={20} />,
+      startContent: <ClipboardList strokeWidth={ICON_STROKE_WIDTH} size={ICON_SIZE} />,
    },
    {
      key: 'runs',
      text: messages.testRuns,
-      startContent: <FlaskConical strokeWidth={1} size={20} />,
+      startContent: <FlaskConical strokeWidth={ICON_STROKE_WIDTH} size={ICON_SIZE} />,
    },
    {
      key: 'members',
      text: messages.members,
-      startContent: <Users strokeWidth={1} size={20} />,
+      startContent: <UserRound strokeWidth={ICON_STROKE_WIDTH} size={ICON_SIZE} />,
    },
    {
      key: 'settings',
      text: messages.settings,
-      startContent: <Settings strokeWidth={1} size={20} />,
+      startContent: <Settings strokeWidth={ICON_STROKE_WIDTH} size={ICON_SIZE} />,
    },
  ];

  return (
-    <div className="w-48 border-r-1 dark:border-neutral-700">
-      <Listbox aria-label="Listbox Variants" variant="light">
+    <div className="border-r-1 dark:border-neutral-700">
+      <div className="w-full flex justify-end">
+        <Tooltip content={messages.toggleSidebar} placement="right">
+          <Button size="lg" isIconOnly variant="light" onPress={() => setIsSideBarOpen(!isSideBarOpen)}>
+            {isSideBarOpen ? (
+              <PanelLeftClose strokeWidth={TOGGLE_ICON_STROKE_WIDTH} size={TOGGLE_ICON_SIZE} />
+            ) : (
+              <PanelLeftOpen strokeWidth={TOGGLE_ICON_STROKE_WIDTH} size={TOGGLE_ICON_SIZE} />
+            )}
+          </Button>
+        </Tooltip>
+      </div>
+
+      <div className="border-t-1 dark:border-neutral-700">
        {tabItems.map((itr) => (
-          <ListboxItem
-            key={itr.key}
+          <div key={itr.key}>
+            <Tooltip hidden={isSideBarOpen} content={itr.text} placement="right">
+              <Button
+                size="lg"
+                isIconOnly={!isSideBarOpen}
                startContent={itr.startContent}
-            onPress={() => handleTabClick(itr.key)}
-            className={currentKey === itr.key ? selectedClass : baseClass}
+                isDisabled={itr.key === currentKey}
+                variant="light"
+                className={isSideBarOpen ? 'w-full justify-start' : ''}
+                onPress={() => handleClick(itr.key)}
              >
-            {itr.text}
-          </ListboxItem>
+                {isSideBarOpen ? itr.text : ''}
+              </Button>
+            </Tooltip>
+          </div>
        ))}
-      </Listbox>
+      </div>
    </div>
  );
 }
--- 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'),
--- 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;