Remove logo from navbar, hide navbar on mobile

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

src/components/thumb-navigation-link.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { NavLink, useLocation } from 'react-router-dom';
 
 import IconWithCounter from 'soapbox/components/icon-with-counter';
-import { Icon, Text } from 'soapbox/components/ui';
+import { Icon } from 'soapbox/components/ui';
 import { useSettings } from 'soapbox/hooks';
 
 interface IThumbNavigationLink {
@@ -34,7 +34,7 @@ const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, countMax,
   const icon = (active && activeSrc) || src;
 
   return (
-    <NavLink to={to} exact={exact} className='flex flex-1 flex-col items-center space-y-1 px-2 py-2.5 text-lg text-gray-600'>
+    <NavLink to={to} exact={exact} className='flex flex-1 flex-col items-center space-y-1 px-2 py-4 text-lg text-gray-600'>
       {!demetricator && count !== undefined ? (
         <IconWithCounter
           src={icon}
@@ -56,18 +56,6 @@ const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, countMax,
           })}
         />
       )}
-
-      <Text
-        tag='span'
-        size='xs'
-        weight='medium'
-        className={clsx({
-          'text-gray-600': !active,
-          'text-primary-500': active,
-        })}
-      >
-        {text}
-      </Text>
     </NavLink>
   );
 };

src/components/thumb-navigation.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
+import { openSidebar } from 'soapbox/actions/sidebar';
 import ThumbNavigationLink from 'soapbox/components/thumb-navigation-link';
 import { useStatContext } from 'soapbox/contexts/stat-context';
-import { useAppSelector, useFeatures, useOwnAccount } from 'soapbox/hooks';
+import { useAppDispatch, useAppSelector, useFeatures, useOwnAccount } from 'soapbox/hooks';
+
+import { Icon } from './ui';
 
 const ThumbNavigation: React.FC = (): JSX.Element => {
+  const dispatch = useAppDispatch();
   const { account } = useOwnAccount();
   const features = useFeatures();
 
@@ -14,6 +18,8 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
   const notificationCount = useAppSelector((state) => state.notifications.unread);
   const dashboardCount = useAppSelector((state) => state.admin.openReports.count() + state.admin.awaitingApproval.count());
 
+  const onOpenSidebar = () => dispatch(openSidebar());
+
   /** Conditionally render the supported messages link */
   const renderMessagesLink = (): React.ReactNode => {
     if (features.chats) {
@@ -46,6 +52,13 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
 
   return (
     <div className='fixed inset-x-0 bottom-0 z-50 flex w-full overflow-x-auto border-t border-solid border-gray-200 bg-white/90 shadow-2xl backdrop-blur-md black:bg-black/80 lg:hidden dark:border-gray-800 dark:bg-primary-900/90'>
+      <button className='flex flex-1 flex-col items-center px-2 py-4 text-lg text-gray-600' onClick={onOpenSidebar}>
+        <Icon
+          src={require('@tabler/icons/outline/menu-2.svg')}
+          className='h-5 w-5 text-gray-600 black:text-white'
+        />
+      </button>
+
       <ThumbNavigationLink
         src={require('@tabler/icons/outline/home.svg')}
         activeSrc={require('@tabler/icons/filled/home.svg')}

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-12 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 lg:top-16': !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,