From 52ff126b586d2652df86ac800a356a5803ec8b56 Mon Sep 17 00:00:00 2001 From: svruddar Date: Thu, 19 Oct 2023 10:29:03 -0400 Subject: [PATCH 1/2] sidebar component with light and dark mode toggle --- proj2/frontend/src/components/Sidebar.js | 135 +++++++++++++++++++++++ proj2/frontend/src/hooks/useDarkMode.js | 21 ++++ proj2/frontend/src/redux/store.js | 11 ++ 3 files changed, 167 insertions(+) create mode 100644 proj2/frontend/src/components/Sidebar.js create mode 100644 proj2/frontend/src/hooks/useDarkMode.js create mode 100644 proj2/frontend/src/redux/store.js diff --git a/proj2/frontend/src/components/Sidebar.js b/proj2/frontend/src/components/Sidebar.js new file mode 100644 index 0000000..657eb12 --- /dev/null +++ b/proj2/frontend/src/components/Sidebar.js @@ -0,0 +1,135 @@ +import React, { useState } from "react"; +import { useDispatch, useSelector } from "react-redux"; +import { Switch } from "@headlessui/react"; +import boardIcon from "../assets/icon-board.svg"; +import useDarkMode from "../hooks/useDarkMode"; +import darkIcon from "../assets/icon-dark-theme.svg"; +import lightIcon from "../assets/icon-light-theme.svg"; + +import showSidebarIcon from "../assets/icon-show-sidebar.svg"; +import hideSidebarIcon from "../assets/icon-hide-sidebar.svg"; + +import boardsSlice from "../redux/boardsSlice"; +import AddEditBoardModal from "../modals/AddEditBoardModal"; + +function Sidebar({ isSideBarOpen, setIsSideBarOpen }) { + const dispatch = useDispatch(); + const [isBoardModalOpen, setIsBoardModalOpen] = useState(false); + const [colorTheme, setTheme] = useDarkMode(); + const [darkSide, setDarkSide] = useState( + colorTheme === "light" ? true : false + ); + + /** Toggle between light and dark mode */ + const toggleDarkMode = (checked) => { + setTheme(colorTheme); + setDarkSide(checked); + }; + + const boards = useSelector((state) => state.boards); + + const toggleSidebar = () => { + setIsSideBarOpen((curr) => !curr); + }; + + return ( +
+
+
+ + {isSideBarOpen && ( +
+

+ ALL BOARDS ({boards?.length}) +

+ +
+
+ {boards.map((board, index) => ( +
{ + dispatch(boardsSlice.actions.setBoardActive({ index })); + }} + > + {" "} +

{board.name}

+
+ ))} + +
{ + setIsBoardModalOpen(true); + }} + > + +

Create New Board

+
+
+ +
+ sun indicating light mode + + + + + + moon indicating dark mode +
+
+
+ )} + + {/* Sidebar hide/show toggle */} + {isSideBarOpen ? ( +
toggleSidebar()} + className=" flex items-center mt-2 absolute bottom-16 text-lg font-bold rounded-r-full hover:text-[#635FC7] cursor-pointer mr-6 mb-8 px-8 py-4 hover:bg-[#635fc71a] dark:hover:bg-white space-x-2 justify-center my-4 text-gray-500 " + > + side bar show/hide + {isSideBarOpen &&

Hide Sidebar

} +
+ ) : ( +
toggleSidebar()}> + showSidebarIcon +
+ )} +
+
+ + {isBoardModalOpen && ( + + )} +
+ ); +} + +export default Sidebar; diff --git a/proj2/frontend/src/hooks/useDarkMode.js b/proj2/frontend/src/hooks/useDarkMode.js new file mode 100644 index 0000000..00ee92d --- /dev/null +++ b/proj2/frontend/src/hooks/useDarkMode.js @@ -0,0 +1,21 @@ +import React, { useEffect, useState } from 'react' + +function useDarkMode() { + + const [theme, setTheme] = useState(localStorage.theme) + const colorTheme = theme === "dark" ? "light" : "dark"; + + useEffect(() => { + + const root = window.document.documentElement; + root.classList.remove(colorTheme); + root.classList.add(theme); + localStorage.setItem('theme', theme); + +}, [theme, colorTheme]); + +return [colorTheme, setTheme] + +} + +export default useDarkMode \ No newline at end of file diff --git a/proj2/frontend/src/redux/store.js b/proj2/frontend/src/redux/store.js new file mode 100644 index 0000000..0f038ac --- /dev/null +++ b/proj2/frontend/src/redux/store.js @@ -0,0 +1,11 @@ +import { configureStore } from "@reduxjs/toolkit"; +import boardsSlice from "./boardsSlice"; + + +const store = configureStore({ + reducer: { + boards: boardsSlice.reducer, + } +}) + +export default store From fcf9a537663eddad90ae55fa63382076482c6b2a Mon Sep 17 00:00:00 2001 From: svruddar Date: Thu, 19 Oct 2023 10:39:51 -0400 Subject: [PATCH 2/2] removing old sidebar functionality --- proj2/frontend/src/sidebar/Sidebar.js | 27 --------------------------- proj2/frontend/src/static/Sidebar.css | 26 -------------------------- 2 files changed, 53 deletions(-) delete mode 100644 proj2/frontend/src/sidebar/Sidebar.js delete mode 100644 proj2/frontend/src/static/Sidebar.css diff --git a/proj2/frontend/src/sidebar/Sidebar.js b/proj2/frontend/src/sidebar/Sidebar.js deleted file mode 100644 index acaf1fc..0000000 --- a/proj2/frontend/src/sidebar/Sidebar.js +++ /dev/null @@ -1,27 +0,0 @@ -import React, { Component } from 'react' -import '@fortawesome/fontawesome-free/js/fontawesome' -import '@fortawesome/fontawesome-free/css/fontawesome.css' -import '@fortawesome/fontawesome-free/js/solid' -import '@fortawesome/fontawesome-free/js/regular' -import '@fortawesome/fontawesome-free/js/brands' - -import '../static/Sidebar.css' -export default class Sidebar extends Component { - render () { - return ( -
-
-
this.props.switchPage('ApplicationPage')}> - -
-
this.props.switchPage('SearchPage')}> - -
-
this.props.switchPage('ManageResumePage')}> - -
-
-
- ) - } -} diff --git a/proj2/frontend/src/static/Sidebar.css b/proj2/frontend/src/static/Sidebar.css deleted file mode 100644 index 3509d74..0000000 --- a/proj2/frontend/src/static/Sidebar.css +++ /dev/null @@ -1,26 +0,0 @@ -.left-nav { - width: 5%; - border-top-right-radius: 16px; - border-bottom-right-radius: 16px; - background-color: white; - box-shadow: rgb(99 99 99 / 10%) -1px 0px 5px 0px; - height: 100vh; - display: flex; -} -.left-nav-item { - display: flex; - flex-direction: column; - align-content: center; - align-items: center; - justify-content: space-evenly; - height: 70vh; - margin: auto; -} -.left-nav-icon:hover { - cursor: pointer; -} - -.left-nav-icon { - font-size: 23px; - color: #2e2e2f; -} \ No newline at end of file