Add logo and search to left sidebar

src/components/sidebar-navigation.tsx

@@ -21,9 +21,12 @@ import userPlusIcon from '@tabler/icons/outline/user-plus.svg';
 import userIcon from '@tabler/icons/outline/user.svg';
 import worldIcon from '@tabler/icons/outline/world.svg';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { Link } from 'react-router-dom';
 
+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 { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
@@ -139,7 +142,14 @@ const SidebarNavigation = () => {
   };
 
   return (
-    <Stack space={4}>
+    <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' />
+        <span className='hidden'><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></span>
+      </Link>
+
+      <Search openInRoute autosuggest />
+
       <Stack space={2}>
         <SidebarNavigationLink
           to='/'

src/components/ui/input.tsx

@@ -95,7 +95,7 @@ const Input = forwardRef<HTMLInputElement, IInput>(
             'text-gray-900 dark:text-gray-100': !props.disabled,
             'text-gray-600': props.disabled,
             'rounded-md bg-white dark:bg-gray-900 border-gray-400 dark:border-gray-800 black:bg-black': theme === 'normal',
-            'rounded-full bg-gray-200 border-gray-200 dark:bg-gray-800 dark:border-gray-800 focus:bg-white dark:focus:bg-gray-900': theme === 'search',
+            'rounded-full bg-white border-gray-200 dark:bg-gray-900 dark:border-gray-800 py-2.5': theme === 'search',
             'pr-10 rtl:pl-10 rtl:pr-3': isPassword || append,
             'pl-8': typeof icon !== 'undefined',
             'pl-16': typeof prepend !== 'undefined',

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 offsetTop={80} className='pb-4'>
+    <StickyBox className='py-6'>
       {children}
     </StickyBox>
   </div>
@@ -47,7 +47,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 className='space-y-6 py-6 pb-12'>
       <Suspense>
         {children}
       </Suspense>

src/features/ui/components/navbar.tsx

@@ -85,7 +85,7 @@ const Navbar = () => {
 
   return (
     <nav
-      className='sticky top-0 z-50 border-b border-gray-200 bg-white shadow black:border-gray-800 black:bg-black dark:border-gray-800 dark:bg-primary-900'
+      className='border-b border-gray-200 bg-white shadow black:border-gray-800 black:bg-black dark:border-gray-800 dark:bg-primary-900'
       ref={node}
       data-testid='navbar'
     >

src/features/ui/index.tsx

@@ -508,7 +508,9 @@ const UI: React.FC<IUI> = ({ children }) => {
         <BackgroundShapes />
 
         <div className='z-10 flex min-h-screen flex-col'>
-          <Navbar />
+          <div className='sticky top-0 z-50 sm:hidden'>
+            <Navbar />
+          </div>
 
           <Layout>
             <Layout.Sidebar>