Updated layout switch

apps/admin-x-activitypub/src/components/Activities.tsx

@@ -9,7 +9,7 @@ const Activities: React.FC<ActivitiesProps> = ({}) => {
     // const fakeAuthor =
     return (
         <>
-            <MainNavigation />
+            <MainNavigation title='Activities' />
             <div className='z-0 flex w-full flex-col items-center'>
                 <div className='mt-8 flex w-full max-w-[560px] flex-col'>
                     <ActivityItem>

apps/admin-x-activitypub/src/components/Inbox.tsx

@@ -6,7 +6,7 @@ import NiceModal from '@ebay/nice-modal-react';
 import React, {useState} from 'react';
 import {Activity} from './activities/ActivityItem';
 import {ActorProperties, ObjectProperties} from '@tryghost/admin-x-framework/api/activitypub';
-import {Button, Heading, Select, SelectOption, Tooltip} from '@tryghost/admin-x-design-system';
+import {Button, Heading} from '@tryghost/admin-x-design-system';
 import {useBrowseInboxForUser} from '../MainContent';
 
 interface InboxProps {}
@@ -33,44 +33,14 @@ const Inbox: React.FC<InboxProps> = ({}) => {
         });
     };
 
-    const selectOptions: SelectOption[] = [
+    const handleLayoutChange = (newLayout: string) => {
-        {value: 'option-1', label: 'Home'},
+        setLayout(newLayout);
-        {value: 'option-2', label: 'Posts'},
-        {value: 'option-3', label: 'Notes'},
-        {value: 'option-4', label: 'Media'}
-    ];
-
-    const defaultValue: SelectOption = {
-        value: 'option-1', label: 'Home'
-    };
-
-    const controlClasses = {
-        control: '!bg-transparent !hidden mr-2 !pl-0 text-xl font-bold',
-        menu: '!min-w-[120px]'
     };
 
     return (
         <>
-            <MainNavigation />
+            <MainNavigation page='home' title="Home" onLayoutChange={handleLayoutChange} />
-            <div className='mx-auto mt-4 flex w-full max-w-[640px] items-center justify-between border-b border-grey-200 pb-4'>
+            <div className='z-0 my-5 flex w-full flex-col'>
-                <div>
-                    <Select controlClasses={controlClasses} defaultValue={defaultValue} options={selectOptions} unstyled onSelect={() => {}} />
-                    <h2 className='text-xl font-bold'>Home</h2>
-                </div>
-                <div className=''>
-                    <Tooltip content="Inbox">
-                        <Button className='!px-2' icon='listview' iconColorClass={layout === 'inbox' ? 'text-black' : 'text-grey-400'} size='sm' onClick={() => {
-                            setLayout('inbox');
-                        }} />
-                    </Tooltip>
-                    <Tooltip content="Feed">
-                        <Button className='!px-2' icon='cardview' iconColorClass={layout === 'feed' ? 'text-black' : 'text-grey-400'} size='sm' onClick={() => {
-                            setLayout('feed');
-                        }} />
-                    </Tooltip>
-                </div>
-            </div>
-            <div className='z-0 flex w-full flex-col'>
                 <div className='w-full'>
                     {inboxTabActivities.length > 0 ? (
                         <ul className='mx-auto flex max-w-[640px] flex-col'>

apps/admin-x-activitypub/src/components/Profile.tsx

@@ -87,7 +87,7 @@ const Profile: React.FC<ProfileProps> = ({}) => {
 
     return (
         <>
-            <MainNavigation />
+            <MainNavigation title='Profile' />
             <div className='z-0 flex w-full flex-col items-center'>
                 <div className='mx-auto mt-8 w-full max-w-[560px]' id='ap-sidebar'>
                     <div className='h-[200px] w-full rounded-lg bg-gradient-to-tr from-grey-200 to-grey-100'>

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

@@ -9,7 +9,7 @@ interface SearchProps {}
 const Search: React.FC<SearchProps> = ({}) => {
     return (
         <>
-            <MainNavigation />
+            <MainNavigation title='Search' />
             <div className='z-0 flex w-full flex-col items-center pt-8'>
                 <div className='mb-6 flex w-full max-w-[560px] items-center gap-2 rounded-full bg-grey-100 px-3 py-2 text-grey-500'><Icon name='magnifying-glass' size={18} />Search the Fediverse</div>
                 <ActivityItem>

apps/admin-x-activitypub/src/components/navigation/MainNavigation.tsx

@@ -1,23 +1,57 @@
 import MainHeader from './MainHeader';
-import React from 'react';
+import React, {useEffect, useState} from 'react';
-import {Button} from '@tryghost/admin-x-design-system';
+import {Button, Tooltip} from '@tryghost/admin-x-design-system';
 import {useRouting} from '@tryghost/admin-x-framework/routing';
 
-interface MainNavigationProps {}
+interface MainNavigationProps {
+    title?: string;
+    page?: string;
+    onLayoutChange?: (layout: string) => void;
+}
 
-const MainNavigation: React.FC<MainNavigationProps> = ({}) => {
+const MainNavigation: React.FC<MainNavigationProps> = ({
+    title = 'Home',
+    page = '',
+    onLayoutChange
+}) => {
     const {route, updateRoute} = useRouting();
     const mainRoute = route.split('/')[0];
+    const [layout, setLayout] = useState('inbox');
+
+    useEffect(() => {
+        if (onLayoutChange) {
+            onLayoutChange(layout);
+        }
+    }, [layout, onLayoutChange]);
 
     return (
         <MainHeader>
+            <div className='col-[1/2] px-8'>
+                <h2 className='mt-1 text-xl font-bold'>
+                    {title}
+                </h2>
+            </div>
             <div className='col-[2/3] flex items-center justify-center gap-9'>
                 <Button icon='home' iconColorClass={mainRoute === '' ? 'text-black' : 'text-grey-500'} iconSize={18} unstyled onClick={() => updateRoute('')} />
                 <Button icon='magnifying-glass' iconColorClass={mainRoute === 'search' ? 'text-black' : 'text-grey-500'} iconSize={18} unstyled onClick={() => updateRoute('search')} />
                 <Button icon='bell' iconColorClass={mainRoute === 'activity' ? 'text-black' : 'text-grey-500'} iconSize={18} unstyled onClick={() => updateRoute('activity')} />
                 <Button icon='user' iconColorClass={mainRoute === 'profile' ? 'text-black' : 'text-grey-500'} iconSize={18} unstyled onClick={() => updateRoute('profile')} />
             </div>
-            <div className='col-[3/4] flex items-center justify-end px-8'>
+            <div className='col-[3/4] flex items-center justify-end gap-2 px-8'>
+                {page === 'home' &&
+                <div className='mr-3'>
+                    <Tooltip content="Inbox">
+                        <Button className='!px-2' icon='listview' iconColorClass={layout === 'inbox' ? 'text-black' : 'text-grey-400'} size='sm' onClick={() => {
+                            setLayout('inbox');
+                        }} />
+                    </Tooltip>
+                    <Tooltip content="Feed">
+                        <Button className='!px-2' icon='card-list' iconColorClass={layout === 'feed' ? 'text-black' : 'text-grey-400'} size='sm' onClick={() => {
+                            setLayout('feed');
+                        }} />
+                    </Tooltip>
+                </div>
+                }
                 <Button color='black' icon='add' label="Follow" onClick={() => {
                     updateRoute('follow-site');
                 }} />

apps/admin-x-design-system/src/assets/icons/card-list.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="Layout-Agenda--Streamline-Ultimate" height="24" width="24"><desc>Layout Agenda Streamline Icon: https://streamlinehq.com</desc><defs></defs><title>layout-agenda</title><path d="M2.25 0.747h19.5s1.5 0 1.5 1.5v6s0 1.5 -1.5 1.5H2.25s-1.5 0 -1.5 -1.5v-6s0 -1.5 1.5 -1.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M2.25 14.247h19.5s1.5 0 1.5 1.5v6s0 1.5 -1.5 1.5H2.25s-1.5 0 -1.5 -1.5v-6s0 -1.5 1.5 -1.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>

apps/admin-x-design-system/src/assets/icons/column-layout.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" id="Layout--Streamline-Ultimate" height="24" width="24"><desc>Layout Streamline Icon: https://streamlinehq.com</desc><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m1.5 2.99707 0 18.00003c0 0.8284 0.67157 1.5 1.5 1.5l18 0c0.8284 0 1.5 -0.6716 1.5 -1.5l0 -18.00003c0 -0.82843 -0.6716 -1.5 -1.5 -1.5l-18 0c-0.82843 0 -1.5 0.67157 -1.5 1.5Z" stroke-width="1.5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m12.0029 22.4971 0 -21.00003" stroke-width="1.5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m12.0029 11.9971 10 0" stroke-width="1.5"></path></svg>