Google Drive: Created the skeleton for the google drive team

client/src/components/Apps/GoogleDrive/About/About.js

@@ -0,0 +1,14 @@
+import styles from './About.module.css'
+
+
+function About () {
+
+    return(
+        <div className={styles.wrapper}>
+            This is the about page
+        </div>
+    )
+}
+
+
+export default About

client/src/components/Apps/GoogleDrive/About/About.module.css

@@ -0,0 +1,3 @@
+.wrapper{
+    margin-top: 5px;
+}

client/src/components/Apps/GoogleDrive/GoogleDrive.js

@@ -1,7 +1,31 @@
-import React from "react";
+import React, {useState} from "react";
+import styles from './GoogleDrive.module.css'
+import Messages from './Messages/Messages'
+import About from './About/About'
 
-const GoogleDrive = () => {
-  return <div>This is the google drive page</div>;
+const  GoogleDrive = () => {
+
+  const [page, setPage] = useState('messages')
+
+  console.log(page)
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.layer1}>
+
+      </div>
+
+      <div className={styles.layer2}>
+        <h3 className={page==='messages'? styles.markGreen: null} onClick={() => setPage('messages')}>Messages</h3>
+        <h3 className={page==='about'? styles.markGreen: null} onClick={() => setPage('about')}>About</h3>
+      </div>
+      <React.Fragment>
+        {page === 'messages'? <Messages />:null}
+        {page === 'about'? <About />:null}
+      </React.Fragment>
+
+
+    </div>);
 };
 
 export default GoogleDrive;

client/src/components/Apps/GoogleDrive/GoogleDrive.module.css

@@ -0,0 +1,34 @@
+.container{
+    height: 100%;
+    padding-top: 6%;
+    background-color: #f6f6f6
+}
+
+.container .layer1{
+    width: 100%;
+    height: 8.97%;
+}
+
+.container .layer2{
+    border:  1px solid #E7E7E7;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+
+.container .layer2 h3{
+    height: 100%;
+
+    font-size: 14px;
+    text-align: center;
+    display: flex;
+    align-items: flex-end;
+    margin: 14px 14px 0 14px;
+    padding-bottom: 14px;
+    cursor: pointer;
+}
+
+.markGreen{
+    border-bottom: #0acf83 1px solid;
+}

client/src/components/Apps/GoogleDrive/Messages/Messages.js

@@ -0,0 +1,14 @@
+import styles from './Messages.module.css'
+
+
+function Messages (){
+
+    return(
+        <div className={styles.wrapper}>
+            This is the Messages page
+        </div>
+    )
+}
+
+
+export default Messages

client/src/components/Apps/GoogleDrive/Messages/Messages.module.css

@@ -0,0 +1,4 @@
+.wrapper{
+    width: 100%;
+    margin-top: 5px;
+}