diff --git a/web/sidebar/left-layout-aside.react.js b/web/sidebar/left-layout-aside.react.js
index e8bc08f29..6054c390c 100644
--- a/web/sidebar/left-layout-aside.react.js
+++ b/web/sidebar/left-layout-aside.react.js
@@ -1,31 +1,31 @@
 // @flow
 
 import * as React from 'react';
 
-import AppSwitcher from './app-switcher.react.js';
 import CommunityPicker from './community-picker.react.js';
 import css from './left-layout-aside.css';
 import SettingsSwitcher from './settings-switcher.react.js';
 import { useSelector } from '../redux/redux-utils.js';
+import AppSwitcher from '../topbar/app-switcher.react.js';
 
 function LeftLayoutAside(): React.Node {
   const navInfo = useSelector(state => state.navInfo);
   const navigationPanel = React.useMemo(() => {
     if (navInfo.tab === 'settings') {
       return <SettingsSwitcher />;
     }
     return <AppSwitcher />;
   }, [navInfo.tab]);
   return (
     <aside className={css.container}>
       <CommunityPicker />
       {navigationPanel}
     </aside>
   );
 }
 
 const MemoizedLeftLayoutAside: React.ComponentType<{}> = React.memo<{}>(
   LeftLayoutAside,
 );
 
 export default MemoizedLeftLayoutAside;
diff --git a/web/sidebar/app-switcher.react.js b/web/topbar/app-switcher.react.js
similarity index 96%
rename from web/sidebar/app-switcher.react.js
rename to web/topbar/app-switcher.react.js
index e84327c73..3884025dd 100644
--- a/web/sidebar/app-switcher.react.js
+++ b/web/topbar/app-switcher.react.js
@@ -1,134 +1,134 @@
 // @flow
 
 import * as React from 'react';
 import { useDispatch } from 'react-redux';
 
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import {
   mostRecentlyReadThreadSelector,
   unreadCount,
 } from 'lib/selectors/thread-selectors.js';
 
-import css from './left-layout-aside.css';
-import NavigationPanel from './navigation-panel.react.js';
 import { updateNavInfoActionType } from '../redux/action-types.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { navTabSelector } from '../selectors/nav-selectors.js';
+import css from '../sidebar/left-layout-aside.css';
+import NavigationPanel from '../sidebar/navigation-panel.react.js';
 
 function AppSwitcher(): React.Node {
   const activeChatThreadID = useSelector(
     state => state.navInfo.activeChatThreadID,
   );
   const mostRecentlyReadThread = useSelector(mostRecentlyReadThreadSelector);
   const isActiveThreadCurrentlyUnread = useSelector(
     state =>
       !activeChatThreadID ||
       !!state.threadStore.threadInfos[activeChatThreadID]?.currentUser.unread,
   );
 
   const dispatch = useDispatch();
 
   const onClickChat = React.useCallback(
     (event: SyntheticEvent<HTMLAnchorElement>) => {
       event.preventDefault();
       dispatch({
         type: updateNavInfoActionType,
         payload: {
           tab: 'chat',
           activeChatThreadID: isActiveThreadCurrentlyUnread
             ? mostRecentlyReadThread
             : activeChatThreadID,
         },
       });
     },
     [
       dispatch,
       isActiveThreadCurrentlyUnread,
       mostRecentlyReadThread,
       activeChatThreadID,
     ],
   );
 
   const boundUnreadCount = useSelector(unreadCount);
 
   let chatBadge = null;
   if (boundUnreadCount > 0) {
     chatBadge = <span className={css.chatBadge}>{boundUnreadCount}</span>;
   }
 
   const chatNavigationItem = React.useMemo(
     () => (
       <NavigationPanel.Item tab="chat">
         <a className={css.navigationPanelTab} onClick={onClickChat}>
           <span className={css.chatIconWrapper}>
             <SWMansionIcon icon="message-square" size={24} />
             {chatBadge}
           </span>
           <p>Chat</p>
         </a>
       </NavigationPanel.Item>
     ),
     [chatBadge, onClickChat],
   );
 
   const onClickCalendar = React.useCallback(
     (event: SyntheticEvent<HTMLAnchorElement>) => {
       event.preventDefault();
       dispatch({
         type: updateNavInfoActionType,
         payload: { tab: 'calendar' },
       });
     },
     [dispatch],
   );
 
   const isCalendarEnabled = useSelector(state => state.enabledApps.calendar);
   const calendarNavigationItem = React.useMemo(() => {
     if (!isCalendarEnabled) {
       return null;
     }
     return (
       <NavigationPanel.Item tab="calendar">
         <a className={css.navigationPanelTab} onClick={onClickCalendar}>
           <SWMansionIcon icon="calendar" size={24} />
           <p>Calendar</p>
         </a>
       </NavigationPanel.Item>
     );
   }, [isCalendarEnabled, onClickCalendar]);
 
   const onClickApps = React.useCallback(
     (event: SyntheticEvent<HTMLAnchorElement>) => {
       event.preventDefault();
       dispatch({
         type: updateNavInfoActionType,
         payload: {
           tab: 'apps',
         },
       });
     },
     [dispatch],
   );
 
   const appNavigationItem = React.useMemo(
     () => (
       <NavigationPanel.Item tab="apps">
         <a className={css.navigationPanelTab} onClick={onClickApps}>
           <SWMansionIcon icon="globe-1" size={24} />
           <p>Apps</p>
         </a>
       </NavigationPanel.Item>
     ),
     [onClickApps],
   );
 
   return (
     <NavigationPanel.Container tabSelector={navTabSelector}>
       {chatNavigationItem}
       {calendarNavigationItem}
       {appNavigationItem}
     </NavigationPanel.Container>
   );
 }
 
 export default AppSwitcher;