From 950271c24a7fc80bc1b495cd599e96754b8cecd4 Mon Sep 17 00:00:00 2001
From: SunriseFox <sunrisefox@qq.com>
Date: Tue, 5 Nov 2019 21:34:50 +0800
Subject: [PATCH] feat: add appbar

---
 src/index.tsx | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/index.tsx b/src/index.tsx
index a1ad3e9f890..3c0612540cc 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,6 +1,10 @@
 import './provider.worker'
 
 import {
+    AppBar,
+    Toolbar,
+    IconButton,
+    Typography,
     Container,
     CssBaseline,
     useMediaQuery,
@@ -12,6 +16,9 @@ import {
     LinearProgress,
     Breadcrumbs,
 } from '@material-ui/core'
+
+import BackIcon from '@material-ui/icons/ArrowBack'
+
 import React from 'react'
 import { ThemeProvider, withStyles } from '@material-ui/styles'
 import { MaskbookDarkTheme, MaskbookLightTheme } from './utils/theme'
@@ -171,8 +178,20 @@ function Dashboard() {
             .then(() => setExportLoading(false))
     }
 
+    const shouldRenderBackButton = useMediaQuery('(max-width:600px)')
+
     return (
         <Router>
+            <AppBar position="sticky">
+                <Toolbar>
+                    {shouldRenderBackButton && (
+                        <IconButton onClick={() => window.close()} edge="start" color="inherit" aria-label="menu">
+                            <BackIcon />
+                        </IconButton>
+                    )}
+                    <Typography variant="h6">Maskbook</Typography>
+                </Toolbar>
+            </AppBar>
             <Container maxWidth="md">
                 <CssBaseline />
                 <Container maxWidth="sm">