thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

style: workspace sidebar dropdown improvement (#2783)

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2023-11-16 14:11:33 +05:30 committed by GitHub
parent 26b1e9d5f1
commit bed66235f2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
web/components/workspace/sidebar-dropdown.tsx
View File

@ -90,36 +90,40 @@ export const WorkspaceSidebarDropdown = observer(() => {
}; };
return ( return (
<div className="flex items-center gap-x-8 gap-y-2 px-4 pt-4"> <div className="flex items-center gap-x-3 gap-y-2 px-4 pt-4">
<Menu as="div" className="relative col-span-4 text-left flex-grow h-full truncate"> <Menu as="div" className="relative col-span-4 text-left flex-grow h-full truncate">
{({ open }) => ( {({ open }) => (
<> <>
<Menu.Button className="text-custom-sidebar-text-200 rounded-md hover:bg-custom-sidebar-background-80 text-sm font-medium focus:outline-none w-full h-full truncate"> <Menu.Button className="text-custom-sidebar-text-200 rounded-md hover:bg-custom-sidebar-background-80 text-sm font-medium focus:outline-none w-full h-full truncate">
<div <div
className={`flex items-center gap-x-2 rounded p-1 truncate ${sidebarCollapsed ? "justify-center" : ""}`} className={`flex items-center justify-between gap-x-2 rounded p-1 truncate ${
sidebarCollapsed ? "justify-center" : ""
}`}
> >
<div <div className="flex items-center gap-2">
className={`relative grid h-6 w-6 place-items-center uppercase flex-shrink-0 ${ <div
!activeWorkspace?.logo && "rounded bg-custom-primary-500 text-white" className={`relative grid h-6 w-6 place-items-center uppercase flex-shrink-0 ${
}`} !activeWorkspace?.logo && "rounded bg-custom-primary-500 text-white"
> }`}
{activeWorkspace?.logo && activeWorkspace.logo !== "" ? ( >
<img {activeWorkspace?.logo && activeWorkspace.logo !== "" ? (
src={activeWorkspace.logo} <img
className="absolute top-0 left-0 h-full w-full object-cover rounded" src={activeWorkspace.logo}
alt="Workspace Logo" className="absolute top-0 left-0 h-full w-full object-cover rounded"
/> alt="Workspace Logo"
) : ( />
activeWorkspace?.name?.charAt(0) ?? "..." ) : (
activeWorkspace?.name?.charAt(0) ?? "..."
)}
</div>
{!sidebarCollapsed && (
<h4 className="text-custom-text-100 font-medium text-base truncate">
{activeWorkspace?.name ? activeWorkspace.name : "Loading..."}
</h4>
)} )}
</div> </div>
{!sidebarCollapsed && (
<h4 className="text-custom-text-100 font-medium text-base truncate">
{activeWorkspace?.name ? activeWorkspace.name : "Loading..."}
</h4>
)}
{!sidebarCollapsed && ( {!sidebarCollapsed && (
<ChevronDown <ChevronDown
className={`h-4 w-4 mx-1 flex-shrink-0 ${ className={`h-4 w-4 mx-1 flex-shrink-0 ${