Skip to content

Commit

Permalink
Merge pull request #240 from jyotivakare33/#234/sidebar-component
Browse files Browse the repository at this point in the history 
separate sidebar componenet
  • Loading branch information
@Tess-Vanta
Tess-Vanta authored Mar 25, 2022
2 parents 9eddde0 + 4c59bb0 commit 3f6ad48
Show file tree
Hide file tree
Showing 2 changed files with 139 additions and 125 deletions.
127 changes: 2 additions & 125 deletions Frontend/src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,21 +8,14 @@ import Loader from "./LoadingScreen";
import Movies from "./movies";
import Ideas from "./ideas";
import Diary from "./diary";
import { NavLink } from "react-router-dom";
import TaskIcon from "@mui/icons-material/Task";
import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
import MenuBookIcon from "@mui/icons-material/MenuBook";
import CollectionsBookmarkIcon from "@mui/icons-material/CollectionsBookmark";
import EditIcon from "@mui/icons-material/Edit";
import { usercontext } from "./Context/usercontext";
import LogoutIcon from "@mui/icons-material/Logout";
import { getRequest, postRequest, putRequest } from './axiosClient';
import Modal from "react-modal";
import ConfettiCeleb from "./ConfettiCeleb";
import MaintenanceImg from "./CSSComponents/maintenance.svg";
import HowToUse from "./HowToUse";
import Bookstoread from "./booksToRead";
import LocalLibraryIcon from "@mui/icons-material/LocalLibrary";
import Sidebar from "./Components/Sidebar";

Modal.setAppElement("#root");

Expand Down Expand Up @@ -209,123 +202,7 @@ function App() {
) : (
<div>
{" "}
<div className="sidebar">
{/* <NavLink to="/Profile" className="barelement" activeClassName="selected">
<AccountCircleIcon />
&nbsp; &nbsp; Profile
</NavLink>*/}
<div className="quotearea">
"{userquote}"<br />
<EditIcon className="editbutton" onClick={toggleModal} />
</div>
<NavLink
to="/TasksandProgress"
className={({ isActive }) =>
`link ${
isActive
? "selected"
: // Couldn't do this before!
"barelement"
}`
}
>
<TaskIcon style={{ height: "2.8vh", marginRight: "1vw" }} />
Tasks and Progress
</NavLink>
{/* <NavLink to="/Performancegraphs" className="barelement" activeClassName="selected">
<ShowChartIcon/> &nbsp; &nbsp;Performance Graphs
</NavLink>*/}
<NavLink
to="/movieslist"
className={({ isActive }) =>
`link ${
isActive
? "selected"
: // Couldn't do this before!
"barelement"
}`
}
>
<FormatListBulletedIcon
style={{ height: "2.8vh", marginRight: "1vw" }}
/>{" "}
Movies to Watch
</NavLink>
<NavLink
to="/diary"
className={({ isActive }) =>
`link ${
isActive
? "selected"
: // Couldn't do this before!
"barelement"
}`
}
>
<MenuBookIcon
style={{ height: "2.8vh", marginRight: "1vw" }}
/>{" "}
Personal Diary <br />
</NavLink>
<NavLink
to="/ideasnotes"
className={({ isActive }) =>
`link ${
isActive
? "selected"
: // Couldn't do this before!
"barelement"
}`
}
>
<CollectionsBookmarkIcon
style={{ height: "2.8vh", marginRight: "1vw" }}
/>{" "}
Ideas and Notes <br />
</NavLink>
<NavLink
to="/bookstoread"
className={({ isActive }) =>
`link ${
isActive
? "selected"
: // Couldn't do this before!
"barelement"
}`
}
>
<LocalLibraryIcon
style={{ height: "2.8vh", marginRight: "1vw" }}
/>{" "}
Books to Read <br />
</NavLink>
{/* <NavLink
to="/howtouse"
className={({ isActive }) =>
`link ${
isActive
? "selected"
: // Couldn't do this before!
"barelement"
}`
}
>
<ListAltIcon
style={{ height: "2.8vh", marginRight: "1vw" }}
/>{" "}
How To Use <br />
</NavLink> */}
<div
className="logout"
onClick={logout}
style={{ fontSize: "2.1vh" }}
>
<LogoutIcon
style={{ height: "2.8vh", marginRight: "1vw" }}
/>{" "}
Log Out{" "}
</div>
</div>
<Sidebar />
<div>
<Modal
isOpen={isHowToUseModal}
Expand Down
137 changes: 137 additions & 0 deletions Frontend/src/Components/Sidebar/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
import EditIcon from "@mui/icons-material/Edit";
import { NavLink } from "react-router-dom";
import TaskIcon from "@mui/icons-material/Task";
import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
import MenuBookIcon from "@mui/icons-material/MenuBook";
import CollectionsBookmarkIcon from "@mui/icons-material/CollectionsBookmark";
import LogoutIcon from "@mui/icons-material/Logout";
import LocalLibraryIcon from "@mui/icons-material/LocalLibrary";
import { putRequest } from "../../axiosClient";

const Sidebar = ({
userquote,
toggleModal,
setlogout,
setloginstatus,
setloading,
}) => {
const logout = () => {
setlogout(true);
setloginstatus(true);
setloading(true);
putRequest("logout", { status: true }).then((response) => {
setloginstatus(true);
setloading(false);
});
};
return (
<div className="sidebar">
{/* <NavLink to="/Profile" className="barelement" activeClassName="selected">
<AccountCircleIcon />
&nbsp; &nbsp; Profile
</NavLink>*/}
<div className="quotearea">
"{userquote}"<br />
<EditIcon className="editbutton" onClick={toggleModal} />
</div>
<NavLink
to="/TasksandProgress"
className={({ isActive }) =>
`link ${
isActive
? "selected"
: // Couldn't do this before!
"barelement"
}`
}
>
<TaskIcon style={{ height: "2.8vh", marginRight: "1vw" }} />
Tasks and Progress
</NavLink>
{/* <NavLink to="/Performancegraphs" className="barelement" activeClassName="selected">
<ShowChartIcon/> &nbsp; &nbsp;Performance Graphs
</NavLink>*/}
<NavLink
to="/movieslist"
className={({ isActive }) =>
`link ${
isActive
? "selected"
: // Couldn't do this before!
"barelement"
}`
}
>
<FormatListBulletedIcon
style={{ height: "2.8vh", marginRight: "1vw" }}
/>{" "}
Movies to Watch
</NavLink>
<NavLink
to="/diary"
className={({ isActive }) =>
`link ${
isActive
? "selected"
: // Couldn't do this before!
"barelement"
}`
}
>
<MenuBookIcon style={{ height: "2.8vh", marginRight: "1vw" }} />{" "}
Personal Diary <br />
</NavLink>
<NavLink
to="/ideasnotes"
className={({ isActive }) =>
`link ${
isActive
? "selected"
: // Couldn't do this before!
"barelement"
}`
}
>
<CollectionsBookmarkIcon
style={{ height: "2.8vh", marginRight: "1vw" }}
/>{" "}
Ideas and Notes <br />
</NavLink>
<NavLink
to="/bookstoread"
className={({ isActive }) =>
`link ${
isActive
? "selected"
: // Couldn't do this before!
"barelement"
}`
}
>
<LocalLibraryIcon style={{ height: "2.8vh", marginRight: "1vw" }} />{" "}
Books to Read <br />
</NavLink>
{/* <NavLink
to="/howtouse"
className={({ isActive }) =>
`link ${
isActive
? "selected"
: // Couldn't do this before!
"barelement"
}`
}
>
<ListAltIcon
style={{ height: "2.8vh", marginRight: "1vw" }}
/>{" "}
How To Use <br />
</NavLink> */}
<div className="logout" onClick={logout} style={{ fontSize: "2.1vh" }}>
<LogoutIcon style={{ height: "2.8vh", marginRight: "1vw" }} /> Log Out{" "}
</div>
</div>
);
};

export default Sidebar;

0 comments on commit 3f6ad48

Please sign in to comment.