github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: pages tabs responsive fixes (#3635)

Browse Source
This commit is contained in:
sriram veeraghanta 2024-02-12 22:14:11 +05:30 committed by GitHub
parent d90aaba842
commit e93bbec4cd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 45 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
web/hooks/use-window-size.tsx Normal file
View File

@ -0,0 +1,19 @@
import { useEffect, useState } from "react";
const useSize = () => {
const [windowSize, setWindowSize] = useState([window.innerWidth, window.innerHeight]);
useEffect(() => {
const windowSizeHandler = () => {
setWindowSize([window.innerWidth, window.innerHeight]);
};
window.addEventListener("resize", windowSizeHandler);
return () => {
window.removeEventListener("resize", windowSizeHandler);
};
}, []);
return windowSize;
};
export default useSize;

46
web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
View File

@ -9,6 +9,7 @@ import { useTheme } from "next-themes";
import { useApplication, useEventTracker, useUser } from "hooks/store";
import useLocalStorage from "hooks/use-local-storage";
import useUserAuth from "hooks/use-user-auth";
import useSize from "hooks/use-window-size";
// layouts
import { AppLayout } from "layouts/app-layout";
// components
@ -66,6 +67,7 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {
useProjectPages();
// hooks
const {} = useUserAuth({ user: currentUser, isLoading: currentUserLoader });
const [windowWidth] = useSize();
// local storage
const { storedValue: pageTab, setValue: setPageTab } = useLocalStorage("pageTab", "Recent");
// fetching pages from API
@ -103,7 +105,7 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {
const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
const mobileTabList = (
const MobileTabList = () => (
<Tab.List as="div" className="flex items-center justify-between border-b border-custom-border-200 px-3 pt-3 mb-4">
<div className="flex flex-wrap items-center gap-4">
{PAGE_TABS_LIST.map((tab) => (
@ -166,25 +168,29 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {
}
}}
>
<div className="md:hidden">{mobileTabList}</div>
<Tab.List as="div" className="mb-6 items-center justify-between hidden md:flex">
<div className="flex flex-wrap items-center gap-4">
{PAGE_TABS_LIST.map((tab) => (
<Tab
key={tab.key}
className={({ selected }) =>
`rounded-full border px-5 py-1.5 text-sm outline-none ${
selected
? "border-custom-primary bg-custom-primary text-white"
: "border-custom-border-200 bg-custom-background-100 hover:bg-custom-background-90"
}`
}
>
{tab.title}
</Tab>
))}
</div>
</Tab.List>
{windowWidth < 768 ? (
<MobileTabList />
) : (
<Tab.List as="div" className="mb-6 items-center justify-between hidden md:flex">
<div className="flex flex-wrap items-center gap-4">
{PAGE_TABS_LIST.map((tab) => (
<Tab
key={tab.key}
className={({ selected }) =>
`rounded-full border px-5 py-1.5 text-sm outline-none ${
selected
? "border-custom-primary bg-custom-primary text-white"
: "border-custom-border-200 bg-custom-background-100 hover:bg-custom-background-90"
}`
}
>
{tab.title}
</Tab>
))}
</div>
</Tab.List>
)}
<Tab.Panels as={Fragment}>
<Tab.Panel as="div" className="h-full space-y-5 overflow-y-auto">
<RecentPagesList />