update Staff Page and Remove Submenu From Buttons

src/components/navbar/drawer.js

@@ -3,6 +3,7 @@ import clsx from "clsx";
 import { makeStyles } from "@material-ui/core/styles";
 import Drawer from "@material-ui/core/Drawer";
 import IconButton from "@material-ui/core/IconButton";
+import Icon from "@material-ui/core/Icon";
 import MenuIcon from "@material-ui/icons/Menu";
 import List from "@material-ui/core/List";
 import Divider from "@material-ui/core/Divider";
@@ -64,13 +65,31 @@ export default function TemporaryDrawer(props) {
           </Link>
         )}
         {props.items.map((menu_item, index) => {
+          if(menu_item.name)
+            {
+            return (
+              <div className="single_navmob">
+                <ListItemIcon className="scholaricon">
+                  <Icon>{menu_item.icon}</Icon>
+                  {/* <HomeIcon color="rgba(0,0,0,0.54)" nopadding /> */}
+                  {/* {console.log(menu_item.icon)} */}
+                </ListItemIcon>
+              <Link
+                to={menu_item.name}
+                draggable="false"
+                className="single_nav_routesmob"
+              >{menu_item.text}</Link>
+              </div>
+            );
+          } else {
           return (
             <NestedList
               menu={menu_item}
               toggleDrawer={toggleDrawer}
               anchor={anchor}
             />
           );
+          }
         })}
       </List>
       <Divider />

src/components/navbar/index.js

@@ -18,6 +18,7 @@ import ListItemText from "@material-ui/core/ListItemText";
 import HomeRoundedIcon from "@material-ui/icons/HomeRounded";
 import LocalLibraryIcon from "@material-ui/icons/LocalLibrary";
 import {HashLink} from 'react-router-hash-link';
+import { Link } from "react-router-dom";
 import MenuListComposition from "./desktop-items";
 import HomeIcon from "./homeicon";
 import TemporaryDrawer from "./drawer";
@@ -119,12 +120,25 @@ export default class Navbar extends React.Component {
                           this.state.navbar_data.data.length
                         )
                         .map((item, id) => {
-                          return (
-                            <MenuListComposition
-                              nav_head={item.text}
-                              submenu={item.submenu}
-                            />
-                          );
+                          if(item.name)
+                          {
+                            return (
+                              <div className="navhead">
+                              <Link
+                                to={item.name}
+                                draggable="false"
+                                className="single_nav_routes"
+                              >{item.text}</Link>
+                              </div>
+                            );
+                          } else {
+                            return (
+                              <MenuListComposition
+                                nav_head={item.text}
+                                submenu={item.submenu}
+                              />
+                            );
+                            }
                         })}
                     </div>
                   </>

src/components/navbar/nestedlist.js

@@ -46,6 +46,12 @@ export default function NestedList(props) {
       </ListItem>
       <Collapse in={open} timeout="auto" unmountOnExit>
         {props.menu.submenu.map((item) => {
+          if(props.menu.name)
+          {
+            return(
+                <></>
+              );
+          } 
           return (
             <Link to={item.link} draggable="false" className="nav_routes">
               <List component="div" disablePadding>

src/components/navbar/style.css

@@ -60,6 +60,61 @@
   color: #000;
   opacity: 0.9;
 }
+.navhead {
+  width: auto;
+  height: auto;
+  margin-left: 1rem;
+}
+.navhead:hover {
+  border-radius: 5px;
+  background: rgb(255, 255, 255, 0.25) !important;
+}
+.single_nav_routes { 
+  margin-top: 6px;
+  text-decoration: none;
+  color: white !important;
+  font-size: 0.875rem;
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-weight: 500;
+  line-height: 1.75;
+  letter-spacing: 0.02857em;
+  text-transform: uppercase;
+}
+.single_nav_routes:hover {
+  color: white !important;
+}
+
+.single_navmob {
+  padding-bottom: 10px;
+  padding-top: 10px;
+    display: flex;
+    font-size: 0.875rem;
+    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+    font-weight: 500;
+    line-height: 1.75;
+    letter-spacing: 0.02857em;
+}
+
+.single_nav_routesmob {
+  text-decoration: none;
+  opacity: 0.7;
+  font-weight: 500;
+  color: black;
+  font-size: 1.05rem;
+}
+.scholaricon {
+    padding-left: 17px;
+    padding-right: 55px;
+    fill: currentColor;
+    width: 1em;
+    height: 1em;
+    display: inline-block;
+    font-size: 1.5rem;
+    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    flex-shrink: 0;
+    user-select: none;
+}
+
 #home_button > button:hover {
   background-color: rgb(255, 255, 255, 0.25);
 }
@@ -73,4 +128,6 @@
 #quick_nav>a>svg{
   color: #fff;
   font-size: 24px;
-}
+}
+
+

src/components/person_card/styles.css

@@ -59,7 +59,7 @@ text-decoration: none;
   opacity: 0.8;
 }
 .text h4{
-  font-size: 1.0rem;
+  font-size: 0.99rem;
   color:#fff;
   margin-left:6%;
   margin-top: 10px;

src/json/navbar_data.json

@@ -170,6 +170,7 @@
     {
       "text": "Scholarship",
       "icon": "call",
+      "name": "scholarship",
       "submenu": [
         {
           "text": "Scholarship",
@@ -180,6 +181,7 @@
     {
       "text": "Contact Us",
       "icon": "call",
+      "name": "contactus",
       "submenu": [
         {
           "text": "Contact Us",
@@ -190,6 +192,7 @@
     {
       "text": "Virtual Academy",
       "icon": "web",
+      "name": "vla",
       "submenu": [
         {
           "text": "VLA Home",

src/pages/staff/index.js

@@ -3,37 +3,8 @@ import Navbar from "./../../components/navbar/index";
 import Footer from "./../../components/footer/index";
 import { Grid, Typography, Box } from "@material-ui/core";
 import PersonCard from "../../components/person_card/index";
-import { makeStyles } from "@material-ui/core/styles";
-
+import "./style.css";
 const staff_data = require("../../json/staff.json").officestaff;
-const registrar_data = require("../../json/staff.json").registrar;
-
-const useStyle = makeStyles({
-  title: {
-    marginTop:"5rem",
-    color: "#2e8b57",
-    textDecoration:"none",
-    display:"flex",
-    justifyContent:"center",
-  },
-  topheading : {
-    marginTop:"3rem",
-    color: "#2e8b57",
-    display:"flex",
-    justifyContent:"center",
-  },
-  topcard: {
-    marginTop:"-1rem",
-    display:"flex",
-    justifyContent:"center",
-  },
-  officestaff: {
-    textAlign:"right",
-    display:"flex",
-    justifyContent:"center",
-  },
-
-});
 
 export default function Staff() {
   useEffect(() => {
@@ -46,15 +17,15 @@ export default function Staff() {
     };
   }, []);
 
-  const classes = useStyle();
-
   return (
     <>
       <Navbar />
-          <Typography variant="h3" gutterBottom className={classes.topheading}>
+        <Typography className="main">  
+          <Typography variant="h3" gutterBottom className="topheading">
             Deputy Registrar
-          </Typography>    
-            <Typography className={classes.topcard}>
+          </Typography>  
+        </Typography>    
+            <Typography className="topcard">
               <PersonCard
                 name={"Shri. Biju Mathew"}
                 designation={"Deputy Registrar"}
@@ -65,18 +36,21 @@ export default function Staff() {
                 researchArea=""
               />
             </Typography>
-            <Typography variant="h3" gutterBottom className={classes.topheading}>
+            <Typography variant="h3" gutterBottom className="topheading2">
               Outsourced Office Staff
             </Typography>
-      <Typography gutterBottom className={classes.officestaff}>
-        <Typography gutterBottom>
-          <Grid container className={classes.head}>
+      <Typography gutterBottom className="officestaff">
+        <Typography gutterBottom className="cards">
+          <Typography gutterBottom className="carding">
+          <Grid container className="head">
+
           {staff_data.map((staff) => {
             const { name, designation, emailID, phone, src } = staff;
             return (
               <>
-                <Grid item lg={4} md={4}>
-                <PersonCard
+              <Typography gutterBottom className="card2">
+                <Grid item xs={12} md={4} className="card1">
+                  <PersonCard
                     name={name}
                     designation={designation}
                     emailID={emailID}
@@ -86,12 +60,13 @@ export default function Staff() {
                     researchArea=""
                   />
                 </Grid>
-
+                </Typography>
               </>
             );
           })}
           </Grid>
-        </Typography>
+          </Typography>
+          </Typography>
         <Grid item xs={false} sm={1} />
         </Typography>
       <div style={{ height: "90px" }}></div>

src/pages/staff/style.css

@@ -0,0 +1,61 @@
+.main {
+  display: flex;
+  justify-content: center;
+}
+.topheading {
+    padding-top:2rem;
+    color: #2e8b57;
+    display:flex;
+    justify-content:center;
+  }
+.topheading2{
+    color: #2e8b57;
+    display:flex;
+    justify-content:center;
+  }
+.topcard {
+    margin-top:-1rem;
+    display:flex;
+    justify-content:center;
+  }
+.officestaff {
+    display: flex;
+    justify-content: center;
+  }
+
+.cards {
+  height: auto;
+  display: flex;
+  justify-content: center;
+}
+
+.card2 {
+  display: flex;
+  justify-content: center;
+}
+
+@media only screen and (max-width: 800px) {
+  .topheading {
+    padding-top:4rem;
+    padding-left: 5rem;
+    display:flex;
+    justify-content:center;
+  }
+  .topheading2 {
+    padding-left: 4rem;
+    display:flex;
+    justify-content:center;
+  }
+  .card2 {
+    display: block;
+    justify-content: center;
+  }
+  .cards {
+    display: block;
+    justify-content: center;
+  }
+  .card1 {
+    width: auto;
+    height: auto;
+  }
+}