forked from github/plane
style: workspace sidebar (#417)
This commit is contained in:
Anmol Singh Bhatia
GitHub
parent
c7923f6d44
commit
4a7f80712b
@ -15,15 +15,25 @@ import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
|
||||
type AvatarProps = {
|
||||
user?: Partial<IUser> | Partial<IUserLite> | IUser | IUserLite | undefined | null;
|
||||
index?: number;
|
||||
height?: string;
|
||||
width?: string;
|
||||
fontSize?: string
|
||||
};
|
||||
|
||||
export const Avatar: React.FC<AvatarProps> = ({ user, index }) => (
|
||||
<div className={`relative h-5 w-5 rounded-full ${index && index !== 0 ? "-ml-3.5" : ""}`}>
|
||||
export const Avatar: React.FC<AvatarProps> = ({ user, index, height="20px", width="20px", fontSize="12px" }) => (
|
||||
<div className={`relative rounded-full ${index && index !== 0 ? "-ml-3.5" : ""}`} style={{
|
||||
height: height,
|
||||
width: width,
|
||||
}}>
|
||||
{user && user.avatar && user.avatar !== "" ? (
|
||||
<div
|
||||
className={`h-5 w-5 rounded-full border-2 ${
|
||||
className={`rounded-full border-2 ${
|
||||
index ? "border-white bg-white" : "border-transparent"
|
||||
}`}
|
||||
style={{
|
||||
height: height,
|
||||
width: width,
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src={user.avatar}
|
||||
@ -34,7 +44,11 @@ export const Avatar: React.FC<AvatarProps> = ({ user, index }) => (
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid h-5 w-5 place-items-center rounded-full border-2 border-white bg-gray-700 text-xs capitalize text-white">
|
||||
<div className="grid place-items-center rounded-full border-2 border-white bg-gray-700 text-xs capitalize text-white" style={{
|
||||
height: height,
|
||||
width: width,
|
||||
fontSize: fontSize,
|
||||
}}>
|
||||
{user?.first_name && user.first_name !== ""
|
||||
? user.first_name.charAt(0)
|
||||
: user?.email?.charAt(0)}
|
||||
|
||||
@ -12,7 +12,7 @@ import useWorkspaces from "hooks/use-workspaces";
|
||||
import userService from "services/user.service";
|
||||
import authenticationService from "services/authentication.service";
|
||||
// components
|
||||
import { Loader } from "components/ui";
|
||||
import { Avatar, Loader } from "components/ui";
|
||||
|
||||
// types
|
||||
import { IWorkspace } from "types";
|
||||
@ -72,44 +72,48 @@ export const WorkspaceSidebarDropdown = () => {
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<Menu as="div" className="col-span-4 inline-block w-full text-left">
|
||||
<Menu.Button
|
||||
className={`inline-flex w-full items-center justify-between rounded-md px-1 py-2 text-sm font-semibold text-gray-700 focus:outline-none ${
|
||||
!sidebarCollapse
|
||||
? "border border-gray-300 shadow-sm hover:bg-gray-50 focus:bg-gray-50"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<div className="mx-auto flex items-center gap-x-1">
|
||||
<div className="relative flex h-5 w-5 items-center justify-center rounded bg-gray-700 p-4 uppercase text-white">
|
||||
{activeWorkspace?.logo && activeWorkspace.logo !== "" ? (
|
||||
<Image
|
||||
src={activeWorkspace.logo}
|
||||
alt="Workspace Logo"
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
className="rounded"
|
||||
/>
|
||||
) : (
|
||||
activeWorkspace?.name?.charAt(0) ?? "..."
|
||||
<Menu as="div" className="col-span-4 inline-block w-full p-5 text-left">
|
||||
<div className="flex w-full items-center justify-between gap-2.5">
|
||||
<Menu.Button
|
||||
className={`inline-flex w-full items-center rounded-md px-1 py-2 text-sm font-semibold text-gray-700 focus:outline-none `}
|
||||
>
|
||||
<div className="flex w-full items-center gap-x-2 rounded-md bg-gray-100 px-2 py-1.5">
|
||||
<div className="relative flex h-6 w-6 items-center justify-center rounded bg-gray-700 p-2 uppercase text-white">
|
||||
{activeWorkspace?.logo && activeWorkspace.logo !== "" ? (
|
||||
<Image
|
||||
src={activeWorkspace.logo}
|
||||
alt="Workspace Logo"
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
className="rounded"
|
||||
/>
|
||||
) : (
|
||||
activeWorkspace?.name?.charAt(0) ?? "..."
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!sidebarCollapse && (
|
||||
<p className="text-base">
|
||||
{activeWorkspace?.name
|
||||
? activeWorkspace.name.length > 17
|
||||
? `${activeWorkspace.name.substring(0, 17)}...`
|
||||
: activeWorkspace.name
|
||||
: "Loading..."}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{!sidebarCollapse && (
|
||||
<p className="ml-1 text-left">
|
||||
{activeWorkspace?.name
|
||||
? activeWorkspace.name.length > 17
|
||||
? `${activeWorkspace.name.substring(0, 17)}...`
|
||||
: activeWorkspace.name
|
||||
: "Loading..."}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</Menu.Button>
|
||||
|
||||
{!sidebarCollapse && (
|
||||
<div className="flex flex-grow justify-end">
|
||||
<ChevronDownIcon className="ml-2 h-3 w-3" aria-hidden="true" />
|
||||
</div>
|
||||
<Link href={`/${workspaceSlug}/me/profile`}>
|
||||
<a>
|
||||
<div className="flex flex-grow justify-end">
|
||||
<Avatar user={user} height="32px" width="32px" fontSize="14px" />
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
)}
|
||||
</Menu.Button>
|
||||
</div>
|
||||
|
||||
<Transition
|
||||
as={Fragment}
|
||||
|
||||
@ -37,30 +37,28 @@ export const WorkspaceSidebarMenu: React.FC = () => {
|
||||
const { collapsed: sidebarCollapse } = useTheme();
|
||||
|
||||
return (
|
||||
<div className="px-2">
|
||||
<div className="mt-3 flex-1 space-y-1 bg-white">
|
||||
{workspaceLinks(workspaceSlug as string).map((link, index) => (
|
||||
<Link key={index} href={link.href}>
|
||||
<a
|
||||
<div className="flex w-full flex-col items-start justify-start gap-2 px-5 py-1">
|
||||
{workspaceLinks(workspaceSlug as string).map((link, index) => (
|
||||
<Link key={index} href={link.href}>
|
||||
<a
|
||||
className={`${
|
||||
link.href === router.asPath
|
||||
? "bg-indigo-50 text-gray-900"
|
||||
: "text-gray-500 hover:bg-indigo-50 hover:text-gray-900 focus:bg-indigo-50"
|
||||
} group flex w-full items-center gap-3 rounded-md p-2 text-base font-medium outline-none ${
|
||||
sidebarCollapse ? "justify-center" : ""
|
||||
}`}
|
||||
>
|
||||
<link.icon
|
||||
className={`${
|
||||
link.href === router.asPath
|
||||
? "bg-indigo-50 text-gray-900"
|
||||
: "text-gray-500 hover:bg-indigo-50 hover:text-gray-900 focus:bg-indigo-50"
|
||||
} group flex items-center gap-3 rounded-md p-2 text-xs font-medium outline-none ${
|
||||
sidebarCollapse ? "justify-center" : ""
|
||||
}`}
|
||||
>
|
||||
<link.icon
|
||||
className={`${
|
||||
link.href === router.asPath ? "text-gray-900" : "text-gray-600"
|
||||
} h-5 w-5 flex-shrink-0 group-hover:text-gray-900`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{!sidebarCollapse && link.name}
|
||||
</a>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
link.href === router.asPath ? "text-gray-900" : "text-gray-600"
|
||||
} h-5 w-5 flex-shrink-0 group-hover:text-gray-900`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{!sidebarCollapse && link.name}
|
||||
</a>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -25,10 +25,8 @@ const Sidebar: React.FC<SidebarProps> = ({ toggleSidebar, setToggleSidebar }) =>
|
||||
} flex h-full flex-col bg-white duration-300 md:relative`}
|
||||
>
|
||||
<div className="flex h-full flex-1 flex-col border-r">
|
||||
<div className="flex h-full flex-1 flex-col pt-2">
|
||||
<div className="px-2">
|
||||
<WorkspaceSidebarDropdown />
|
||||
</div>
|
||||
<div className="flex h-full flex-1 flex-col">
|
||||
<WorkspaceSidebarDropdown />
|
||||
<WorkspaceSidebarMenu />
|
||||
<ProjectSidebarList />
|
||||
<WorkspaceHelpSection setSidebarActive={setToggleSidebar} />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user