added cloud storage

photo/node_modules/.cache/babel-loader/062c60f5038da6c58b50dcdad41c791e.json

@@ -0,0 +1 @@
+{"ast":null,"code":"export { default } from './Icon';","map":{"version":3,"sources":["/Users/holunyeung/Documents/GitHub/Photo_React/photo/node_modules/@material-ui/core/esm/Icon/index.js"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,QAAxB","sourcesContent":["export { default } from './Icon';"]},"metadata":{},"sourceType":"module"}

photo/node_modules/.cache/babel-loader/321d4400da9eede0ce09fa0692967e32.json

@@ -0,0 +1 @@
+{"ast":null,"code":"export { default } from './LinearProgress';","map":{"version":3,"sources":["/Users/holunyeung/Documents/GitHub/Photo_React/photo/node_modules/@material-ui/core/esm/LinearProgress/index.js"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,kBAAxB","sourcesContent":["export { default } from './LinearProgress';"]},"metadata":{},"sourceType":"module"}

photo/src/testM.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles, useTheme } from '@material-ui/core/styles';
+import { makeStyles, useTheme, withStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
@@ -29,9 +29,22 @@ import CloudUploadIcon from '@material-ui/icons/CloudUpload';
 import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
 import SettingsIcon from '@material-ui/icons/Settings';
 import Avatar from '@material-ui/core/Avatar';
-
+import Icon from '@material-ui/core/Icon';
+import AddCircle from '@material-ui/icons/AddCircle';
+import CloudIcon from '@material-ui/icons/Cloud';
+import LinearProgress from '@material-ui/core/LinearProgress';
 const drawerWidth = 240;
 
+const BorderLinearProgress = withStyles((theme) => ({
+    colorPrimary: {
+        backgroundColor: theme.palette.grey[theme.palette.type === 'light' ? 200 : 700],
+    },
+    bar: {
+        borderRadius: 5,
+        backgroundColor: '#1a90ff',
+    },
+}))(LinearProgress);
+
 const useStyles = makeStyles((theme) => ({
     root: {
         flexGrow: 1,
@@ -199,7 +212,22 @@ export default function ButtonAppBar() {
                 ListItem >
             ))
         } <
-        /List>  < /
+        Divider / > {
+            ['儲存空間'].map((text, index) => ( <
+                ListItem button key = { text } >
+                <
+                ListItemIcon > { < CloudIcon / > } < /ListItemIcon> <
+                ListItemText primary = { text }
+                secondary = <
+                BorderLinearProgress variant = "determinate"
+                value = { 50 }
+                /> / >
+                <
+                /
+                ListItem >
+            ))
+        } < /
+        List > < /
         Drawer > <
         main className = { classes.content } >
         <