add header (#3954)

Author: siddharthkp

packages/app/src/app/pages/NewDashboard/Header/index.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { useOvermind } from 'app/overmind';
+import { UserMenu } from 'app/pages/common/UserMenu';
+import {
+  Stack,
+  Input,
+  Button,
+  Icon,
+  IconButton,
+} from '@codesandbox/components';
+import css from '@styled-system/css';
+
+export const Header = () => {
+  const {
+    actions: { modalOpened },
+  } = useOvermind();
+
+  return (
+    <Stack
+      as="header"
+      justify="space-between"
+      align="center"
+      paddingX={4}
+      css={css({
+        boxSizing: 'border-box',
+        fontFamily: 'Inter, sans-serif',
+        height: 12,
+        backgroundColor: 'titleBar.activeBackground',
+        color: 'titleBar.activeForeground',
+        borderBottom: '1px solid',
+        borderColor: 'titleBar.border',
+      })}
+    >
+      <IconButton name="menu" size={18} title="Menu" />
+      <Input
+        type="text"
+        placeholder="Search all sandboxes"
+        css={{ maxWidth: 480 }}
+      />
+      <Stack align="center" gap={2}>
+        <Button
+          variant="primary"
+          css={css({ width: 'auto', paddingX: 3 })}
+          onClick={() => modalOpened({ modal: 'newSandbox' })}
+        >
+          Create Sandbox
+        </Button>
+        <Button variant="secondary" css={css({ size: 26 })}>
+          <Icon name="bell" size={11} title="Notifications" />
+        </Button>
+        <UserMenu>
+          <Button variant="secondary" css={css({ size: 26 })}>
+            <Icon name="more" size={12} title="User actions" />
+          </Button>
+        </UserMenu>
+      </Stack>
+    </Stack>
+  );
+};

packages/app/src/app/pages/NewDashboard/index.tsx

@@ -1,11 +1,13 @@
 import { signInPageUrl } from '@codesandbox/common/lib/utils/url-generator';
-import css from '@styled-system/css';
 import React, { useEffect, FunctionComponent } from 'react';
 import { Redirect } from 'react-router-dom';
 import { client } from 'app/graphql/client';
 import { useOvermind } from 'app/overmind';
 import codesandboxBlack from '@codesandbox/components/lib/themes/codesandbox-black';
 import { ThemeProvider, Stack } from '@codesandbox/components';
+import css from '@styled-system/css';
+
+import { Header } from './Header';
 import { Sidebar } from './Sidebar';
 import { Content } from './Content';
 
@@ -30,18 +32,21 @@ export const Dashboard: FunctionComponent = () => {
 
   return (
     <ThemeProvider theme={codesandboxBlack}>
-      <Stack
-        gap={6}
-        css={css({
-          backgroundColor: 'sideBar.background',
-          fontFamily: "'Inter', sans-serif",
-          color: 'sideBar.foreground',
-          minHeight: '100vh',
-          width: '100vw',
-        })}
-      >
-        <Sidebar />
-        <Content />
+      <Stack direction="vertical">
+        <Header />
+        <Stack
+          gap={6}
+          css={css({
+            backgroundColor: 'sideBar.background',
+            fontFamily: "'Inter', sans-serif",
+            color: 'sideBar.foreground',
+            minHeight: 'calc(100vh - 48px)',
+            width: '100vw',
+          })}
+        >
+          <Sidebar />
+          <Content />
+        </Stack>
       </Stack>
     </ThemeProvider>
   );

packages/components/src/components/Icon/icons.tsx

@@ -202,12 +202,17 @@ export const cross = props => (
 );
 
 export const plus = props => (
-  <svg width={16} height={16} fill="none" viewBox="0 0 16 16" {...props}>
+  <Element
+    as="svg"
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
     <path
       fill="currentColor"
       d="M8.6 2H7.4v5.4H2v1.2h5.4V14h1.2V8.6H14V7.4H8.6V2z"
     />
-  </svg>
+  </Element>
 );
 
 export const trash = props => (
@@ -220,3 +225,35 @@ export const trash = props => (
     />
   </svg>
 );
+
+export const menu = props => (
+  <Element
+    as="svg"
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M16 4H0V3H16V4ZM16 8.66762H0V7.66762H16V8.66762ZM0 13.3352H16V12.3352H0V13.3352Z"
+      fill="currentColor"
+      fillRule="evenodd"
+      clipRule="evenodd"
+    />
+  </Element>
+);
+
+export const bell = props => (
+  <Element
+    as="svg"
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M9.03657 1.06667C9.03657 1.10232 9.03487 1.13756 9.03155 1.17231C11.3998 1.66446 13.1829 3.81795 13.1829 6.4V8.53333L15.3507 12.2512C15.7652 12.9622 15.2675 13.8667 14.4618 13.8667H8H1.53818C0.732452 13.8667 0.234778 12.9622 0.649321 12.2512L2.81711 8.53333L2.81711 6.4C2.81711 3.81795 4.60022 1.66446 6.96844 1.17231C6.96512 1.13756 6.96342 1.10232 6.96342 1.06667C6.96342 0.477563 7.42751 0 8 0C8.57248 0 9.03657 0.477563 9.03657 1.06667ZM8.00001 16C7.23265 16 6.56267 15.571 6.20421 14.9333H9.79581C9.43735 15.571 8.76737 16 8.00001 16Z"
+      fill="currentColor"
+      fillRule="evenodd"
+      clipRule="evenodd"
+    />
+  </Element>
+);