navbar placeholder

Reviewed By: elboman

Differential Revision: D47398098

fbshipit-source-id: 6e9518b47292b351153015da233574f7abfd0396

desktop/flipper-plugin/src/ui/Sidebar.tsx

@@ -20,6 +20,7 @@ import {Layout} from './Layout';
 const SidebarInteractiveContainer = styled(Interactive)<InteractiveProps>({
   display: 'flex',
   flex: '0 1 1',
+  background: theme.backgroundDefault,
 });
 SidebarInteractiveContainer.displayName = 'Sidebar:SidebarInteractiveContainer';
 

desktop/flipper-ui-core/src/sandy-chrome/LeftRail.tsx

@@ -163,7 +163,12 @@ export const LeftRail = withTrackingScope(function LeftRail({
   setToplevelSelection,
 }: ToplevelProps) {
   return (
-    <Layout.Container borderRight padv={12} width={48}>
+    <Layout.Container
+      borderRight
+      borderTop
+      padv={12}
+      width={48}
+      style={{background: theme.backgroundDefault}}>
       <Layout.Bottom style={{overflow: 'visible'}}>
         <Layout.Container center gap={10} padh={6}>
           <LeftRailButton

desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {Layout, theme} from 'flipper-plugin';
+import React from 'react';
+
+export function Navbar() {
+  return (
+    <Layout.Horizontal
+      style={{
+        width: '100%',
+        height: 68,
+        padding: `${theme.space.small}px ${theme.space.large}px`,
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        background: theme.backgroundDefault,
+        borderBottom: `solid 1px ${theme.dividerColor}`,
+      }}>
+      <Layout.Horizontal style={{gap: 16}}>
+        <button>show/hide sidebar</button>
+        <button>device picker</button>
+        <button>screenshot</button>
+        <button>record video</button>
+      </Layout.Horizontal>
+      <Layout.Horizontal style={{gap: 16}}>
+        <button>add plugins</button>
+        <button>Alerts</button>
+        <button>Doctor</button>
+        <button>Help</button>
+        <button>More</button>
+      </Layout.Horizontal>
+    </Layout.Horizontal>
+  );
+}

desktop/flipper-ui-core/src/sandy-chrome/SandyApp.tsx

@@ -20,6 +20,7 @@ import {Link, styled} from '../ui';
 import {theme} from 'flipper-plugin';
 import {Logger} from 'flipper-common';
 
+import {Navbar} from './Navbar';
 import {LeftRail} from './LeftRail';
 import {useStore, useDispatch} from '../utils/useStore';
 import {FlipperDevTools} from '../chrome/FlipperDevTools';
@@ -167,6 +168,8 @@ export function SandyApp() {
   return (
     <RootElement>
       <Layout.Bottom>
+        <Layout.Top gap={16}>
+          <Navbar />
           <Layout.Left>
             <Layout.Horizontal>
               <LeftRail
@@ -206,6 +209,7 @@ export function SandyApp() {
               {outOfContentsContainer}
             </MainContainer>
           </Layout.Left>
+        </Layout.Top>
         <_PortalsManager />
       </Layout.Bottom>
     </RootElement>
@@ -236,13 +240,14 @@ const outOfContentsContainer = (
 
 const MainContainer = styled(Layout.Container)({
   background: theme.backgroundWash,
-  padding: `${theme.space.large}px ${theme.space.large}px ${theme.space.large}px 0`,
+  padding: `0 ${theme.space.large}px ${theme.space.large}px 0`,
   overflow: 'hidden',
 });
 
 const RootElement = styled.div({
   display: 'flex',
   height: '100%',
+  background: theme.backgroundWash,
 });
 RootElement.displayName = 'SandyAppRootElement';