Add profile control at the bottom

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,6 +144,7 @@ const SidebarNavigation = () => {
   };
 
   return (
+    <Stack justifyContent='between' className='min-h-screen py-6'>
       <Stack space={6}>
         <Link key='logo' to='/' data-preview-title-id='column.home' className='ml-4 flex shrink-0 items-center'>
           <SiteLogo alt='Logo' className='h-10 w-auto cursor-pointer' />
@@ -245,6 +248,17 @@ const SidebarNavigation = () => {
           <ComposeButton />
         )}
       </Stack>
+
+      {account && (
+        <div className='mt-12'>
+          <ProfileDropdown account={account} placement='top'>
+            <div className='w-full p-2'>
+              <Account account={account} showProfileHoverCard={false} withLinkToProfile={false} hideActions />
+            </div>
+          </ProfileDropdown>
+        </div>
+      )}
+    </Stack>
   );
 };
 

src/components/ui/layout.tsx

@@ -31,7 +31,7 @@ const Layout: LayoutComponent = ({ children }) => (
 /** Left sidebar container in the UI. */
 const Sidebar: React.FC<ISidebar> = ({ children }) => (
   <div className='hidden lg:col-span-3 lg:block'>
-    <StickyBox className='py-6'>
+    <StickyBox>
       {children}
     </StickyBox>
   </div>

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<IProfileDropdown> = ({ account, children }) => {
+const ProfileDropdown: React.FC<IProfileDropdown> = ({ 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<HTMLButtonElement>({ placement: 'bottom-end' });
+  const { x, y, strategy, refs } = useFloating<HTMLButtonElement>({ placement });
 
   const getOtherAccounts = useCallback(makeGetOtherAccounts(), []);
   const otherAccounts = useAppSelector((state) => getOtherAccounts(state));
@@ -117,7 +118,7 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
   return (
     <>
       <button
-        className='rounded-full focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:ring-gray-800 dark:ring-offset-0 dark:focus:ring-primary-500'
+        className='w-full rounded-full focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:ring-gray-800 dark:ring-offset-0 dark:focus:ring-primary-500'
         type='button'
         ref={refs.setReference}
         onClick={toggleVisible}