c95aa6a0f7
* chore: headers + common containers * fix: filters code splitting * fix: home header * fix: header changes * chore: page alignments fixed * fix: uncommented filters * fix: used enums * fix: cards + filters * fix: enum changes * fix: reverted package changes * fix: reverted package changes * fix: Card + tags seperated + naming fixed * fix: card + tags seperated + naming fixed * fix: mobile headers fixed partially * fix: build errors + minor css * fix: checkbox spacing * fix: review changes * fix: lint errors * fix: minor review changes * fix: header-alignments * fix: tabs * fix: settings page * fix: subgroup page * fix: mobile headers * fix: settings mobile header made observable * fix: lint error + edge case handling
46 lines
1.7 KiB
TypeScript
46 lines
1.7 KiB
TypeScript
import { observer } from "mobx-react";
|
|
import { useParams, usePathname } from "next/navigation";
|
|
// constants
|
|
import { EUserWorkspaceRoles } from "@/constants/workspace";
|
|
// hooks
|
|
import { useUser } from "@/hooks/store";
|
|
import { useAppRouter } from "@/hooks/use-app-router";
|
|
// plane web constants
|
|
import { WORKSPACE_SETTINGS_LINKS } from "@/plane-web/constants/workspace";
|
|
// plane web helpers
|
|
import { shouldRenderSettingLink } from "@/plane-web/helpers/workspace.helper";
|
|
|
|
export const MobileWorkspaceSettingsTabs = observer(() => {
|
|
const router = useAppRouter();
|
|
const { workspaceSlug } = useParams();
|
|
const pathname = usePathname();
|
|
// mobx store
|
|
const {
|
|
membership: { currentWorkspaceRole },
|
|
} = useUser();
|
|
|
|
// derived values
|
|
const workspaceMemberInfo = currentWorkspaceRole || EUserWorkspaceRoles.GUEST;
|
|
|
|
return (
|
|
<div className="flex-shrink-0 md:hidden sticky inset-0 flex overflow-x-auto bg-custom-background-100 z-10">
|
|
{WORKSPACE_SETTINGS_LINKS.map(
|
|
(item, index) =>
|
|
shouldRenderSettingLink(item.key) &&
|
|
workspaceMemberInfo >= item.access && (
|
|
<div
|
|
className={`${
|
|
item.highlight(pathname, `/${workspaceSlug}`)
|
|
? "text-custom-primary-100 text-sm py-2 px-3 whitespace-nowrap flex flex-grow cursor-pointer justify-around border-b border-custom-primary-200"
|
|
: "text-custom-text-200 flex flex-grow cursor-pointer justify-around border-b border-custom-border-200 text-sm py-2 px-3 whitespace-nowrap"
|
|
}`}
|
|
key={index}
|
|
onClick={() => router.push(`/${workspaceSlug}${item.href}`)}
|
|
>
|
|
{item.label}
|
|
</div>
|
|
)
|
|
)}
|
|
</div>
|
|
);
|
|
});
|