diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/account_card_and_menu.module.scss b/app/javascript/mastodon/features/navigation_panel/redesign/account_card_and_menu.module.scss
index 20cbc147a37..48bcc6be61c 100644
--- a/app/javascript/mastodon/features/navigation_panel/redesign/account_card_and_menu.module.scss
+++ b/app/javascript/mastodon/features/navigation_panel/redesign/account_card_and_menu.module.scss
@@ -22,3 +22,10 @@
white-space: normal;
}
}
+
+.profileMenuItem {
+ --list-item-padding: 0;
+ --list-item-gap: 8px;
+
+ color: inherit;
+}
diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/account_card_and_menu.tsx b/app/javascript/mastodon/features/navigation_panel/redesign/account_card_and_menu.tsx
index e4a202cea0d..d4d18f89d1b 100644
--- a/app/javascript/mastodon/features/navigation_panel/redesign/account_card_and_menu.tsx
+++ b/app/javascript/mastodon/features/navigation_panel/redesign/account_card_and_menu.tsx
@@ -8,6 +8,7 @@ import {
GearIcon,
CirclesFourIcon,
HeartIcon,
+ BookmarkSimpleIcon,
UsersThreeIcon,
ProhibitIcon,
GavelIcon,
@@ -17,7 +18,14 @@ import {
import { openModal } from '@/mastodon/actions/modal';
import { Account } from '@/mastodon/components/account';
+import { Avatar } from '@/mastodon/components/avatar';
import { IconButton } from '@/mastodon/components/button/redesign';
+import { DisplayName } from '@/mastodon/components/display_name';
+import { useAccountHandle } from '@/mastodon/components/display_name/default';
+import {
+ ListItemContent,
+ ListItemWrapper,
+} from '@/mastodon/components/list_item';
import {
Menu,
MenuItem,
@@ -37,6 +45,44 @@ import { useAppDispatch } from '@/mastodon/store';
import classes from './account_card_and_menu.module.scss';
export const NavigationAccountCardAndMenu: React.FC = () => {
+ const { accountId } = useIdentity();
+
+ if (!accountId) {
+ return null;
+ }
+
+ return (
+
+ );
+};
+
+export const AccountMenuItems: React.FC<{
+ context?: 'default' | 'mobile';
+}> = ({ context = 'default' }) => {
const dispatch = useAppDispatch();
const { accountId, permissions } = useIdentity();
const account = useAccount(accountId);
@@ -55,109 +101,121 @@ export const NavigationAccountCardAndMenu: React.FC = () => {
const accountBasePath = `/@${account?.acct}`;
return (
-
-
-
-
+
+
+
+ >
+ );
+};
+
+const ProfileMenuItem: React.FC = () => {
+ const { accountId } = useIdentity();
+ const account = useAccount(accountId);
+ const handle = useAccountHandle(account);
+
+ if (!accountId) {
+ return null;
+ }
+
+ const accountBasePath = `/@${account?.acct}`;
+
+ return (
+
+ }
+ className={classes.profileMenuItem}
+ >
+
+
+
+
+
);
};
diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/index.tsx b/app/javascript/mastodon/features/navigation_panel/redesign/index.tsx
index 0c542a1c56e..2e09992fae1 100644
--- a/app/javascript/mastodon/features/navigation_panel/redesign/index.tsx
+++ b/app/javascript/mastodon/features/navigation_panel/redesign/index.tsx
@@ -72,6 +72,10 @@ function useFollowedHashtags() {
export const RedesignNavigationPanel: React.FC<{
siteName?: string;
+ /**
+ * In 'slide-out' mode (used on smaller viewport sizes), some
+ * menu items are hidden and the design is tweaked slightly
+ */
mode?: 'static' | 'slide-out';
}> = ({ siteName, mode = 'static' }) => {
const intl = useIntl();
@@ -204,38 +208,45 @@ export const RedesignNavigationPanel: React.FC<{
)}
>
diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/mobile_nav.tsx b/app/javascript/mastodon/features/navigation_panel/redesign/mobile_nav.tsx
index 937ab0d4dbc..18cc0573bda 100644
--- a/app/javascript/mastodon/features/navigation_panel/redesign/mobile_nav.tsx
+++ b/app/javascript/mastodon/features/navigation_panel/redesign/mobile_nav.tsx
@@ -15,6 +15,7 @@ import { useDrag } from '@use-gesture/react';
import { closeNavigation, openNavigation } from '@/mastodon/actions/navigation';
import { Avatar } from '@/mastodon/components/avatar';
+import { Menu, MenuList, MenuTrigger } from '@/mastodon/components/menu';
import { FOCUS_TARGET } from '@/mastodon/components/navigation_focus_target';
import { ComposeRedesignButton } from '@/mastodon/features/compose/redesign/trigger';
import { useAccount } from '@/mastodon/hooks/useAccount';
@@ -23,8 +24,9 @@ import { selectUnreadNotificationGroupsCount } from '@/mastodon/selectors/notifi
import { useAppDispatch, useAppSelector } from '@/mastodon/store';
import { RedesignNavigationPanel } from '.';
+import { AccountMenuItems } from './account_card_and_menu';
import classes from './mobile_nav.module.scss';
-import { MobileNavLink } from './navigation_link';
+import { MobileNavLink, MobileNavProfileButton } from './navigation_link';
export const RedesignMobileNavigation: React.FC = () => {
const { accountId, signedIn } = useIdentity();
@@ -71,14 +73,26 @@ export const RedesignMobileNavigation: React.FC = () => {
defaultMessage='Notifications'
/>
-
- }
- >
-
-
+
diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/navigation_link.module.scss b/app/javascript/mastodon/features/navigation_panel/redesign/navigation_link.module.scss
index a51fcff118c..3873a53c480 100644
--- a/app/javascript/mastodon/features/navigation_panel/redesign/navigation_link.module.scss
+++ b/app/javascript/mastodon/features/navigation_panel/redesign/navigation_link.module.scss
@@ -76,6 +76,14 @@
justify-content: center;
gap: 0;
padding-block: var(--space-sm);
+ transition:
+ background-color 200ms,
+ color 200ms;
+
+ &[aria-expanded='true'] {
+ color: var(--color-text-inverted);
+ background-color: var(--color-bg-inverted);
+ }
}
.icon {
diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/navigation_link.tsx b/app/javascript/mastodon/features/navigation_panel/redesign/navigation_link.tsx
index 9b872dbb4a0..a937212fd00 100644
--- a/app/javascript/mastodon/features/navigation_panel/redesign/navigation_link.tsx
+++ b/app/javascript/mastodon/features/navigation_panel/redesign/navigation_link.tsx
@@ -48,6 +48,7 @@ export const NavigationLink: React.FC = ({
>
{IconComp && (
@@ -74,20 +75,11 @@ export const NavigationLink: React.FC = ({
type MobileNavLink = NavLinkProps & {
withDot?: boolean;
children: ReactNode;
-} & (
- | {
- iconComponent: Icon | React.FC>;
- customIcon?: never;
- }
- | {
- customIcon: ReactNode;
- iconComponent?: never;
- }
- );
+ iconComponent: Icon | React.FC>;
+};
export const MobileNavLink: React.FC = ({
iconComponent: IconComp,
- customIcon,
withDot,
children,
...otherProps
@@ -105,14 +97,31 @@ export const MobileNavLink: React.FC = ({
- {IconComp ? (
-
- ) : (
- customIcon
- )}
+
{children}
);
};
+
+export const MobileNavProfileButton: React.FC<
+ { avatar?: ReactNode } & Pick
+> = ({ children, avatar, withDot, ...otherProps }) => {
+ return (
+
+
+
+ );
+};
diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json
index c8863a28d54..e8854094096 100644
--- a/app/javascript/mastodon/locales/en.json
+++ b/app/javascript/mastodon/locales/en.json
@@ -1040,6 +1040,7 @@
"navigation_bar.powered_by_mastodon": "powered by {logo}Mastodon",
"navigation_bar.preferences": "Preferences",
"navigation_bar.privacy_and_reach": "Privacy and reach",
+ "navigation_bar.saved_posts": "Saved Posts",
"navigation_bar.search": "Search",
"navigation_bar.search_trends": "Search / Trending",
"navigation_bar.sign_out": "Sign out",
@@ -1445,6 +1446,7 @@
"subscribed_languages.save": "Save changes",
"subscribed_languages.target": "Change subscribed languages for {target}",
"tab_bar.messages": "Messages",
+ "tabs_bar.account_settings": "Account settings",
"tabs_bar.create_custom_feed": "Create",
"tabs_bar.custom_feeds": "Custom Feeds",
"tabs_bar.custom_feeds_empty": "You have no custom feeds yet.",
@@ -1455,9 +1457,7 @@
"tabs_bar.home": "Home",
"tabs_bar.menu": "Menu",
"tabs_bar.messages": "Messages",
- "tabs_bar.more": "More",
"tabs_bar.notifications": "Notifications",
- "tabs_bar.profile": "Profile",
"tabs_bar.publish": "New Post",
"tabs_bar.quick_links": "Quick links",
"tabs_bar.saved": "Saved",