yellowadmin/pp-tcms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changed sidebar's appearance and behavior

Browse Source
This commit is contained in:
Takeshi Kimata
2024-04-13 19:38:47 +09:00
parent 387385fec4
commit f78308343e
2 changed files with 20 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/app/projects/[projectId]/folders/FoldersPane.tsx
View File

@@ -97,7 +97,7 @@ export default function FoldersPane({ projectId }: Props) {
fetchDataEffect(); fetchDataEffect();
}, [folderId]); }, [folderId]);
const baseClass = "px-3 py-2 rounded-none"; const baseClass = "";
const selectedClass = `${baseClass} bg-neutral-200 dark:bg-neutral-700`; const selectedClass = `${baseClass} bg-neutral-200 dark:bg-neutral-700`;
return ( return (
@@ -112,7 +112,7 @@ export default function FoldersPane({ projectId }: Props) {
> >
New Folder New Folder
</Button> </Button>
<Listbox aria-label="Listbox Variants" variant="light" className="p-0"> <Listbox aria-label="Listbox Variants" variant="light">
{folders.map((folder, index) => ( {folders.map((folder, index) => (
<ListboxItem <ListboxItem
key={index} key={index}

22
frontend/app/projects/[projectId]/sidebar.tsx
View File

@@ -1,20 +1,20 @@
"use client"; "use client";
import { useState } from "react"; import { useState, useEffect } from "react";
import { Listbox, ListboxItem } from "@nextui-org/react"; import { Listbox, ListboxItem } from "@nextui-org/react";
import { Home, Files, FlaskConical } from "lucide-react"; import { Home, Files, FlaskConical } from "lucide-react";
import { useRouter } from "next/navigation"; import { useRouter, usePathname } from "next/navigation";
import useGetCurrentIds from "@/utils/useGetCurrentIds"; import useGetCurrentIds from "@/utils/useGetCurrentIds";
export default function Sidebar() { export default function Sidebar() {
const { projectId } = useGetCurrentIds(); const { projectId } = useGetCurrentIds();
const router = useRouter(); const router = useRouter();
const pathname = usePathname();
const [currentKey, setCurrentTab] = useState("home"); const [currentKey, setCurrentTab] = useState("home");
const baseClass = "p-3 rounded-none"; const baseClass = "p-3 rounded-none";
const selectedClass = `${baseClass} bg-neutral-200 dark:bg-neutral-700`; const selectedClass = `${baseClass} bg-neutral-200 dark:bg-neutral-700 border-l-3 border-neutral-800`;
const handleTabClick = (key: string) => { const handleTabClick = (key: string) => {
setCurrentTab(key);
if (key === "home") { if (key === "home") {
router.push(`/projects/${projectId}/home`); router.push(`/projects/${projectId}/home`);
} else if (key === "cases") { } else if (key === "cases") {
@@ -24,6 +24,20 @@ export default function Sidebar() {
} }
}; };
useEffect(() => {
const handleRouteChange = (currentPath: string) => {
if (currentPath.includes("home")) {
setCurrentTab("home");
} else if (currentPath.includes("folders")) {
setCurrentTab("cases");
} else if (currentPath.includes("runs")) {
setCurrentTab("runs");
}
};
handleRouteChange(pathname);
}, [pathname]);
const tabItems = [ const tabItems = [
{ {
key: "home", key: "home",