Moved all navigation to Drawer.

Developer-Students-Clubs-MESCOE · Oct 18, 2020 · d9a0ccf · d9a0ccf
1 parent 0177f69
commit d9a0ccf
Show file tree

Hide file tree

Showing 12 changed files with 1,768 additions and 2,145 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/client/package.json b/client/package.json
@@ -4,6 +4,10 @@
   "homepage": "https://developer-students-clubs-mescoe.github.io",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.32",
+    "@fortawesome/free-brands-svg-icons": "^5.15.1",
+    "@fortawesome/free-solid-svg-icons": "^5.15.1",
+    "@fortawesome/react-fontawesome": "^0.1.11",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.56",

diff --git a/client/src/assets/img/gdg_black.png b/client/src/assets/img/gdg_black.png
diff --git a/client/src/components/navigation/DSCDrawer.jsx b/client/src/components/navigation/DSCDrawer.jsx
@@ -20,37 +20,40 @@ class DSCDrawer extends Component {
 
   list = () => (
     <div
-      style={{backgroundColor: "#242424", height: "100%"}}
+      style={{backgroundColor: "#fff", height: "100%"}}
       role="presentation"
       onClick={this.toggleDrawer(false)}
       onKeyDown={this.toggleDrawer(false)}
     >
       <List>
         {pageRoutes.map((route, index) => (
           <Link to={route.path} key={index}>
-            <ListItem button key={index}>
-              <ListItemText primary={route.name} style={{color: "white"}}/>
+            <ListItem button>
+              <ListItemIcon>{route.icon}</ListItemIcon>
+              <ListItemText primary={route.name} style={{color: "black", fontSize: 24}}/>
             </ListItem>
           </Link>
         ))}
         {linkRoutes.map((route, index) => (
           <a href={route.path} key={index} target='blank'>
-            <ListItem button key={index}>
-              <ListItemText primary={route.name} style={{color: "white"}}/>
+            <ListItem button>
+              <ListItemIcon>{route.icon}</ListItemIcon>
+              <ListItemText primary={route.name} style={{color: "black"}}/>
             </ListItem>
           </a>
         ))}
         <ListItem>
-          <DarkModeToggler isDarkMode={this.props.isDarkMode} handleThemeSwitch={this.props.handleThemeSwitch} color='white'/>
+          <DarkModeToggler isDarkMode={this.props.isDarkMode} handleThemeSwitch={this.props.handleThemeSwitch}
+                           color='black'/>
         </ListItem>
       </List>
-      <Divider style={{backgroundColor: "white"}}/>
+      <Divider style={{backgroundColor: "black"}}/>
       <List>
         {socials.map((social, index) => (
           <a href={social.link} target="blank" key={index}>
             <ListItem button>
-              <ListItemIcon>{social.icon}</ListItemIcon>
-              <ListItemText primary={social.name} style={{color: "white"}}/>
+              <ListItemIcon style={{color: 'black'}}>{social.icon}</ListItemIcon>
+              <ListItemText primary={social.name} style={{color: "black"}}/>
             </ListItem>
           </a>
         ))}

diff --git a/client/src/components/navigation/DSCNavBar.jsx b/client/src/components/navigation/DSCNavBar.jsx
@@ -1,11 +1,9 @@
 import React, {Component} from 'react';
-import {AppBar, Hidden, Toolbar} from '@material-ui/core';
+import {AppBar, Toolbar} from '@material-ui/core';
 import gdgLogo from '../../assets/img/gdg_logo.png';
 import {Container, Row, Col, Image} from 'react-bootstrap';
-import ROUTES, {RouteType} from '../../routes';
 import {Link} from 'react-router-dom';
 import DSCDrawer from "./DSCDrawer";
-import DarkModeToggler from "../DarkModeToggler";
 
 export default class DSCNavBar extends Component {
   constructor(props) {
@@ -50,18 +48,16 @@ export default class DSCNavBar extends Component {
   }
 
   render() {
-    const linkRoutes = ROUTES.filter(route => route.type === RouteType.LINK)
-    const pageRoutes = ROUTES.filter(route => route.type === RouteType.PAGE)
     return (
       <AppBar position="fixed" color="inherit" className="dsc-nav">
         <Toolbar>
           <Container>
             <Row>
-              <Hidden lgUp implementation="css" className="my-auto">
-                <Col xs="1">
+              {/*<Hidden lgUp implementation="css" className="my-auto">*/}
+                <Col xs="1" className='my-auto mr-n5'>
                   <DSCDrawer isDarkMode={this.state.isDarkMode} handleThemeSwitch={this.handleThemeSwitch}/>
                 </Col>
-              </Hidden>
+              {/*</Hidden>*/}
               <Col lg="1" md="1" sm="1" xs="2" className="dsc-brand my-auto p-xl-3 p-lg-3 p-md-2 p-sm-1 p-xs-0">
                 <Link to="/">
                   <Image src={gdgLogo} style={{width: '100%'}} className='nav-logo'/>
@@ -79,48 +75,6 @@ export default class DSCNavBar extends Component {
                   DSC MESCOE
                 </Link>
               </Col>
-              <Col lg="8" className="my-auto">
-                <Hidden mdDown implementation="css">
-                  <Container fluid>
-                    <Row className="justify-content-between">
-                      {pageRoutes.map(
-                        (route, index) =>
-                          <Link
-                            key={index}
-                            style={{
-                              fontSize: 16,
-                              margin: 0,
-                              padding: 0,
-                              color: 'inherit',
-                              textDecoration: 'inherit'
-                            }}
-                            to={route.path}
-                          >
-                            {route.name}
-                          </Link>
-                      )}
-                      {linkRoutes.map(
-                        (route, index) =>
-                          <a
-                            key={index}
-                            style={{
-                              fontSize: 16,
-                              margin: 0,
-                              padding: 0,
-                              color: 'inherit',
-                              textDecoration: 'inherit'
-                            }}
-                            href={route.path}
-                            target='blank'
-                          >
-                            {route.name}
-                          </a>
-                      )}
-                      <DarkModeToggler isDarkMode={this.state.isDarkMode} handleThemeSwitch={this.handleThemeSwitch} color='black'/>
-                    </Row>
-                  </Container>
-                </Hidden>
-              </Col>
             </Row>
           </Container>
         </Toolbar>

diff --git a/client/src/components/navigation/Footer.jsx b/client/src/components/navigation/Footer.jsx
@@ -5,27 +5,27 @@ import {resetFooterStyle} from "../../utils/utils";
 
 export const socials = [
   {
-    icon: <Facebook className="m-xl-4 m-lg-3 m-md-1" style={{color: 'white'}}/>,
+    icon: <Facebook className="m-xl-4 m-lg-3 m-md-1" style={{color: 'black'}}/>,
     link: 'https://www.facebook.com/dscmescoepune/',
     name: "Facebook",
   },
   {
-    icon: <GitHub className="m-xl-4 m-lg-3 m-md-1" style={{color: 'white'}}/>,
+    icon: <GitHub className="m-xl-4 m-lg-3 m-md-1" style={{color: 'black'}}/>,
     link: 'https://github.com/Developer-Students-Clubs-MESCOE',
     name: "GitHub",
   },
   {
-    icon: <Instagram className="m-xl-4 m-lg-3 m-md-1" style={{color: 'white'}}/>,
+    icon: <Instagram className="m-xl-4 m-lg-3 m-md-1" style={{color: 'black'}}/>,
     link: 'https://www.instagram.com/mescoedsc/',
     name: "Instagram",
   },
   {
-    icon: <LinkedIn className="m-xl-4 m-lg-3 m-md-1" style={{color: 'white'}}/>,
+    icon: <LinkedIn className="m-xl-4 m-lg-3 m-md-1" style={{color: 'black'}}/>,
     link: 'https://www.linkedin.com/company/dscmescoe/',
     name: "LinkedIn",
   },
   {
-    icon: <Twitter className="m-xl-4 m-lg-3 m-md-1" style={{color: 'white'}}/>,
+    icon: <Twitter className="m-xl-4 m-lg-3 m-md-1" style={{color: 'black'}}/>,
     link: 'https://twitter.com/dscmescoe',
     name: "Twitter",
   }
@@ -40,7 +40,8 @@ export default class Footer extends Component {
     return (
       <Container fluid id="contact"
                  style={{
-                   backgroundColor: '#242424',
+                   borderTop: '1px solid #aaa',
+                   backgroundColor: '#fff',
                    height: '4.5em',
                    left: 0,
                    bottom: 0,
@@ -49,7 +50,7 @@ export default class Footer extends Component {
         <Container style={{height: "100%"}}>
           <Row style={{height: "100%"}}>
             <Col xl="1" md="2" className="my-auto">
-              <p style={{fontSize: 20}} className="text-white my-auto">
+              <p style={{fontSize: 20}} className="text-dark my-auto">
                 Socials
               </p>
             </Col>
@@ -62,7 +63,7 @@ export default class Footer extends Component {
             ))}
             <Col xl="6" md="5" className="my-auto">
               <Row className='justify-content-end'>
-                <p className="my-auto text-white">Modern Education Society's College of Engineering, Pune</p>
+                <p className="my-auto text-dark">Modern Education Society's College of Engineering, Pune</p>
               </Row>
             </Col>
           </Row>

diff --git a/client/src/routes.js b/client/src/routes.js
@@ -3,6 +3,12 @@ import Team from './views/Team';
 import Events from './views/Events';
 import Videos from './views/Videos';
 import Projects from './views/Projects';
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import {Movie, People, Today, HomeRounded as HomeIcon, DeveloperBoard} from "@material-ui/icons";
+import {faMedium} from '@fortawesome/free-brands-svg-icons'
+import gdgBlack from './assets/img/gdg_black.png'
+import {Image} from "react-bootstrap";
 
 export const RouteType = {
 	LINK: 0,
@@ -12,42 +18,49 @@ export const RouteType = {
 
 const ROUTES = [
 	{
+		icon: <HomeIcon style={{color: 'black'}} />,
 		name: 'Home',
 		path: '/',
 		component: Home,
 		type: RouteType.PAGE
 	},
 	{
+		icon: <People style={{color: 'black'}} />,
 		name: 'Team',
 		path: '/team',
 		component: Team,
 		type: RouteType.PAGE
 	},
 	{
+		icon: <Today style={{color: 'black'}} />,
 		name: 'Events',
 		path: '/events',
 		component: Events,
 		type: RouteType.PAGE
 	},
 	{
+		icon: <Movie style={{color: 'black'}} />,
 		name: 'Videos',
 		path: '/videos',
 		component: Videos,
 		type: RouteType.PAGE
 	},
 	{
+		icon: <DeveloperBoard style={{color: 'black'}} />,
 		name: 'Projects',
 		path: '/projects',
 		component: Projects,
 		type: RouteType.PAGE
 	},
 	{
+		icon: <FontAwesomeIcon style={{color: 'black', fontSize: 26}} icon={faMedium}/>,
 		name: 'Blogs',
 		path: 'https://medium.com/@dscmescoe',
 		component: null,
 		type: RouteType.LINK
 	},
 	{
+		icon: <Image src={gdgBlack} style={{width: '1.5em'}} />,
 		name: 'Community Page',
 		path: 'https://dsc.community.dev/modern-education-societys-college-of-engineering/',
 		component: null,