Remove navbar

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

src/components/account.tsx

@@ -95,6 +95,7 @@ interface IAccount {
   emojiUrl?: string;
   note?: string;
   items?: React.ReactNode;
+  disabled?: boolean;
 }
 
 const Account = ({
@@ -122,6 +123,7 @@ const Account = ({
   emojiUrl,
   note,
   items,
+  disabled,
 }: IAccount) => {
   const overflowRef = useRef<HTMLDivElement>(null);
   const actionRef = useRef<HTMLDivElement>(null);
@@ -187,6 +189,56 @@ const Account = ({
     onClick: (event: React.MouseEvent) => event.stopPropagation(),
   } : {};
 
+  if (disabled) return (
+    <div data-testid='account' className='group block w-full shrink-0' ref={overflowRef}>
+      <HStack alignItems={actionAlignment} space={3} justifyContent='between'>
+        <HStack alignItems='center' space={3} className='overflow-hidden'>
+          <div className='rounded-full'>
+            <Avatar src={account.avatar} size={avatarSize} />
+            {emoji && (
+              <Emoji
+                className='absolute -right-1.5 bottom-0 h-5 w-5'
+                emoji={emoji}
+                src={emojiUrl}
+              />
+            )}
+          </div>
+
+          <div className='grow overflow-hidden'>
+            <HStack space={1} alignItems='center' grow>
+              <Text
+                size='sm'
+                weight='semibold'
+                truncate
+                dangerouslySetInnerHTML={{ __html: account.display_name_html }}
+              />
+
+              {account.verified && <VerificationBadge />}
+
+              {account.bot && <Badge slug='bot' title={intl.formatMessage(messages.bot)} />}
+            </HStack>
+
+            <Stack space={withAccountNote || note ? 1 : 0}>
+              <HStack alignItems='center' space={1}>
+                <Text theme='muted' size='sm' direction='ltr' truncate>@{username}</Text>
+
+                {account.pleroma?.favicon && (
+                  <InstanceFavicon account={account} disabled={!withLinkToProfile} />
+                )}
+
+                {items}
+              </HStack>
+            </Stack>
+          </div>
+        </HStack>
+
+        <div ref={actionRef}>
+          {renderAction()}
+        </div>
+      </HStack>
+    </div>
+  );
+
   return (
     <div data-testid='account' className='group block w-full shrink-0' ref={overflowRef}>
       <HStack alignItems={actionAlignment} space={3} justifyContent='between'>

src/components/sidebar-menu.tsx

@@ -31,6 +31,8 @@ const messages = defineMessages({
   addAccount: { id: 'profile_dropdown.add_account', defaultMessage: 'Add an existing account' },
   followRequests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' },
   close: { id: 'lightbox.close', defaultMessage: 'Close' },
+  login: { id: 'account.login', defaultMessage: 'Log in' },
+  register: { id: 'account.register', defaultMessage: 'Sign up' },
 });
 
 interface ISidebarLink {
@@ -128,8 +130,6 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
     });
   }, [sidebarOpen]);
 
-  if (!account) return null;
-
   return (
     <div
       aria-expanded={sidebarOpen}
@@ -169,167 +169,185 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
 
           <div className='relative h-full w-full overflow-auto overflow-y-scroll'>
             <div className='p-4'>
-              <Stack space={4}>
-                <Link to={`/@${account.acct}`} onClick={onClose}>
-                  <Account account={account} showProfileHoverCard={false} withLinkToProfile={false} />
-                </Link>
-
-                <ProfileStats
-                  account={account}
-                  onClickHandler={handleClose}
-                />
-
+              {account ? (
                 <Stack space={4}>
-                  <Divider />
+                  <Link to={`/@${account.acct}`} onClick={onClose}>
+                    <Account account={account} showProfileHoverCard={false} withLinkToProfile={false} />
+                  </Link>
 
-                  <SidebarLink
-                    to={`/@${account.acct}`}
-                    icon={require('@tabler/icons/outline/user.svg')}
-                    text={intl.formatMessage(messages.profile)}
-                    onClick={onClose}
+                  <ProfileStats
+                    account={account}
+                    onClickHandler={handleClose}
                   />
 
-                  {(account.locked || followRequestsCount > 0) && (
-                    <SidebarLink
-                      to='/follow_requests'
-                      icon={require('@tabler/icons/outline/user-plus.svg')}
-                      text={intl.formatMessage(messages.followRequests)}
-                      onClick={onClose}
-                    />
-                  )}
-
-                  {features.bookmarks && (
-                    <SidebarLink
-                      to='/bookmarks'
-                      icon={require('@tabler/icons/outline/bookmark.svg')}
-                      text={intl.formatMessage(messages.bookmarks)}
-                      onClick={onClose}
-                    />
-                  )}
-
-                  {features.groups && (
-                    <SidebarLink
-                      to='/groups'
-                      icon={require('@tabler/icons/outline/circles.svg')}
-                      text={intl.formatMessage(messages.groups)}
-                      onClick={onClose}
-                    />
-                  )}
-
-                  {features.lists && (
-                    <SidebarLink
-                      to='/lists'
-                      icon={require('@tabler/icons/outline/list.svg')}
-                      text={intl.formatMessage(messages.lists)}
-                      onClick={onClose}
-                    />
-                  )}
-
-                  {features.events && (
-                    <SidebarLink
-                      to='/events'
-                      icon={require('@tabler/icons/outline/calendar-event.svg')}
-                      text={intl.formatMessage(messages.events)}
-                      onClick={onClose}
-                    />
-                  )}
-
-                  {draftCount > 0 && (
-                    <SidebarLink
-                      to='/draft_statuses'
-                      icon={require('@tabler/icons/outline/notes.svg')}
-                      text={intl.formatMessage(messages.drafts)}
-                      onClick={onClose}
-                    />
-                  )}
-
-                  {features.publicTimeline && <>
+                  <Stack space={4}>
                     <Divider />
 
                     <SidebarLink
-                      to='/timeline/local'
-                      icon={features.federating ? require('@tabler/icons/outline/affiliate.svg') : require('@tabler/icons/outline/world.svg')}
-                      text={features.federating ? <FormattedMessage id='tabs_bar.local' defaultMessage='Local' /> : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />}
+                      to={`/@${account.acct}`}
+                      icon={require('@tabler/icons/outline/user.svg')}
+                      text={intl.formatMessage(messages.profile)}
                       onClick={onClose}
                     />
 
-                    {features.federating && (
+                    {(account.locked || followRequestsCount > 0) && (
                       <SidebarLink
-                        to='/timeline/fediverse'
-                        icon={require('@tabler/icons/outline/topology-star-ring-3.svg')}
-                        text={<FormattedMessage id='tabs_bar.fediverse' defaultMessage='Fediverse' />}
+                        to='/follow_requests'
+                        icon={require('@tabler/icons/outline/user-plus.svg')}
+                        text={intl.formatMessage(messages.followRequests)}
                         onClick={onClose}
                       />
                     )}
-                  </>}
 
-                  <Divider />
+                    {features.bookmarks && (
+                      <SidebarLink
+                        to='/bookmarks'
+                        icon={require('@tabler/icons/outline/bookmark.svg')}
+                        text={intl.formatMessage(messages.bookmarks)}
+                        onClick={onClose}
+                      />
+                    )}
 
+                    {features.groups && (
+                      <SidebarLink
+                        to='/groups'
+                        icon={require('@tabler/icons/outline/circles.svg')}
+                        text={intl.formatMessage(messages.groups)}
+                        onClick={onClose}
+                      />
+                    )}
+
+                    {features.lists && (
+                      <SidebarLink
+                        to='/lists'
+                        icon={require('@tabler/icons/outline/list.svg')}
+                        text={intl.formatMessage(messages.lists)}
+                        onClick={onClose}
+                      />
+                    )}
+
+                    {features.events && (
+                      <SidebarLink
+                        to='/events'
+                        icon={require('@tabler/icons/outline/calendar-event.svg')}
+                        text={intl.formatMessage(messages.events)}
+                        onClick={onClose}
+                      />
+                    )}
+
+                    {draftCount > 0 && (
+                      <SidebarLink
+                        to='/draft_statuses'
+                        icon={require('@tabler/icons/outline/notes.svg')}
+                        text={intl.formatMessage(messages.drafts)}
+                        onClick={onClose}
+                      />
+                    )}
+
+                    {features.publicTimeline && <>
+                      <Divider />
+
+                      <SidebarLink
+                        to='/timeline/local'
+                        icon={features.federating ? require('@tabler/icons/outline/affiliate.svg') : require('@tabler/icons/outline/world.svg')}
+                        text={features.federating ? <FormattedMessage id='tabs_bar.local' defaultMessage='Local' /> : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />}
+                        onClick={onClose}
+                      />
+
+                      {features.federating && (
+                        <SidebarLink
+                          to='/timeline/fediverse'
+                          icon={require('@tabler/icons/outline/topology-star-ring-3.svg')}
+                          text={<FormattedMessage id='tabs_bar.fediverse' defaultMessage='Fediverse' />}
+                          onClick={onClose}
+                        />
+                      )}
+                    </>}
+
+                    <Divider />
+
+                    <SidebarLink
+                      to='/settings/preferences'
+                      icon={require('@tabler/icons/outline/settings.svg')}
+                      text={intl.formatMessage(messages.preferences)}
+                      onClick={onClose}
+                    />
+
+                    {features.followedHashtagsList && (
+                      <SidebarLink
+                        to='/followed_tags'
+                        icon={require('@tabler/icons/outline/hash.svg')}
+                        text={intl.formatMessage(messages.followedTags)}
+                        onClick={onClose}
+                      />
+                    )}
+
+                    {settings.get('isDeveloper') && (
+                      <SidebarLink
+                        to='/developers'
+                        icon={require('@tabler/icons/outline/code.svg')}
+                        text={intl.formatMessage(messages.developers)}
+                        onClick={onClose}
+                      />
+                    )}
+
+                    <Divider />
+
+                    <SidebarLink
+                      to='/logout'
+                      icon={require('@tabler/icons/outline/logout.svg')}
+                      text={intl.formatMessage(messages.logout)}
+                      onClick={onClickLogOut}
+                    />
+
+                    <Divider />
+
+                    <Stack space={4}>
+                      <button type='button' onClick={handleSwitcherClick} className='py-1'>
+                        <HStack alignItems='center' justifyContent='between'>
+                          <Text tag='span'>
+                            <FormattedMessage id='profile_dropdown.switch_account' defaultMessage='Switch accounts' />
+                          </Text>
+
+                          <Icon
+                            src={require('@tabler/icons/outline/chevron-down.svg')}
+                            className={clsx('h-4 w-4 text-gray-900 transition-transform dark:text-gray-100', {
+                              'rotate-180': switcher,
+                            })}
+                          />
+                        </HStack>
+                      </button>
+
+                      {switcher && (
+                        <div className='border-t-2 border-solid border-gray-100 black:border-t dark:border-gray-800'>
+                          {otherAccounts.map(account => renderAccount(account))}
+
+                          <NavLink className='flex items-center space-x-1 py-2' to='/login/add' onClick={handleClose}>
+                            <Icon className='h-4 w-4 text-primary-500' src={require('@tabler/icons/outline/plus.svg')} />
+                            <Text size='sm' weight='medium'>{intl.formatMessage(messages.addAccount)}</Text>
+                          </NavLink>
+                        </div>
+                      )}
+                    </Stack>
+                  </Stack>
+                </Stack>
+              ) : (
+                <Stack space={4}>
                   <SidebarLink
-                    to='/settings/preferences'
-                    icon={require('@tabler/icons/outline/settings.svg')}
-                    text={intl.formatMessage(messages.preferences)}
+                    to='/login'
+                    icon={require('@tabler/icons/outline/login.svg')}
+                    text={intl.formatMessage(messages.login)}
                     onClick={onClose}
                   />
 
-                  {features.followedHashtagsList && (
-                    <SidebarLink
-                      to='/followed_tags'
-                      icon={require('@tabler/icons/outline/hash.svg')}
-                      text={intl.formatMessage(messages.followedTags)}
-                      onClick={onClose}
-                    />
-                  )}
-
-                  {settings.get('isDeveloper') && (
-                    <SidebarLink
-                      to='/developers'
-                      icon={require('@tabler/icons/outline/code.svg')}
-                      text={intl.formatMessage(messages.developers)}
-                      onClick={onClose}
-                    />
-                  )}
-
-                  <Divider />
-
                   <SidebarLink
-                    to='/logout'
-                    icon={require('@tabler/icons/outline/logout.svg')}
-                    text={intl.formatMessage(messages.logout)}
-                    onClick={onClickLogOut}
+                    to='/signup'
+                    icon={require('@tabler/icons/outline/user-plus.svg')}
+                    text={intl.formatMessage(messages.register)}
+                    onClick={onClose}
                   />
-
-                  <Divider />
-
-                  <Stack space={4}>
-                    <button type='button' onClick={handleSwitcherClick} className='py-1'>
-                      <HStack alignItems='center' justifyContent='between'>
-                        <Text tag='span'>
-                          <FormattedMessage id='profile_dropdown.switch_account' defaultMessage='Switch accounts' />
-                        </Text>
-
-                        <Icon
-                          src={require('@tabler/icons/outline/chevron-down.svg')}
-                          className={clsx('h-4 w-4 text-gray-900 transition-transform dark:text-gray-100', {
-                            'rotate-180': switcher,
-                          })}
-                        />
-                      </HStack>
-                    </button>
-
-                    {switcher && (
-                      <div className='border-t-2 border-solid border-gray-100 black:border-t dark:border-gray-800'>
-                        {otherAccounts.map(account => renderAccount(account))}
-
-                        <NavLink className='flex items-center space-x-1 py-2' to='/login/add' onClick={handleClose}>
-                          <Icon className='h-4 w-4 text-primary-500' src={require('@tabler/icons/outline/plus.svg')} />
-                          <Text size='sm' weight='medium'>{intl.formatMessage(messages.addAccount)}</Text>
-                        </NavLink>
-                      </div>
-                    )}
-                  </Stack>
                 </Stack>
-              </Stack>
+              )}
             </div>
           </div>
         </div>

src/components/sidebar-navigation.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { Stack } from 'soapbox/components/ui';
+import { Icon, Stack } from 'soapbox/components/ui';
 import { useStatContext } from 'soapbox/contexts/stat-context';
+import Search from 'soapbox/features/compose/components/search';
 import ComposeButton from 'soapbox/features/ui/components/compose-button';
+import ProfileDropdown from 'soapbox/features/ui/components/profile-dropdown';
 import { useAppSelector, useFeatures, useOwnAccount, useSettings, useInstance } from 'soapbox/hooks';
 
+import Account from './account';
 import DropdownMenu, { Menu } from './dropdown-menu';
 import SidebarNavigationLink from './sidebar-navigation-link';
 
@@ -142,6 +145,24 @@ const SidebarNavigation = () => {
 
   return (
     <Stack space={4}>
+
+      {account && (
+        <Stack space={4}>
+          <div className='relative flex items-center'>
+            <ProfileDropdown account={account}>
+              <Account
+                account={account}
+                action={<Icon src={require('@tabler/icons/outline/chevron-down.svg')} className='text-gray-600 hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-500' />}
+                disabled
+              />
+            </ProfileDropdown>
+          </div>
+          <div className='block w-full max-w-xs'>
+            <Search openInRoute autosuggest />
+          </div>
+        </Stack>
+      )}
+
       <Stack space={1.5}>
         <SidebarNavigationLink
           to='/'
@@ -231,6 +252,22 @@ const SidebarNavigation = () => {
             />
           </DropdownMenu>
         )}
+
+        {!account && (
+          <Stack className='xl:hidden' space={1.5}>
+            <SidebarNavigationLink
+              to='/login'
+              icon={require('@tabler/icons/outline/login.svg')}
+              text={<FormattedMessage id='account.login' defaultMessage='Log in' />}
+            />
+
+            <SidebarNavigationLink
+              to='/signup'
+              icon={require('@tabler/icons/outline/user-plus.svg')}
+              text={<FormattedMessage id='account.register' defaultMessage='Sign up' />}
+            />
+          </Stack>
+        )}
       </Stack>
 
       {account && (

src/components/ui/column/column.tsx

@@ -102,7 +102,7 @@ const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedR
             backHref={backHref}
             className={clsx({
               'rounded-t-3xl': !isScrolled && !transparent,
-              'sticky top-0 z-10 bg-white/90 dark:bg-primary-900/90 black:bg-black/80 backdrop-blur lg:top-16': !transparent,
+              'sticky top-0 z-10 bg-white/90 dark:bg-primary-900/90 black:bg-black/80 backdrop-blur': !transparent,
               'p-4 sm:p-0 sm:pb-4 black:p-4': transparent,
               '-mt-4 -mx-4 p-4': size !== 'lg' && !transparent,
               '-mt-4 -mx-4 p-4 sm:-mt-6 sm:-mx-6 sm:p-6': size === 'lg' && !transparent,

src/components/ui/layout/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 offsetTop={80} className='pb-4'>
+    <StickyBox offsetTop={16} className='pb-4'>
       {children}
     </StickyBox>
   </div>
@@ -51,7 +51,7 @@ const Main: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ children, classN
 /** Right sidebar container in the UI. */
 const Aside: React.FC<IAside> = ({ children }) => (
   <aside className='hidden xl:col-span-3 xl:block'>
-    <StickyBox offsetTop={80} className='space-y-6 pb-12'>
+    <StickyBox offsetTop={16} className='space-y-6 pb-12'>
       <Suspense>
         {children}
       </Suspense>