diff --git a/src/components/sidebar-navigation.tsx b/src/components/sidebar-navigation.tsx index 39750608c..9f8641b56 100644 --- a/src/components/sidebar-navigation.tsx +++ b/src/components/sidebar-navigation.tsx @@ -23,11 +23,13 @@ import worldIcon from '@tabler/icons/outline/world.svg'; import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; import { Link } from 'react-router-dom'; +import Account from 'soapbox/components/account.tsx'; import SiteLogo from 'soapbox/components/site-logo.tsx'; import Stack from 'soapbox/components/ui/stack.tsx'; import { useStatContext } from 'soapbox/contexts/stat-context.tsx'; import Search from 'soapbox/features/compose/components/search.tsx'; import ComposeButton from 'soapbox/features/ui/components/compose-button.tsx'; +import ProfileDropdown from 'soapbox/features/ui/components/profile-dropdown.tsx'; import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts'; import { useFeatures } from 'soapbox/hooks/useFeatures.ts'; import { useInstance } from 'soapbox/hooks/useInstance.ts'; @@ -142,107 +144,119 @@ const SidebarNavigation = () => { }; return ( - - - - - + + + + + + - + - - } - /> + + } + /> - } - /> + } + /> + + {account && ( + <> + } + /> + + {renderMessagesLink()} + + {features.groups && ( + } + /> + )} + + } + /> + + } + count={settingsNotifications.size} + /> + + {account.staff && ( + } + /> + )} + + )} + + {(features.publicTimeline) && ( + <> + {(account || !restrictUnauth.timelines.local) && ( + } + /> + )} + + {(features.federating && (account || !restrictUnauth.timelines.federated)) && ( + } + /> + )} + + )} + + {menu.length > 0 && ( + + } + /> + + )} + {account && ( - <> - } - /> - - {renderMessagesLink()} - - {features.groups && ( - } - /> - )} - - } - /> - - } - count={settingsNotifications.size} - /> - - {account.staff && ( - } - /> - )} - - )} - - {(features.publicTimeline) && ( - <> - {(account || !restrictUnauth.timelines.local) && ( - } - /> - )} - - {(features.federating && (account || !restrictUnauth.timelines.federated)) && ( - } - /> - )} - - )} - - {menu.length > 0 && ( - - } - /> - + )} {account && ( - +
+ +
+ +
+
+
)}
); diff --git a/src/components/ui/layout.tsx b/src/components/ui/layout.tsx index 16cda33c0..c49e90dde 100644 --- a/src/components/ui/layout.tsx +++ b/src/components/ui/layout.tsx @@ -31,7 +31,7 @@ const Layout: LayoutComponent = ({ children }) => ( /** Left sidebar container in the UI. */ const Sidebar: React.FC = ({ children }) => (
- + {children}
diff --git a/src/features/ui/components/profile-dropdown.tsx b/src/features/ui/components/profile-dropdown.tsx index 2ab924313..cde59fc24 100644 --- a/src/features/ui/components/profile-dropdown.tsx +++ b/src/features/ui/components/profile-dropdown.tsx @@ -1,4 +1,4 @@ -import { useFloating } from '@floating-ui/react'; +import { Placement, useFloating } from '@floating-ui/react'; import logoutIcon from '@tabler/icons/outline/logout.svg'; import plusIcon from '@tabler/icons/outline/plus.svg'; import clsx from 'clsx'; @@ -29,6 +29,7 @@ const messages = defineMessages({ interface IProfileDropdown { account: AccountEntity; children: React.ReactNode; + placement?: Placement; } type IMenuItem = { @@ -39,13 +40,13 @@ type IMenuItem = { action?: (event: React.MouseEvent) => void; } -const ProfileDropdown: React.FC = ({ account, children }) => { +const ProfileDropdown: React.FC = ({ account, children, placement = 'bottom-end' }) => { const dispatch = useAppDispatch(); const features = useFeatures(); const intl = useIntl(); const [visible, setVisible] = useState(false); - const { x, y, strategy, refs } = useFloating({ placement: 'bottom-end' }); + const { x, y, strategy, refs } = useFloating({ placement }); const getOtherAccounts = useCallback(makeGetOtherAccounts(), []); const otherAccounts = useAppSelector((state) => getOtherAccounts(state)); @@ -117,7 +118,7 @@ const ProfileDropdown: React.FC = ({ account, children }) => { return ( <>