Add basic top bar

[MAILPOET-3102]

assets/js/src/common/top_bar/_stories/top_bar_no_children.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { TopBar } from '../top_bar';
+
+export default {
+  title: 'Top Bar/No Children',
+};
+
+export const TopBarWithoutChildren = () => (
+  <>
+    <div style={{
+      backgroundColor: '#bbb',
+      width: '100%',
+      position: 'fixed',
+      height: '100%',
+      top: '0px',
+      left: '0px',
+    }}
+    >
+      <TopBar />
+    </div>
+  </>
+);

assets/js/src/common/top_bar/beamer_icon.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const BeamerIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path fill="#071C6D" d="M18.2 11.286L12.525 7.33c-.318-.221-.731-.221-1.049 0l-5.675 3.956c-.302.211-.463.587-.411.964l.946 6.923c.066.488.464.849.935.849h3.783V22h1.892v-1.978h3.783c.471 0 .87-.361.936-.849l.946-6.923c.051-.377-.109-.753-.411-.964zM12 9.341l4.654 3.245-.745 5.458H8.091l-.745-5.458L12 9.341zM12 2l10 7.321-1.084 1.62L12 4.415l-8.916 6.526L2 9.321 12 2zM8.926 14.087c0 1.636 1.273 2.968 2.838 2.968 1.564 0 2.837-1.332 2.837-2.968 0-1.635-1.273-2.967-2.837-2.967-1.565 0-2.838 1.332-2.838 2.967zm3.783 0c0 .545-.424.99-.945.99-.522 0-.946-.445-.946-.99 0-.545.424-.989.946-.989.52 0 .945.444.945.99z" />
+  </svg>
+);

assets/js/src/common/top_bar/top_bar.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { MailPoetLogo } from './mailpoet_logo';
+import { BeamerIcon } from './beamer_icon';
+
+export const TopBar = () => (
+  <div className="top-bar">
+    <div className="top-bar-logo">
+      <MailPoetLogo />
+    </div>
+    <div>
+      <div className="top-bar-beamer">
+        <BeamerIcon />
+      </div>
+    </div>
+  </div>
+);