style: redesigned sidebar, added new icons and spacing changes
This commit is contained in:
Dakshesh Jain
parent
1b369feb6a
commit
73567dc7fc
15 changed files with 315 additions and 185 deletions
|
|
@ -5,14 +5,8 @@ import { Disclosure, Transition } from "@headlessui/react";
|
|||
import useSWR from "swr";
|
||||
|
||||
// icons
|
||||
import {
|
||||
ChevronDownIcon,
|
||||
PlusIcon,
|
||||
Cog6ToothIcon,
|
||||
RectangleStackIcon,
|
||||
RectangleGroupIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
import { CyclesIcon } from "components/icons";
|
||||
import { ContrastIcon, LayerDiagonalIcon, PeopleGroupIcon } from "components/icons";
|
||||
import { ChevronDownIcon, PlusIcon, Cog6ToothIcon } from "@heroicons/react/24/outline";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
import useTheme from "hooks/use-theme";
|
||||
|
|
@ -31,17 +25,17 @@ const navigation = (workspaceSlug: string, projectId: string) => [
|
|||
{
|
||||
name: "Issues",
|
||||
href: `/${workspaceSlug}/projects/${projectId}/issues`,
|
||||
icon: RectangleStackIcon,
|
||||
icon: LayerDiagonalIcon,
|
||||
},
|
||||
{
|
||||
name: "Cycles",
|
||||
href: `/${workspaceSlug}/projects/${projectId}/cycles`,
|
||||
icon: CyclesIcon,
|
||||
icon: ContrastIcon,
|
||||
},
|
||||
{
|
||||
name: "Modules",
|
||||
href: `/${workspaceSlug}/projects/${projectId}/modules`,
|
||||
icon: RectangleGroupIcon,
|
||||
icon: PeopleGroupIcon,
|
||||
},
|
||||
{
|
||||
name: "Settings",
|
||||
|
|
@ -81,11 +75,8 @@ export const ProjectSidebarList: FC = () => {
|
|||
return (
|
||||
<>
|
||||
<CreateProjectModal isOpen={isCreateProjectModal} setIsOpen={setCreateProjectModal} />
|
||||
<div
|
||||
className={`no-scrollbar mt-3 flex h-full flex-col space-y-2 overflow-y-auto bg-primary px-2 pt-5 pb-3 ${
|
||||
sidebarCollapse ? "rounded-xl" : "rounded-t-3xl"
|
||||
}`}
|
||||
>
|
||||
<div className="no-scrollbar mt-3 flex h-full flex-col space-y-2 overflow-y-auto bg-white border-t border-gray-200 px-6 pt-5 pb-3">
|
||||
{!sidebarCollapse && <h5 className="text-sm font-semibold text-gray-400">Projects</h5>}
|
||||
{projects ? (
|
||||
<>
|
||||
{projects.length > 0 ? (
|
||||
|
|
@ -93,12 +84,13 @@ export const ProjectSidebarList: FC = () => {
|
|||
<Disclosure key={project?.id} defaultOpen={projectId === project?.id}>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<div className="flex items-center">
|
||||
<Disclosure.Button
|
||||
className={`flex w-full items-center gap-2 rounded-md p-2 text-left text-sm font-medium ${
|
||||
sidebarCollapse ? "justify-center" : ""
|
||||
}`}
|
||||
>
|
||||
<Disclosure.Button
|
||||
as="div"
|
||||
className={`flex w-full items-center gap-2 select-none rounded-md py-2 text-left text-sm font-medium ${
|
||||
sidebarCollapse ? "justify-center" : "justify-between"
|
||||
}`}
|
||||
>
|
||||
<div className="flex gap-x-2 items-center">
|
||||
{project.icon ? (
|
||||
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
|
||||
{String.fromCodePoint(parseInt(project.icon))}
|
||||
|
|
@ -110,26 +102,30 @@ export const ProjectSidebarList: FC = () => {
|
|||
)}
|
||||
|
||||
{!sidebarCollapse && (
|
||||
<span className="flex w-full items-center justify-between">
|
||||
<span className="w-[125px] text-ellipsis overflow-hidden">
|
||||
{project?.name}
|
||||
</span>
|
||||
<span>
|
||||
<ChevronDownIcon
|
||||
className={`h-4 w-4 duration-300 ${open ? "rotate-180" : ""}`}
|
||||
/>
|
||||
</span>
|
||||
<p className="w-[125px] text-ellipsis text-[0.875rem] overflow-hidden">
|
||||
{project?.name}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-x-1 items-center">
|
||||
{!sidebarCollapse && (
|
||||
<CustomMenu ellipsis>
|
||||
<CustomMenu.MenuItem onClick={() => handleCopyText(project.id)}>
|
||||
Copy project link
|
||||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
)}
|
||||
{!sidebarCollapse && (
|
||||
<span>
|
||||
<ChevronDownIcon
|
||||
className={`h-4 w-4 duration-300 ${open ? "rotate-180" : ""}`}
|
||||
/>
|
||||
</span>
|
||||
)}
|
||||
</Disclosure.Button>
|
||||
{!sidebarCollapse && (
|
||||
<CustomMenu ellipsis>
|
||||
<CustomMenu.MenuItem onClick={() => handleCopyText(project.id)}>
|
||||
Copy project link
|
||||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Disclosure.Button>
|
||||
|
||||
<Transition
|
||||
enter="transition duration-100 ease-out"
|
||||
enterFrom="transform scale-95 opacity-0"
|
||||
|
|
@ -144,8 +140,6 @@ export const ProjectSidebarList: FC = () => {
|
|||
} flex flex-col gap-y-1`}
|
||||
>
|
||||
{navigation(workspaceSlug as string, project?.id).map((item) => {
|
||||
const hi = "hi";
|
||||
|
||||
if (item.name === "Cycles" && !project.cycle_view) return;
|
||||
if (item.name === "Modules" && !project.module_view) return;
|
||||
|
||||
|
|
@ -154,18 +148,20 @@ export const ProjectSidebarList: FC = () => {
|
|||
<a
|
||||
className={`group flex items-center rounded-md px-2 py-2 text-xs font-medium outline-none ${
|
||||
item.href === router.asPath
|
||||
? "bg-gray-200 text-gray-900"
|
||||
: "text-gray-500 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900"
|
||||
? "bg-indigo-50 text-gray-900"
|
||||
: "text-gray-500 hover:bg-indigo-50 hover:text-gray-900 focus:bg-indigo-50 focus:text-gray-900"
|
||||
} ${sidebarCollapse ? "justify-center" : ""}`}
|
||||
>
|
||||
<item.icon
|
||||
className={`h-4 w-4 flex-shrink-0 ${
|
||||
item.href === router.asPath
|
||||
? "text-gray-900"
|
||||
: "text-gray-500 group-hover:text-gray-900"
|
||||
} ${!sidebarCollapse ? "mr-3" : ""}`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<div className="grid place-items-center">
|
||||
<item.icon
|
||||
className={`w-5 h-5 flex-shrink-0 ${
|
||||
item.href === router.asPath
|
||||
? "text-gray-900"
|
||||
: "text-gray-500 group-hover:text-gray-900"
|
||||
} ${!sidebarCollapse ? "mr-3" : ""}`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
{!sidebarCollapse && item.name}
|
||||
</a>
|
||||
</Link>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue