feat: app bar

src/components/App.tsx

@@ -3,16 +3,15 @@ import { BrowserRouter as Router, Route } from 'react-router-dom';
 import CalendarPage from '../pages/calendar/CalendarPage';
 import MainPage from '../pages/main/MainPage';
 import BaseStyle from './BaseStyle';
+import PrintablesAppBar from './PrintablesAppBar';
 
 const basePath = process.env.PUBLIC_URL;
 
 function App(): JSX.Element {
   return (
     <>
       <BaseStyle />
-      <header>
-        <h1>Printables</h1>
-      </header>
+      <PrintablesAppBar />
       <main>
         <Router basename={basePath}>
           <Route exact path="/" component={MainPage} />

src/components/PrintablesAppBar.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AppBar, Toolbar, Typography } from '@material-ui/core';
+
+const PrintablesAppBar = (): JSX.Element => (
+  <AppBar>
+    <Toolbar>
+      <Typography variant="h6">Printables</Typography>
+    </Toolbar>
+  </AppBar>
+);
+
+export default PrintablesAppBar;