Mirrors/plane
1
0
Fork 0
mirror of https://github.com/makeplane/plane.git synced 2025-12-16 03:47:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

[WEB-5582] chore: top nav and user menu improvement (#8245)

Browse Source 
* chore: user menu code refactor

* chore: CustomizeNavigationDialog enhancements
This commit is contained in:
Anmol Singh Bhatia
2025-12-04 21:25:09 +05:30
committed by GitHub
parent c3906048ea
commit 392c8cf2e1
2 changed files with 24 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/web/core/components/navigation/customize-navigation-dialog.tsx
View File

@@ -259,14 +259,14 @@ export const CustomizeNavigationDialog: FC<TCustomizeNavigationDialogProps> = ob
<div className="space-y-3">
{/* Navigation Mode Radio Buttons */}
<div className="space-y-2">
<label className="flex items-center gap-2 px-2 py-1.5 rounded-md hover:bg-custom-background-90 cursor-pointer">
<label className="flex gap-2 px-2 py-1.5 rounded-md hover:bg-custom-background-90 cursor-pointer">
<input
type="radio"
name="navigation-mode"
value="accordion"
checked={projectPreferences.navigationMode === "accordion"}
onChange={() => updateNavigationMode("accordion")}
className="size-4 text-custom-primary-100 focus:ring-custom-primary-100"
className="size-4 text-custom-primary-100 focus:ring-custom-primary-100 mt-1"
/>
<div className="flex-1">
<div className="text-sm text-custom-text-200">{t("accordion_navigation_control")}</div>
@@ -276,14 +276,14 @@ export const CustomizeNavigationDialog: FC<TCustomizeNavigationDialogProps> = ob
</div>
</label>
<label className="flex items-center gap-2 px-2 py-1.5 rounded-md hover:bg-custom-background-90 cursor-pointer">
<label className="flex gap-2 px-2 py-1.5 rounded-md hover:bg-custom-background-90 cursor-pointer">
<input
type="radio"
name="navigation-mode"
value="horizontal"
checked={projectPreferences.navigationMode === "horizontal"}
onChange={() => updateNavigationMode("horizontal")}
className="size-4 text-custom-primary-100 focus:ring-custom-primary-100"
className="size-4 text-custom-primary-100 focus:ring-custom-primary-100 mt-1"
/>
<div className="flex-1">
<div className="text-sm text-custom-text-200">{t("horizontal_navigation_bar")}</div>

45
apps/web/core/components/workspace/sidebar/user-menu-root.tsx
View File

@@ -1,7 +1,6 @@
import { useState, useEffect } from "react";
import { observer } from "mobx-react";
import Link from "next/link";
import { useParams } from "next/navigation";
import { useParams, useRouter } from "next/navigation";
// icons
import { LogOut, Settings, Settings2 } from "lucide-react";
// plane imports
@@ -22,6 +21,8 @@ type Props = {
export const UserMenuRoot = observer(function UserMenuRoot(props: Props) {
const { size = "sm" } = props;
const { workspaceSlug } = useParams();
// router
const router = useRouter();
// store hooks
const { toggleAnySidebarDropdown } = useAppTheme();
const { data: currentUser } = useUser();
@@ -76,22 +77,18 @@ export const UserMenuRoot = observer(function UserMenuRoot(props: Props) {
>
<div className="flex flex-col gap-2">
<span className="px-2 text-custom-sidebar-text-200 truncate">{currentUser?.email}</span>
<Link href={`/${workspaceSlug}/settings/account`}>
<CustomMenu.MenuItem>
<div className="flex w-full items-center gap-2 rounded text-xs">
<Settings className="h-4 w-4 stroke-[1.5]" />
<span>{t("settings")}</span>
</div>
</CustomMenu.MenuItem>
</Link>
<Link href={`/${workspaceSlug}/settings/account/preferences`}>
<CustomMenu.MenuItem>
<div className="flex w-full items-center gap-2 rounded text-xs">
<Settings2 className="h-4 w-4 stroke-[1.5]" />
<span>Preferences</span>
</div>
</CustomMenu.MenuItem>
</Link>
<CustomMenu.MenuItem onClick={() => router.push(`/${workspaceSlug}/settings/account`)}>
<div className="flex w-full items-center gap-2 rounded text-xs">
<Settings className="h-4 w-4 stroke-[1.5]" />
<span>{t("settings")}</span>
</div>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={() => router.push(`/${workspaceSlug}/settings/account/preferences`)}>
<div className="flex w-full items-center gap-2 rounded text-xs">
<Settings2 className="h-4 w-4 stroke-[1.5]" />
<span>Preferences</span>
</div>
</CustomMenu.MenuItem>
</div>
<div className="my-1 border-t border-custom-border-200" />
<div className={`${isUserInstanceAdmin ? "pb-2" : ""}`}>
@@ -110,13 +107,11 @@ export const UserMenuRoot = observer(function UserMenuRoot(props: Props) {
<>
<div className="my-1 border-t border-custom-border-200" />
<div className="px-1">
<Link href={GOD_MODE_URL}>
<CustomMenu.MenuItem>
<div className="flex w-full items-center justify-center rounded bg-custom-primary-100/20 px-2 py-1 text-xs font-medium text-custom-primary-100 hover:bg-custom-primary-100/30 hover:text-custom-primary-200">
{t("enter_god_mode")}
</div>
</CustomMenu.MenuItem>
</Link>
<CustomMenu.MenuItem onClick={() => router.push(GOD_MODE_URL)}>
<div className="flex w-full items-center justify-center rounded bg-custom-primary-100/20 px-2 py-1 text-xs font-medium text-custom-primary-100 hover:bg-custom-primary-100/30 hover:text-custom-primary-200">
{t("enter_god_mode")}
</div>
</CustomMenu.MenuItem>
</div>
</>
)}