From a15b1d28cc35d792160bf2d22a6889d718d28adf Mon Sep 17 00:00:00 2001
From: Keith Fung <keith.fung@infernored.com>
Date: Thu, 1 Oct 2020 14:01:01 -0400
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Modify=20Layout=20Component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Layout.stories.tsx | 26 +++++++++++---------
 src/components/Layout.tsx         | 40 ++++++++++++++++++++++++++++++-
 2 files changed, 54 insertions(+), 12 deletions(-)

diff --git a/src/components/Layout.stories.tsx b/src/components/Layout.stories.tsx
index 99a3961..3f61d2c 100644
--- a/src/components/Layout.stories.tsx
+++ b/src/components/Layout.stories.tsx
@@ -1,22 +1,26 @@
 import React from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
-
+import { initializeIcons, Text } from '@fluentui/react';
 import Layout from './Layout';
-import { StackItem } from '@fluentui/react';
+import LargeCard from './LargeCard';
 
 export default {
-    title: 'Layout',
+    title: 'Components/Layout',
     component: Layout,
     parameters: { layout: 'fullscreen' },
 } as Meta;
 
-const Template: Story = () => (
-    <Layout>
-        <StackItem styles={{ root: { height: 20, background: '#bada55' } }}>Header</StackItem>
-        <StackItem grow styles={{ root: { background: 'magenta' } }}>
-            Content
-        </StackItem>
-    </Layout>
-);
+const Template: Story = () => {
+    initializeIcons();
+    return (
+        <Layout>
+            <LargeCard>
+                <Text variant="large" as="h2">
+                    Content
+                </Text>
+            </LargeCard>
+        </Layout>
+    );
+};
 
 export const Standard = Template.bind({});
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 98338c5..3070493 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,10 +1,48 @@
 import React from 'react';
 import { Stack } from '@fluentui/react';
+import AppBar from './AppBar';
+import { useTheme } from '@fluentui/react-theme-provider';
+import { Dropdown, IDropdownStyles, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
+
+// TODO Remove mock data
+const appName = 'ElectionGuard Ballot Tracker';
+const logoImageUrl = 'https://themingdesigner.blob.core.windows.net/$web/MicrosoftLogo.png';
+const placeholder = 'Select Election';
+const options: IDropdownOption[] = [
+    { key: '1', text: 'Mock Election 1' },
+    { key: '2', text: 'Mock Election 2' },
+    { key: '3', text: 'Mock Election 3' },
+    { key: '4', text: 'Mock Election 4' },
+    { key: '5', text: 'Mock Election 5' },
+];
+
+const dropdownStyles: Partial<IDropdownStyles> = {
+    dropdown: { width: 300 },
+};
 
 export interface LayoutProps {}
 
 const Layout: React.FunctionComponent<LayoutProps> = ({ children }) => {
-    return <Stack verticalFill>{children || null}</Stack>;
+    const theme = useTheme();
+    return (
+        <Stack verticalFill>
+            <AppBar appName={appName} logoImageUrl={logoImageUrl}>
+                <Dropdown placeholder={placeholder} ariaLabel={placeholder} options={options} styles={dropdownStyles} />
+            </AppBar>
+            <Stack
+                verticalFill
+                styles={{
+                    root: {
+                        backgroundColor: theme.palette.neutralLighterAlt,
+                        padding: '0 40px',
+                        overflowY: 'auto',
+                    },
+                }}
+            >
+                {children || null}
+            </Stack>
+        </Stack>
+    );
 };
 
 export default Layout;