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,45 +168,48 @@ export function SandyApp() {
   return (
     <RootElement>
       <Layout.Bottom>
-        <Layout.Left>
-          <Layout.Horizontal>
-            <LeftRail
-              toplevelSelection={toplevelSelection}
-              setToplevelSelection={setToplevelSelection}
-            />
-            <_Sidebar width={250} minWidth={220} maxWidth={800} gutter>
-              {leftMenuContent && (
-                <TrackingScope scope={toplevelSelection!}>
-                  {leftMenuContent}
-                </TrackingScope>
-              )}
-            </_Sidebar>
-          </Layout.Horizontal>
-          <MainContainer>
-            {staticView ? (
-              <TrackingScope
-                scope={
-                  (staticView as any).displayName ??
-                  staticView.name ??
-                  staticView.constructor?.name ??
-                  'unknown static view'
-                }>
-                {staticView === WelcomeScreenStaticView ? (
-                  React.createElement(staticView) /* avoid shadow */
-                ) : (
-                  <ContentContainer>
-                    {React.createElement(staticView, {
-                      logger: logger,
-                    })}
-                  </ContentContainer>
+        <Layout.Top gap={16}>
+          <Navbar />
+          <Layout.Left>
+            <Layout.Horizontal>
+              <LeftRail
+                toplevelSelection={toplevelSelection}
+                setToplevelSelection={setToplevelSelection}
+              />
+              <_Sidebar width={250} minWidth={220} maxWidth={800} gutter>
+                {leftMenuContent && (
+                  <TrackingScope scope={toplevelSelection!}>
+                    {leftMenuContent}
+                  </TrackingScope>
                 )}
-              </TrackingScope>
-            ) : (
-              <PluginContainer logger={logger} />
-            )}
-            {outOfContentsContainer}
-          </MainContainer>
-        </Layout.Left>
+              </_Sidebar>
+            </Layout.Horizontal>
+            <MainContainer>
+              {staticView ? (
+                <TrackingScope
+                  scope={
+                    (staticView as any).displayName ??
+                    staticView.name ??
+                    staticView.constructor?.name ??
+                    'unknown static view'
+                  }>
+                  {staticView === WelcomeScreenStaticView ? (
+                    React.createElement(staticView) /* avoid shadow */
+                  ) : (
+                    <ContentContainer>
+                      {React.createElement(staticView, {
+                        logger: logger,
+                      })}
+                    </ContentContainer>
+                  )}
+                </TrackingScope>
+              ) : (
+                <PluginContainer logger={logger} />
+              )}
+              {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';