binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[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
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
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"> <div className="space-y-3">
{/* Navigation Mode Radio Buttons */} {/* Navigation Mode Radio Buttons */}
<div className="space-y-2"> <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 <input
type="radio" type="radio"
name="navigation-mode" name="navigation-mode"
value="accordion" value="accordion"
checked={projectPreferences.navigationMode === "accordion"} checked={projectPreferences.navigationMode === "accordion"}
onChange={() => updateNavigationMode("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="flex-1">
<div className="text-sm text-custom-text-200">{t("accordion_navigation_control")}</div> <div className="text-sm text-custom-text-200">{t("accordion_navigation_control")}</div>
@ -276,14 +276,14 @@ export const CustomizeNavigationDialog: FC<TCustomizeNavigationDialogProps> = ob
</div> </div>
</label> </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 <input
type="radio" type="radio"
name="navigation-mode" name="navigation-mode"
value="horizontal" value="horizontal"
checked={projectPreferences.navigationMode === "horizontal"} checked={projectPreferences.navigationMode === "horizontal"}
onChange={() => updateNavigationMode("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="flex-1">
<div className="text-sm text-custom-text-200">{t("horizontal_navigation_bar")}</div> <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 { useState, useEffect } from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import Link from "next/link"; import { useParams, useRouter } from "next/navigation";
import { useParams } from "next/navigation";
// icons // icons
import { LogOut, Settings, Settings2 } from "lucide-react"; import { LogOut, Settings, Settings2 } from "lucide-react";
// plane imports // plane imports
@ -22,6 +21,8 @@ type Props = {
export const UserMenuRoot = observer(function UserMenuRoot(props: Props) { export const UserMenuRoot = observer(function UserMenuRoot(props: Props) {
const { size = "sm" } = props; const { size = "sm" } = props;
const { workspaceSlug } = useParams(); const { workspaceSlug } = useParams();
// router
const router = useRouter();
// store hooks // store hooks
const { toggleAnySidebarDropdown } = useAppTheme(); const { toggleAnySidebarDropdown } = useAppTheme();
const { data: currentUser } = useUser(); const { data: currentUser } = useUser();
@ -76,22 +77,18 @@ export const UserMenuRoot = observer(function UserMenuRoot(props: Props) {
> >
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<span className="px-2 text-custom-sidebar-text-200 truncate">{currentUser?.email}</span> <span className="px-2 text-custom-sidebar-text-200 truncate">{currentUser?.email}</span>
<Link href={`/${workspaceSlug}/settings/account`}> <CustomMenu.MenuItem onClick={() => router.push(`/${workspaceSlug}/settings/account`)}>
<CustomMenu.MenuItem> <div className="flex w-full items-center gap-2 rounded text-xs">
<div className="flex w-full items-center gap-2 rounded text-xs"> <Settings className="h-4 w-4 stroke-[1.5]" />
<Settings className="h-4 w-4 stroke-[1.5]" /> <span>{t("settings")}</span>
<span>{t("settings")}</span> </div>
</div> </CustomMenu.MenuItem>
</CustomMenu.MenuItem> <CustomMenu.MenuItem onClick={() => router.push(`/${workspaceSlug}/settings/account/preferences`)}>
</Link> <div className="flex w-full items-center gap-2 rounded text-xs">
<Link href={`/${workspaceSlug}/settings/account/preferences`}> <Settings2 className="h-4 w-4 stroke-[1.5]" />
<CustomMenu.MenuItem> <span>Preferences</span>
<div className="flex w-full items-center gap-2 rounded text-xs"> </div>
<Settings2 className="h-4 w-4 stroke-[1.5]" /> </CustomMenu.MenuItem>
<span>Preferences</span>
</div>
</CustomMenu.MenuItem>
</Link>
</div> </div>
<div className="my-1 border-t border-custom-border-200" /> <div className="my-1 border-t border-custom-border-200" />
<div className={`${isUserInstanceAdmin ? "pb-2" : ""}`}> <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="my-1 border-t border-custom-border-200" />
<div className="px-1"> <div className="px-1">
<Link href={GOD_MODE_URL}> <CustomMenu.MenuItem onClick={() => router.push(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">
<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")}
{t("enter_god_mode")} </div>
</div> </CustomMenu.MenuItem>
</CustomMenu.MenuItem>
</Link>
</div> </div>
</> </>
)} )}