Updated sidebar menu and search

apps/admin-x-activitypub/src/MainContent.tsx

@@ -35,7 +35,7 @@ const MainContent = () => {
                 <div className='z-0 pt-[102px]'>
                     <Content route={mainRoute} />
                 </div>
-                <Sidebar />
+                <Sidebar route={mainRoute} />
             </div>
         </div>
     );

apps/admin-x-activitypub/src/components/feed/ArticleModal.tsx

@@ -704,7 +704,7 @@ const ArticleModal: React.FC<ArticleModalProps> = ({
             width={modalSize === MODAL_SIZE_LG ? 'toSidebar' : modalSize}
         >
             <div className='flex h-full flex-col'>
-                <div className='sticky top-0 z-50 flex h-[97px] items-center justify-center border-b border-gray-200 bg-white'>
+                <div className='sticky top-0 z-50 flex h-[102px] items-center justify-center border-b border-gray-200 bg-white'>
                     <div
                         className={`w-full ${modalSize === MODAL_SIZE_LG ? 'grid px-8' : 'flex justify-between gap-2 px-8'}`}
                         style={modalSize === MODAL_SIZE_LG ? {

apps/admin-x-activitypub/src/components/layout/Header.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import {H1} from '@tryghost/shade';
+import {Button, H1, LucideIcon} from '@tryghost/shade';
+import {useRouting} from '@tryghost/admin-x-framework/routing';
 
 interface HeaderProps {
     route: string;
@@ -20,6 +21,9 @@ const getTitle = (route: string) => {
     case 'notifications':
         return 'Notifications';
         break;
+    case 'search':
+        return 'Search';
+        break;
 
     default:
         return 'Inbox';
@@ -28,12 +32,17 @@ const getTitle = (route: string) => {
 };
 
 const Header: React.FC<HeaderProps> = ({route}) => {
+    const {updateRoute} = useRouting();
+
     return (
         <div
             className='fixed left-[320px] right-0 top-0 z-10 bg-white px-8'>
             <div className='flex h-[102px] items-center justify-between gap-5 border-b border-gray-200'>
                 <H1>{getTitle(route)}</H1>
-                <span className='flex h-9 w-[274px] items-center rounded-full bg-gray-200 px-4 text-gray-600'>Search</span>
+                <Button className='h-9 w-[274px] justify-start rounded-full bg-gray-100 text-md text-gray-600 hover:bg-gray-200 hover:text-gray-600 [&_svg]:size-[18px]' variant='ghost' onClick={() => updateRoute('search')}>
+                    <LucideIcon.Search size={18} strokeWidth={1.5} />
+                    Search
+                </Button>
             </div>
         </div>
     );

apps/admin-x-activitypub/src/components/layout/Sidebar/Sidebar.tsx

@@ -1,46 +1,58 @@
 import * as React from 'react';
 import Recommendations from './Recommendations';
-import {Button, Separator, cn} from '@tryghost/shade';
+import SidebarButton from './SidebarButton';
+import {Button, LucideIcon, Separator, cn} from '@tryghost/shade';
 import {useRouting} from '@tryghost/admin-x-framework/routing';
 
-interface SidebarProps
-    extends React.HTMLAttributes<HTMLDivElement> {}
+interface SidebarProps {
+    route: string;
+}
 
-const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>(
-    ({className, ...props}, ref) => {
-        const {updateRoute} = useRouting();
+const Sidebar: React.FC<SidebarProps> = ({route}) => {
+    const {updateRoute} = useRouting();
 
-        return (
-            <div
-                ref={ref}
-                className={cn(
-                    'border-l border-gray-200 fixed top-[102px] right-8 w-[294px] min-h-[calc(100vh-102px-32px)]',
-                    'pointer-events-none',
-                    '[&>*]:pointer-events-auto',
-                    className
-                )}
-                {...props}
-            >
-                <div className='flex flex-col gap-8 pl-5 pt-5'>
-                    <div className='flex flex-col gap-2'>
-                        <Button className='justify-start' variant='ghost' onClick={() => updateRoute('inbox')}>Inbox</Button>
-                        <Button className='justify-start' variant='ghost' onClick={() => updateRoute('feed')}>Feed</Button>
-                        <Button className='justify-start' variant='ghost' onClick={() => updateRoute('notifications')}>Notifications</Button>
-                        <Button className='justify-start' variant='ghost' onClick={() => updateRoute('profile')}>Profile</Button>
-                    </div>
-
-                    <div>
-                        <Button onClick={() => updateRoute('feed')}>New note</Button>
-                    </div>
-
-                    <Separator />
-
-                    <Recommendations />
+    return (
+        <div
+            className={cn(
+                'border-l border-gray-200 fixed top-[102px] right-8 w-[294px] min-h-[calc(100vh-102px-32px)]',
+                'pointer-events-none',
+                '[&>*]:pointer-events-auto'
+            )}
+        >
+            <div className='flex flex-col gap-8 pl-5 pt-5'>
+                <div className='flex flex-col gap-px'>
+                    <SidebarButton active={route === 'inbox'} onClick={() => updateRoute('inbox')}>
+                        <LucideIcon.Inbox size={18} strokeWidth={1.5} />
+                            Inbox
+                    </SidebarButton>
+                    <SidebarButton active={route === 'feed'} onClick={() => updateRoute('feed')}>
+                        <LucideIcon.Hash size={18} strokeWidth={1.5} />
+                            Feed
+                    </SidebarButton>
+                    <SidebarButton active={route === 'notifications'} onClick={() => updateRoute('notifications')}>
+                        <LucideIcon.Bell size={18} strokeWidth={1.5} />
+                            Notifications
+                    </SidebarButton>
+                    <SidebarButton active={route === 'profile'} onClick={() => updateRoute('profile')}>
+                        <LucideIcon.User size={18} strokeWidth={1.5} />
+                            Profile
+                    </SidebarButton>
                 </div>
+
+                <div>
+                    <Button className='rounded-full bg-purple-500' onClick={() => updateRoute('feed')}>
+                        <LucideIcon.FilePen />
+                        New note
+                    </Button>
+                </div>
+
+                <Separator />
+
+                <Recommendations />
             </div>
-        );
-    }
-);
+        </div>
+    );
+};
 
 Sidebar.displayName = 'Sidebar';
 

apps/admin-x-activitypub/src/components/layout/Sidebar/SidebarButton.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import {Button, ButtonProps, cn} from '@tryghost/shade';
+
+interface SidebarButtonProps extends ButtonProps {
+    active: boolean;
+    children: React.ReactNode;
+}
+
+const SidebarButton = React.forwardRef<HTMLButtonElement, SidebarButtonProps>(
+    ({active, children, ...props}, ref) => {
+        return (
+            <Button
+                ref={ref}
+                className={cn(
+                    'justify-start text-md font-medium text-gray-800 h-9 [&_svg]:size-[18px]',
+                    active ? 'bg-gray-100 text-black font-semibold' : ''
+                )}
+                variant='ghost'
+                {...props}
+            >
+                {children}
+            </Button>
+        );
+    }
+);
+
+SidebarButton.displayName = 'SidebarButton';
+
+export default SidebarButton;

apps/admin-x-activitypub/src/views/Search/Search.tsx

@@ -8,7 +8,6 @@ import {useDebounce} from 'use-debounce';
 import APAvatar from '@components/global/APAvatar';
 import ActivityItem from '@components/activities/ActivityItem';
 import FollowButton from '@components/global/FollowButton';
-import MainNavigation from '@components/navigation/MainNavigation';
 import Separator from '@components/global/Separator';
 import ViewProfileModal from '@components/modals/ViewProfileModal';
 
@@ -206,7 +205,6 @@ const Search: React.FC<SearchProps> = ({}) => {
 
     return (
         <>
-            <MainNavigation page='search' />
             <div className='z-0 mx-auto flex w-full max-w-[560px] flex-col items-center pt-8'>
                 <div className='relative flex w-full items-center'>
                     <Icon className='absolute left-3 top-3 z-10' colorClass='text-gray-500' name='magnifying-glass' size='sm' />