From 63c07b70893581b38649481ba3e6ff908b13d6aa Mon Sep 17 00:00:00 2001 From: Bartosz S <01169625@pw.edu.pl> Date: Tue, 13 Dec 2022 19:48:33 +0100 Subject: [PATCH 01/17] turn off eslint rule 'function-component-definition' --- .eslintrc.json | 4 +--- src/styled/subcomponents/navbar.tsx | 1 + 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 88d583f..4743237 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -48,9 +48,7 @@ } ], - "react/function-component-definition" : [ - "warn" - ], + "react/function-component-definition" : ["off"], "no-confusing-arrow": ["off"], "no-trailing-spaces": ["off"], "no-nested-ternary": ["off"], diff --git a/src/styled/subcomponents/navbar.tsx b/src/styled/subcomponents/navbar.tsx index 4d02d1b..2be85f8 100644 --- a/src/styled/subcomponents/navbar.tsx +++ b/src/styled/subcomponents/navbar.tsx @@ -13,6 +13,7 @@ interface RotatingBtnElemInterface { } export const NavbarContainer = styled.nav` + border: 2px solid red; width: calc(100% - 20px); height: ${(props) => props.isOpened === "true" ? "100vh" : "10vh"}; padding: 0px 10px; From f1529a7566bc6eaa6aed8804aa9071df7cab0d72 Mon Sep 17 00:00:00 2001 From: Bartosz S <01169625@pw.edu.pl> Date: Tue, 13 Dec 2022 21:40:42 +0100 Subject: [PATCH 02/17] started rewriting navbar --- src/components/subcomponents/navbar.tsx | 256 +++++++++--------------- 1 file changed, 91 insertions(+), 165 deletions(-) diff --git a/src/components/subcomponents/navbar.tsx b/src/components/subcomponents/navbar.tsx index 3f5d835..d937128 100644 --- a/src/components/subcomponents/navbar.tsx +++ b/src/components/subcomponents/navbar.tsx @@ -23,184 +23,110 @@ import { changeGraphicalMode, setNewToken, toggleOpeningNotifications } from "sr import { RootState } from "src/redux/mainReducer"; import logout from "src/connectionFunctions/navbar/logout"; +import styled from "styled-components"; +import { Link } from "react-router-dom"; const NavbarLogo = require("src/assets/sparkledge_logo.webp"); -type NavbarDataType = { isDropDown: boolean, - dropDownElems: { - to: string, - content: any, - callback: () => void, - }[], - isLink: boolean, - to: string, - isImage: boolean, - content: any, - callback: () => void, -}; +const NavbarItemLink = styled(Link)` + box-sizing: border-box; + + /* border: 2px solid red; */ + height: 100%; + padding: 0.8rem 1.2rem; + + display: inline-flex; + flex-direction: row; + justify-content: center; + align-items: center; + + text-decoration: none; + font-family: ${(props) => props.theme.fonts.main}; + color: ${(props) => props.theme.color}; + + font-size: 1.2rem; + + transition: 0.4s all; + + &:hover { + /* border: 2px solid white; */ + border-radius: 16px; + + background: #ffffff55; + } +`; + +const NavbarImg = styled.img` + max-height: 100%; + width: auto; +`; + +const NavbarItemBreak = styled.div` + flex-grow: 1; +`; + +const NavbarContainer2 = styled.div` + box-sizing: border-box; + + height: 5rem; + width: 100%; + + padding: 0.2rem; + + border: 2px solid blue; + + display: flex; + flex-direction: row; + + position: sticky; + top: 0; + + // this needs to change at some point + z-index: 10; + + background: ${(props) => props.theme.navBgColor}; +`; const Navbar:React.FC = () => { const [isOpened, toggleIsOpened] = useState(false); - const graphicalMode: number = useSelector((state:RootState) => state.generalData.graphicalMode); + const graphicalMode: number = useSelector((state: RootState) => state.generalData.graphicalMode); const [memoryUserId, setMemoryUserId] = useLocalStorage("u", ""); const [refreshUserId, setRefreshUserId] = useLocalStorage("u_r", ""); const dispatch = useDispatch(); - const NavbarData:NavbarDataType[][] = [ - [ - { - isDropDown: false, - dropDownElems: [], - isLink: true, - to: memoryUserId === undefined || (memoryUserId !== undefined && memoryUserId.length === 0) ? "/" : "/panel", - isImage: true, - content: NavbarLogo, - callback: () => toggleIsOpened(false), - }, - { - isDropDown: false, - dropDownElems: [], - isLink: true, - to: "/searcher", - isImage: false, - content: "Wyszukiwarka", - callback: () => toggleIsOpened(false), - }, - ], - [ - { - isDropDown: false, - dropDownElems: [], - isLink: true, - to: "/faq", - isImage: false, - content: , - callback: () => toggleIsOpened(false), - }, - { - isDropDown: false, - dropDownElems: [], - isLink: true, - to: "/about", - isImage: false, - content: , - callback: () => toggleIsOpened(false), - }, - { - isDropDown: false, - dropDownElems: [], - isLink: true, - to: memoryUserId === undefined || (memoryUserId !== undefined && memoryUserId.length === 0) ? "/signin" : "/documentUpload", - isImage: false, - content: memoryUserId === undefined || (memoryUserId !== undefined && memoryUserId.length === 0) ? "Zaloguj się" : ( - - ), - callback: () => toggleIsOpened(false), - }, - /* - { - isDropDown: false, - dropDownElems: [], - isLink: false, - to: "", - isImage: false, - content: memoryUserId !== undefined && memoryUserId.length > 0 ? ( - - ) : "noRender", - callback: () => memoryUserId !== undefined && memoryUserId.length > 0 ? dispatch(toggleOpeningNotifications()) : null, - }, */ - { - isDropDown: false, - dropDownElems: [], - isLink: true, - to: "/profile/", - isImage: false, - content: memoryUserId === undefined || (memoryUserId !== undefined && memoryUserId.length === 0) ? null : ( - - ), - callback: () => toggleIsOpened(false), - }, - /* { - isDropDown: false, - dropDownElems: [], - isLink: true, - to: "/settings/", - isImage: false, - content: memoryUserId === undefined || (memoryUserId !== undefined && memoryUserId.length === 0) ? null : ( - - ), - callback: () => toggleIsOpened(false), - }, */ - { - isDropDown: false, - dropDownElems: [], - isLink: memoryUserId === undefined || (memoryUserId !== undefined && memoryUserId.length === 0), - to: memoryUserId === undefined || (memoryUserId !== undefined && memoryUserId.length === 0) ? "/signup" : "/", - isImage: false, - content: memoryUserId === undefined || (memoryUserId !== undefined && memoryUserId.length === 0) ? "Zarejestruj się" : ( - - ), - callback: () => { - memoryUserId === undefined || (memoryUserId !== undefined && memoryUserId.length === 0) - ? toggleIsOpened(false) - : logout(memoryUserId, () => dispatch(setNewToken("")), setMemoryUserId, setRefreshUserId, toggleIsOpened); - }, - }, - { - isDropDown: false, - dropDownElems: [], - isLink: false, - to: "/", - isImage: false, - content: memoryUserId === undefined || (memoryUserId !== undefined && memoryUserId.length === 0) ? - : , - callback: () => { - dispatch(changeGraphicalMode()); - toggleIsOpened(false); - }, - }, - ], - ]; + const handleThemeChange = () => { + dispatch(changeGraphicalMode); + }; return ( - - toggleIsOpened(!isOpened)}> - - - - - - - - - - - - - - + + + + + + wyszukiwarka + + + + + + o nas + + + + zaloguj się + + + + zarejestruj się + + + + + + + ); }; From c8ae87f6b9142aa842889433ae6ab211478fcb62 Mon Sep 17 00:00:00 2001 From: Bartosz S <01169625@pw.edu.pl> Date: Tue, 13 Dec 2022 23:12:46 +0100 Subject: [PATCH 03/17] more changes to navbar --- src/components/subcomponents/navbar.tsx | 96 +++++++++++++++++-------- src/styled/main.tsx | 2 + 2 files changed, 67 insertions(+), 31 deletions(-) diff --git a/src/components/subcomponents/navbar.tsx b/src/components/subcomponents/navbar.tsx index d937128..09e274d 100644 --- a/src/components/subcomponents/navbar.tsx +++ b/src/components/subcomponents/navbar.tsx @@ -2,23 +2,9 @@ import React, { useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import { useLocalStorage } from "usehooks-ts"; -import MenuIcon from "@mui/icons-material/Menu"; -import CloseIcon from "@mui/icons-material/Close"; import LightModeIcon from "@mui/icons-material/LightMode"; import DarkModeIcon from "@mui/icons-material/DarkMode"; -import GroupIcon from "@mui/icons-material/Group"; -import LiveHelpIcon from "@mui/icons-material/LiveHelp"; -import DescriptionIcon from "@mui/icons-material/Description"; -import NotificationsActiveIcon from "@mui/icons-material/NotificationsActive"; -import AccountCircleIcon from "@mui/icons-material/AccountCircle"; -import SettingsIcon from "@mui/icons-material/Settings"; -import ExitToAppIcon from "@mui/icons-material/ExitToApp"; - -import { - NavbarContainer, NavbarAlignGroup, RespOpeningCloseBtn, RotatingBtnElem, -} from "src/styled/subcomponents/navbar"; - -import NavbarElemMap from "src/components/helperComponents/navbar/navbarElemMap"; + import { changeGraphicalMode, setNewToken, toggleOpeningNotifications } from "src/redux/actions/generalActions"; import { RootState } from "src/redux/mainReducer"; @@ -28,10 +14,20 @@ import { Link } from "react-router-dom"; const NavbarLogo = require("src/assets/sparkledge_logo.webp"); +// TODO: extract constants from styled-components +// TODO: move styled-components to separate files +// TODO: solve problem with black square below navbar +// TODO: find way to place menu expand button in top right corner +// TODO: make sure this is responsive +// TODO: ... + const NavbarItemLink = styled(Link)` box-sizing: border-box; - /* border: 2px solid red; */ + border: 1px solid transparent; + border-radius: 16px; + background: transparent; + height: 100%; padding: 0.8rem 1.2rem; @@ -45,65 +41,101 @@ const NavbarItemLink = styled(Link)` color: ${(props) => props.theme.color}; font-size: 1.2rem; + white-space: nowrap; - transition: 0.4s all; + transition: 0.2s all; &:hover { - /* border: 2px solid white; */ - border-radius: 16px; + background: ${(props) => props.theme.hoverBgPrimary}; + } +`; + +const NavbarItemButton = styled(NavbarItemLink)` + cursor: pointer; +`; + +const NavbarExpandButton = styled(NavbarItemLink)` + cursor: pointer; - background: #ffffff55; + display: none; + @media screen and (max-width: 1000px) { + display: inline-block; } + + position: sticky; + top: 0; + right: 0; `; const NavbarImg = styled.img` - max-height: 100%; - width: auto; + padding: 0.8rem 1.2rem; + height: 2rem; `; const NavbarItemBreak = styled.div` flex-grow: 1; `; -const NavbarContainer2 = styled.div` +type NavbarProps = { + isOpened: boolean; +}; + +const NavbarContainer2 = styled.div` box-sizing: border-box; height: 5rem; width: 100%; - padding: 0.2rem; + padding: 0.4rem 0.8rem; border: 2px solid blue; + @media screen and (max-width: 1000px) { + flex-direction: column; + height: ${(props) => props.isOpened ? "fit-content" : "5rem"}; + } + display: flex; flex-direction: row; + gap: 0.5rem; position: sticky; top: 0; // this needs to change at some point z-index: 10; + overflow: hidden; background: ${(props) => props.theme.navBgColor}; `; const Navbar:React.FC = () => { - const [isOpened, toggleIsOpened] = useState(false); const graphicalMode: number = useSelector((state: RootState) => state.generalData.graphicalMode); const [memoryUserId, setMemoryUserId] = useLocalStorage("u", ""); const [refreshUserId, setRefreshUserId] = useLocalStorage("u_r", ""); const dispatch = useDispatch(); - const handleThemeChange = () => { - dispatch(changeGraphicalMode); + const [isMenuExpanded, setIsMenuExpanded] = useState(false); + + const handleThemeChanged = () => { + dispatch(changeGraphicalMode()); + }; + + const handleMenuExpanded = () => { + setIsMenuExpanded(!isMenuExpanded); }; return ( - + + + = + + + wyszukiwarka @@ -122,9 +154,11 @@ const Navbar:React.FC = () => { zarejestruj się - - - + + {graphicalMode + ? + : } + ); diff --git a/src/styled/main.tsx b/src/styled/main.tsx index 9af833d..b53fd31 100644 --- a/src/styled/main.tsx +++ b/src/styled/main.tsx @@ -35,6 +35,7 @@ export const LightMode = { }, gradient404: "linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)", + hoverBgPrimary: "#e0e0e0", }; export const DarkMode = { @@ -59,6 +60,7 @@ export const DarkMode = { }, gradient404: "linear-gradient(90deg, rgba(0,102,212,1) 0%, rgba(0,176,212,1) 45%, rgba(0,212,255,1) 100%)", + hoverBgPrimary: "#272727", }; export const MainContainer = styled.section` From 32ef44077ed0f8a45337ea7214760176e5145a63 Mon Sep 17 00:00:00 2001 From: Bartosz S <01169625@pw.edu.pl> Date: Thu, 15 Dec 2022 19:51:51 +0100 Subject: [PATCH 04/17] added wrapper to NavbarItem & added functionality to hamburger menu --- src/components/subcomponents/navbar.tsx | 142 ++++++++++++++++-------- 1 file changed, 95 insertions(+), 47 deletions(-) diff --git a/src/components/subcomponents/navbar.tsx b/src/components/subcomponents/navbar.tsx index 09e274d..4115bb7 100644 --- a/src/components/subcomponents/navbar.tsx +++ b/src/components/subcomponents/navbar.tsx @@ -17,18 +17,35 @@ const NavbarLogo = require("src/assets/sparkledge_logo.webp"); // TODO: extract constants from styled-components // TODO: move styled-components to separate files // TODO: solve problem with black square below navbar -// TODO: find way to place menu expand button in top right corner // TODO: make sure this is responsive +// TODO: block scrolling when menu is expanded +// TODO: remove break in navbar when in hamurger mode // TODO: ... -const NavbarItemLink = styled(Link)` +const NavbarItemWrapper = styled.div` + box-sizing: border-box; + padding: 0.3rem 0.6rem; + + // to remove + border: 1px solid lime; + + min-height: 100%; + @media screen and (max-width: 1000px) { + min-height: 5rem; + } + + display: inline-flex; + flex-direction: row; + align-items: center; +`; + +const NavbarItem = styled.div` box-sizing: border-box; border: 1px solid transparent; border-radius: 16px; - background: transparent; - height: 100%; + /* height: 100%; */ padding: 0.8rem 1.2rem; display: inline-flex; @@ -39,32 +56,32 @@ const NavbarItemLink = styled(Link)` text-decoration: none; font-family: ${(props) => props.theme.fonts.main}; color: ${(props) => props.theme.color}; - font-size: 1.2rem; white-space: nowrap; transition: 0.2s all; + background: transparent; + &:hover { background: ${(props) => props.theme.hoverBgPrimary}; } `; -const NavbarItemButton = styled(NavbarItemLink)` +const NavbarItemButton = styled.button` cursor: pointer; `; -const NavbarExpandButton = styled(NavbarItemLink)` +const NavbarExpandButton = styled.button` cursor: pointer; + height: fit-content; + display: none; @media screen and (max-width: 1000px) { display: inline-block; + margin-left: auto; } - - position: sticky; - top: 0; - right: 0; `; const NavbarImg = styled.img` @@ -80,26 +97,29 @@ type NavbarProps = { isOpened: boolean; }; -const NavbarContainer2 = styled.div` +const NavbarContainer = styled.div` box-sizing: border-box; height: 5rem; width: 100%; + padding-inline: 0.4rem; - padding: 0.4rem 0.8rem; - + // to remove border: 2px solid blue; @media screen and (max-width: 1000px) { flex-direction: column; - height: ${(props) => props.isOpened ? "fit-content" : "5rem"}; + height: ${(props) => props.isOpened ? "100vh" : "5rem"}; + overflow: ${(props) => props.isOpened ? "scroll" : "hidden"}; + gap: 0; + scroll-behavior: contain; } display: flex; flex-direction: row; gap: 0.5rem; - position: sticky; + position: fixed; top: 0; // this needs to change at some point @@ -126,41 +146,69 @@ const Navbar:React.FC = () => { setIsMenuExpanded(!isMenuExpanded); }; - return ( - - - = - - - - - + const handleMenuHidden = () => { + setIsMenuExpanded(false); + }; - - wyszukiwarka - + return ( + + + + LOGO + + + + {isMenuExpanded ? "x" : "="} + + + + + + wyszukiwarka + + - - o nas - - - - zaloguj się - - - - zarejestruj się - - - - {graphicalMode - ? - : } - - - + + + o nas + + + + + + zarejestruj się + + + + + + zaloguj się + + + + + + TEST + + + + + + TEST + + + + + { handleThemeChanged(); handleMenuHidden(); }}> + {graphicalMode + ? + : } + + + + ); }; From cc058ed1e06ac8615d964f9bec624d8d635dccc2 Mon Sep 17 00:00:00 2001 From: Bartosz S <01169625@pw.edu.pl> Date: Fri, 16 Dec 2022 19:45:04 +0100 Subject: [PATCH 05/17] some spacing adjustements & added border to hamburger menu --- src/components/subcomponents/navbar.tsx | 28 ++++++++++++++++++------- src/styled/main.tsx | 2 ++ 2 files changed, 22 insertions(+), 8 deletions(-) diff --git a/src/components/subcomponents/navbar.tsx b/src/components/subcomponents/navbar.tsx index 4115bb7..1f2ab7a 100644 --- a/src/components/subcomponents/navbar.tsx +++ b/src/components/subcomponents/navbar.tsx @@ -24,14 +24,15 @@ const NavbarLogo = require("src/assets/sparkledge_logo.webp"); const NavbarItemWrapper = styled.div` box-sizing: border-box; - padding: 0.3rem 0.6rem; + padding: 0.3rem; // to remove - border: 1px solid lime; + /* border: 1px solid lime; */ min-height: 100%; @media screen and (max-width: 1000px) { min-height: 5rem; + border-bottom: 1px solid ${(props) => props.theme.navBottomBorderColor}; } display: inline-flex; @@ -46,7 +47,9 @@ const NavbarItem = styled.div` border-radius: 16px; /* height: 100%; */ - padding: 0.8rem 1.2rem; + /* padding: 0.8rem 1.2rem; */ + height: 100%; + padding-inline: 1rem; display: inline-flex; flex-direction: row; @@ -69,13 +72,17 @@ const NavbarItem = styled.div` `; const NavbarItemButton = styled.button` + box-sizing: border-box; + cursor: pointer; `; const NavbarExpandButton = styled.button` + box-sizing: border-box; + cursor: pointer; - height: fit-content; + aspect-ratio: 1/1; display: none; @media screen and (max-width: 1000px) { @@ -85,6 +92,8 @@ const NavbarExpandButton = styled.button` `; const NavbarImg = styled.img` + box-sizing: border-box; + padding: 0.8rem 1.2rem; height: 2rem; `; @@ -102,29 +111,32 @@ const NavbarContainer = styled.div` height: 5rem; width: 100%; - padding-inline: 0.4rem; + /* padding-inline: 0.4rem; */ // to remove - border: 2px solid blue; + /* border: 2px solid blue; */ @media screen and (max-width: 1000px) { flex-direction: column; height: ${(props) => props.isOpened ? "100vh" : "5rem"}; overflow: ${(props) => props.isOpened ? "scroll" : "hidden"}; - gap: 0; + /* gap: 0; */ + scroll-behavior: contain; } display: flex; flex-direction: row; - gap: 0.5rem; + /* gap: 0.5rem; */ position: fixed; top: 0; // this needs to change at some point z-index: 10; + overflow: hidden; + border-bottom: 1px solid ${(props) => props.theme.navBottomBorderColor}; background: ${(props) => props.theme.navBgColor}; `; diff --git a/src/styled/main.tsx b/src/styled/main.tsx index b53fd31..8814c91 100644 --- a/src/styled/main.tsx +++ b/src/styled/main.tsx @@ -36,6 +36,7 @@ export const LightMode = { gradient404: "linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)", hoverBgPrimary: "#e0e0e0", + navBottomBorderColor: "#cccccc", }; export const DarkMode = { @@ -61,6 +62,7 @@ export const DarkMode = { gradient404: "linear-gradient(90deg, rgba(0,102,212,1) 0%, rgba(0,176,212,1) 45%, rgba(0,212,255,1) 100%)", hoverBgPrimary: "#272727", + navBottomBorderColor: "#444444", }; export const MainContainer = styled.section` From c6aff68171c84984c3e420b34c71cec83ba18ac7 Mon Sep 17 00:00:00 2001 From: Bartosz S <01169625@pw.edu.pl> Date: Fri, 16 Dec 2022 20:24:55 +0100 Subject: [PATCH 06/17] solved problem with scroll in menu not returning to base position when menu is closed --- src/components/subcomponents/navbar.tsx | 44 ++++++++++++++----------- 1 file changed, 24 insertions(+), 20 deletions(-) diff --git a/src/components/subcomponents/navbar.tsx b/src/components/subcomponents/navbar.tsx index 1f2ab7a..7dc8c59 100644 --- a/src/components/subcomponents/navbar.tsx +++ b/src/components/subcomponents/navbar.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useRef, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import { useLocalStorage } from "usehooks-ts"; @@ -16,19 +16,16 @@ const NavbarLogo = require("src/assets/sparkledge_logo.webp"); // TODO: extract constants from styled-components // TODO: move styled-components to separate files + // TODO: solve problem with black square below navbar // TODO: make sure this is responsive // TODO: block scrolling when menu is expanded -// TODO: remove break in navbar when in hamurger mode // TODO: ... const NavbarItemWrapper = styled.div` box-sizing: border-box; padding: 0.3rem; - // to remove - /* border: 1px solid lime; */ - min-height: 100%; @media screen and (max-width: 1000px) { min-height: 5rem; @@ -46,8 +43,6 @@ const NavbarItem = styled.div` border: 1px solid transparent; border-radius: 16px; - /* height: 100%; */ - /* padding: 0.8rem 1.2rem; */ height: 100%; padding-inline: 1rem; @@ -100,6 +95,10 @@ const NavbarImg = styled.img` const NavbarItemBreak = styled.div` flex-grow: 1; + + @media screen and (max-width: 1000px) { + display: none; + } `; type NavbarProps = { @@ -111,24 +110,18 @@ const NavbarContainer = styled.div` height: 5rem; width: 100%; - /* padding-inline: 0.4rem; */ - - // to remove - /* border: 2px solid blue; */ @media screen and (max-width: 1000px) { flex-direction: column; height: ${(props) => props.isOpened ? "100vh" : "5rem"}; overflow: ${(props) => props.isOpened ? "scroll" : "hidden"}; - /* gap: 0; */ - scroll-behavior: contain; + /* scroll-behavior: contain; */ } display: flex; flex-direction: row; - /* gap: 0.5rem; */ - + position: fixed; top: 0; @@ -150,20 +143,31 @@ const Navbar:React.FC = () => { const [isMenuExpanded, setIsMenuExpanded] = useState(false); - const handleThemeChanged = () => { - dispatch(changeGraphicalMode()); - }; + const ref = useRef(null); const handleMenuExpanded = () => { setIsMenuExpanded(!isMenuExpanded); + // reset scroll position + if (ref && ref.current) { + ref.current.scrollTop = 0; + } }; const handleMenuHidden = () => { setIsMenuExpanded(false); + // reset scroll position + if (ref && ref.current) { + ref.current.scrollTop = 0; + } + }; + + const handleThemeChanged = () => { + dispatch(changeGraphicalMode()); + handleMenuHidden(); }; return ( - + LOGO @@ -213,7 +217,7 @@ const Navbar:React.FC = () => { - { handleThemeChanged(); handleMenuHidden(); }}> + {graphicalMode ? : } From 1075f5bf52ca2aeb1a193069043bc5751a823d26 Mon Sep 17 00:00:00 2001 From: Bartosz S <01169625@pw.edu.pl> Date: Fri, 16 Dec 2022 21:21:42 +0100 Subject: [PATCH 07/17] added titles to links --- src/components/subcomponents/navbar.tsx | 79 ++++++++++++++----------- 1 file changed, 43 insertions(+), 36 deletions(-) diff --git a/src/components/subcomponents/navbar.tsx b/src/components/subcomponents/navbar.tsx index 7dc8c59..0abfcac 100644 --- a/src/components/subcomponents/navbar.tsx +++ b/src/components/subcomponents/navbar.tsx @@ -116,7 +116,7 @@ const NavbarContainer = styled.div` height: ${(props) => props.isOpened ? "100vh" : "5rem"}; overflow: ${(props) => props.isOpened ? "scroll" : "hidden"}; - /* scroll-behavior: contain; */ + overscroll-behavior: contain; } display: flex; @@ -135,13 +135,14 @@ const NavbarContainer = styled.div` `; const Navbar:React.FC = () => { - const graphicalMode: number = useSelector((state: RootState) => state.generalData.graphicalMode); + const graphicalMode = useSelector((state: RootState) => state.generalData.graphicalMode); const [memoryUserId, setMemoryUserId] = useLocalStorage("u", ""); const [refreshUserId, setRefreshUserId] = useLocalStorage("u_r", ""); const dispatch = useDispatch(); const [isMenuExpanded, setIsMenuExpanded] = useState(false); + const [isLoggedIn, setIsLoggedIn] = useState(false); const ref = useRef(null); @@ -169,55 +170,61 @@ const Navbar:React.FC = () => { return ( - + LOGO - + {isMenuExpanded ? "x" : "="} - - - wyszukiwarka - - - - - o nas - - - - - - zarejestruj się - - - - - - zaloguj się - - - - - - TEST + + wyszukiwarka - - - TEST - - + {isLoggedIn ? ( + <> + + + zarejestruj się + + + + + + zaloguj się + + + + ) : ( + <> + + + dodaj + + + + + + wyloguj się + + + + + + ustawienia + + + + )} - + {graphicalMode ? : } From 79a9d9409e5b7ea633955f319e43871367cb96bb Mon Sep 17 00:00:00 2001 From: Bartosz S <01169625@pw.edu.pl> Date: Sat, 17 Dec 2022 12:10:04 +0100 Subject: [PATCH 08/17] moved navbar to navbar, added body-scroll-lock package, added icons to navbar --- package-lock.json | 24 +++++ package.json | 2 + src/components/main.tsx | 2 +- src/components/subcomponents/navbar.tsx | 103 +++++++++++++++------- src/components/subcomponents/template.tsx | 2 + 5 files changed, 99 insertions(+), 34 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1e6529d..87355b1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36,6 +36,7 @@ "@types/styled-components": "^5.1.23", "axios": "^0.26.0", "base-64": "^1.0.0", + "body-scroll-lock": "^4.0.0-beta.0", "framer-motion": "^7.0.0", "jwt-decode": "^3.1.2", "react": "^18.2.0", @@ -60,6 +61,7 @@ "web-vitals": "^2.1.4" }, "devDependencies": { + "@types/body-scroll-lock": "^3.1.0", "@types/enzyme": "^3.10.12", "@types/jest": "^27.5.2", "@typescript-eslint/eslint-plugin": "^5.30.5", @@ -5166,6 +5168,12 @@ "@types/node": "*" } }, + "node_modules/@types/body-scroll-lock": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@types/body-scroll-lock/-/body-scroll-lock-3.1.0.tgz", + "integrity": "sha512-3owAC4iJub5WPqRhxd8INarF2bWeQq1yQHBgYhN0XLBJMpd5ED10RrJ3aKiAwlTyL5wK7RkBD4SZUQz2AAAMdA==", + "dev": true + }, "node_modules/@types/bonjour": { "version": "3.5.10", "resolved": "https://registry.npmjs.org/@types/bonjour/-/bonjour-3.5.10.tgz", @@ -7720,6 +7728,11 @@ "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" }, + "node_modules/body-scroll-lock": { + "version": "4.0.0-beta.0", + "resolved": "https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-4.0.0-beta.0.tgz", + "integrity": "sha512-a7tP5+0Mw3YlUJcGAKUqIBkYYGlYxk2fnCasq/FUph1hadxlTRjF+gAcZksxANnaMnALjxEddmSi/H3OR8ugcQ==" + }, "node_modules/bonjour": { "version": "3.5.0", "resolved": "https://registry.npmjs.org/bonjour/-/bonjour-3.5.0.tgz", @@ -27074,6 +27087,12 @@ "@types/node": "*" } }, + "@types/body-scroll-lock": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@types/body-scroll-lock/-/body-scroll-lock-3.1.0.tgz", + "integrity": "sha512-3owAC4iJub5WPqRhxd8INarF2bWeQq1yQHBgYhN0XLBJMpd5ED10RrJ3aKiAwlTyL5wK7RkBD4SZUQz2AAAMdA==", + "dev": true + }, "@types/bonjour": { "version": "3.5.10", "resolved": "https://registry.npmjs.org/@types/bonjour/-/bonjour-3.5.10.tgz", @@ -29027,6 +29046,11 @@ } } }, + "body-scroll-lock": { + "version": "4.0.0-beta.0", + "resolved": "https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-4.0.0-beta.0.tgz", + "integrity": "sha512-a7tP5+0Mw3YlUJcGAKUqIBkYYGlYxk2fnCasq/FUph1hadxlTRjF+gAcZksxANnaMnALjxEddmSi/H3OR8ugcQ==" + }, "bonjour": { "version": "3.5.0", "resolved": "https://registry.npmjs.org/bonjour/-/bonjour-3.5.0.tgz", diff --git a/package.json b/package.json index 0b46492..1334bc9 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "@types/styled-components": "^5.1.23", "axios": "^0.26.0", "base-64": "^1.0.0", + "body-scroll-lock": "^4.0.0-beta.0", "framer-motion": "^7.0.0", "jwt-decode": "^3.1.2", "react": "^18.2.0", @@ -81,6 +82,7 @@ ] }, "devDependencies": { + "@types/body-scroll-lock": "^3.1.0", "@types/enzyme": "^3.10.12", "@types/jest": "^27.5.2", "@typescript-eslint/eslint-plugin": "^5.30.5", diff --git a/src/components/main.tsx b/src/components/main.tsx index a34b564..beda1c2 100644 --- a/src/components/main.tsx +++ b/src/components/main.tsx @@ -61,7 +61,7 @@ const Main: React.FC = () => { - + {/* */} } /> } /> diff --git a/src/components/subcomponents/navbar.tsx b/src/components/subcomponents/navbar.tsx index 0abfcac..0639d94 100644 --- a/src/components/subcomponents/navbar.tsx +++ b/src/components/subcomponents/navbar.tsx @@ -2,8 +2,14 @@ import React, { useRef, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import { useLocalStorage } from "usehooks-ts"; +import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock"; + import LightModeIcon from "@mui/icons-material/LightMode"; import DarkModeIcon from "@mui/icons-material/DarkMode"; +import AddIcon from "@mui/icons-material/Add"; +import SettingsIcon from "@mui/icons-material/Settings"; +import MenuIcon from "@mui/icons-material/Menu"; +import CloseIcon from "@mui/icons-material/Close"; import { changeGraphicalMode, setNewToken, toggleOpeningNotifications } from "src/redux/actions/generalActions"; import { RootState } from "src/redux/mainReducer"; @@ -19,7 +25,6 @@ const NavbarLogo = require("src/assets/sparkledge_logo.webp"); // TODO: solve problem with black square below navbar // TODO: make sure this is responsive -// TODO: block scrolling when menu is expanded // TODO: ... const NavbarItemWrapper = styled.div` @@ -50,6 +55,7 @@ const NavbarItem = styled.div` flex-direction: row; justify-content: center; align-items: center; + gap: 0.5rem; text-decoration: none; font-family: ${(props) => props.theme.fonts.main}; @@ -66,6 +72,13 @@ const NavbarItem = styled.div` } `; +const NavbarItemDescription = styled.div` + display: none; + @media screen and (max-width: 1000px) { + display: block; + } +`; + const NavbarItemButton = styled.button` box-sizing: border-box; @@ -81,7 +94,7 @@ const NavbarExpandButton = styled.button` display: none; @media screen and (max-width: 1000px) { - display: inline-block; + display: flex; margin-left: auto; } `; @@ -115,8 +128,6 @@ const NavbarContainer = styled.div` flex-direction: column; height: ${(props) => props.isOpened ? "100vh" : "5rem"}; overflow: ${(props) => props.isOpened ? "scroll" : "hidden"}; - - overscroll-behavior: contain; } display: flex; @@ -131,40 +142,44 @@ const NavbarContainer = styled.div` overflow: hidden; border-bottom: 1px solid ${(props) => props.theme.navBottomBorderColor}; + transition: 0.2s height; + background: ${(props) => props.theme.navBgColor}; `; const Navbar:React.FC = () => { - const graphicalMode = useSelector((state: RootState) => state.generalData.graphicalMode); + const isDarkModeOn = useSelector((state: RootState) => state.generalData.graphicalMode); const [memoryUserId, setMemoryUserId] = useLocalStorage("u", ""); const [refreshUserId, setRefreshUserId] = useLocalStorage("u_r", ""); const dispatch = useDispatch(); const [isMenuExpanded, setIsMenuExpanded] = useState(false); - const [isLoggedIn, setIsLoggedIn] = useState(false); + const [isLoggedIn, setIsLoggedIn] = useState(true); const ref = useRef(null); - const handleMenuExpanded = () => { - setIsMenuExpanded(!isMenuExpanded); + const handleMenuHidden = () => { + setIsMenuExpanded(false); // reset scroll position if (ref && ref.current) { ref.current.scrollTop = 0; } + + enableBodyScroll(document.body); }; - const handleMenuHidden = () => { - setIsMenuExpanded(false); - // reset scroll position - if (ref && ref.current) { - ref.current.scrollTop = 0; + const toggleMenu = () => { + if (isMenuExpanded) { + handleMenuHidden(); + } else { + setIsMenuExpanded(true); + disableBodyScroll(document.body); } }; const handleThemeChanged = () => { dispatch(changeGraphicalMode()); - handleMenuHidden(); }; return ( @@ -174,8 +189,8 @@ const Navbar:React.FC = () => { LOGO - - {isMenuExpanded ? "x" : "="} + + {isMenuExpanded ? : } @@ -190,34 +205,42 @@ const Navbar:React.FC = () => { {isLoggedIn ? ( <> - - zarejestruj się + + wyloguj się - - zaloguj się + + + + + dodaj dokument + - - ) : ( - <> + - - dodaj + + + + + ustawienia + - + + ) : ( + <> - - wyloguj się + + zarejestruj się - - ustawienia + + zaloguj się @@ -225,9 +248,23 @@ const Navbar:React.FC = () => { - {graphicalMode - ? - : } + {isDarkModeOn + ? ( + <> + + + tryb jasny + + + ) + : ( + <> + + + tryb ciemny + + + )} diff --git a/src/components/subcomponents/template.tsx b/src/components/subcomponents/template.tsx index c915ed9..c4c6b03 100644 --- a/src/components/subcomponents/template.tsx +++ b/src/components/subcomponents/template.tsx @@ -10,6 +10,7 @@ import { UserPanelDeleteNotification } from "src/styled/subpages/userpanel"; import { LandingSectionWrapper, LandingSectionFilter, EndingBlock } from "src/styled/subpages/welcome"; import HeadTags from "./headTags"; +import Navbar from "./navbar"; import UserNotifications from "./userNotifications"; const BackgroundPattern = require("../../assets/pattern_background5.webp"); @@ -47,6 +48,7 @@ const Template:React.FC = ({ return ( + {fallbackComponent !== undefined ? ( From 178624ad2498b3b2656cd404de76c9d508ede7ac Mon Sep 17 00:00:00 2001 From: Bartosz S <01169625@pw.edu.pl> Date: Sat, 17 Dec 2022 17:39:36 +0100 Subject: [PATCH 09/17] added login support (still needs testing) & filled links hrefs --- src/components/subcomponents/navbar.tsx | 45 +++++++++++++++---------- 1 file changed, 28 insertions(+), 17 deletions(-) diff --git a/src/components/subcomponents/navbar.tsx b/src/components/subcomponents/navbar.tsx index 0639d94..f438262 100644 --- a/src/components/subcomponents/navbar.tsx +++ b/src/components/subcomponents/navbar.tsx @@ -1,4 +1,4 @@ -import React, { useRef, useState } from "react"; +import React, { useEffect, useRef, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import { useLocalStorage } from "usehooks-ts"; @@ -24,7 +24,6 @@ const NavbarLogo = require("src/assets/sparkledge_logo.webp"); // TODO: move styled-components to separate files // TODO: solve problem with black square below navbar -// TODO: make sure this is responsive // TODO: ... const NavbarItemWrapper = styled.div` @@ -102,8 +101,9 @@ const NavbarExpandButton = styled.button` const NavbarImg = styled.img` box-sizing: border-box; - padding: 0.8rem 1.2rem; height: 2rem; + padding-inline: 1rem; + scale: 1.4; `; const NavbarItemBreak = styled.div` @@ -150,12 +150,16 @@ const NavbarContainer = styled.div` const Navbar:React.FC = () => { const isDarkModeOn = useSelector((state: RootState) => state.generalData.graphicalMode); - const [memoryUserId, setMemoryUserId] = useLocalStorage("u", ""); - const [refreshUserId, setRefreshUserId] = useLocalStorage("u_r", ""); + const [memoryUserId, setMemoryUserId] = useLocalStorage("u", ""); + const [refreshUserId, setRefreshUserId] = useLocalStorage("u_r", ""); const dispatch = useDispatch(); const [isMenuExpanded, setIsMenuExpanded] = useState(false); - const [isLoggedIn, setIsLoggedIn] = useState(true); + const [isUserLoggedIn, setIsUserLoggedIn] = useState(true); + + useEffect(() => { + setIsUserLoggedIn((memoryUserId !== undefined && memoryUserId.length !== 0)); + }, [memoryUserId]); const ref = useRef(null); @@ -169,7 +173,7 @@ const Navbar:React.FC = () => { enableBodyScroll(document.body); }; - const toggleMenu = () => { + const handleMenuToggled = () => { if (isMenuExpanded) { handleMenuHidden(); } else { @@ -182,14 +186,22 @@ const Navbar:React.FC = () => { dispatch(changeGraphicalMode()); }; + // last function in logout is for closing menu + // logout should be done with a hook + const handleUserLogedOut = () => { + logout(memoryUserId, () => dispatch(setNewToken("")), setMemoryUserId, setRefreshUserId, (x) => {}); + + handleMenuHidden(); + }; + return ( - LOGO + - + {isMenuExpanded ? : } @@ -197,21 +209,21 @@ const Navbar:React.FC = () => { - + wyszukiwarka - {isLoggedIn ? ( + {isUserLoggedIn ? ( <> - + wyloguj się - + @@ -221,7 +233,7 @@ const Navbar:React.FC = () => { - + @@ -233,13 +245,13 @@ const Navbar:React.FC = () => { ) : ( <> - + zarejestruj się - + zaloguj się @@ -267,7 +279,6 @@ const Navbar:React.FC = () => { )} - ); }; From be203e8c36bac719cb7eb51ae8504ba0b477c05d Mon Sep 17 00:00:00 2001 From: Bartosz S <01169625@pw.edu.pl> Date: Sat, 17 Dec 2022 18:13:15 +0100 Subject: [PATCH 10/17] readded onClick on links in navbar because it should close menu when link to current page is clicked --- src/components/subcomponents/navbar.tsx | 54 ++++++++++++++++++++----- 1 file changed, 45 insertions(+), 9 deletions(-) diff --git a/src/components/subcomponents/navbar.tsx b/src/components/subcomponents/navbar.tsx index f438262..71fdc7e 100644 --- a/src/components/subcomponents/navbar.tsx +++ b/src/components/subcomponents/navbar.tsx @@ -169,7 +169,7 @@ const Navbar:React.FC = () => { if (ref && ref.current) { ref.current.scrollTop = 0; } - + enableBodyScroll(document.body); }; @@ -184,6 +184,9 @@ const Navbar:React.FC = () => { const handleThemeChanged = () => { dispatch(changeGraphicalMode()); + + // not sure about that + // handleMenuHidden(); }; // last function in logout is for closing menu @@ -201,7 +204,11 @@ const Navbar:React.FC = () => { - + {isMenuExpanded ? : } @@ -209,7 +216,7 @@ const Navbar:React.FC = () => { - + wyszukiwarka @@ -217,13 +224,23 @@ const Navbar:React.FC = () => { {isUserLoggedIn ? ( <> - + wyloguj się - + @@ -233,7 +250,12 @@ const Navbar:React.FC = () => { - + @@ -245,13 +267,23 @@ const Navbar:React.FC = () => { ) : ( <> - + zarejestruj się - + zaloguj się @@ -259,7 +291,11 @@ const Navbar:React.FC = () => { )} - + {isDarkModeOn ? ( <> From fa9bb516f8b1fe583631dee36ae41138fd18f458 Mon Sep 17 00:00:00 2001 From: Bartosz S <01169625@pw.edu.pl> Date: Sat, 17 Dec 2022 23:24:35 +0100 Subject: [PATCH 11/17] moved navbar styled classes to separate file --- src/components/subcomponents/navbar.tsx | 132 ++------------ src/styled/subcomponents/navbar.tsx | 223 +++++++++++------------- 2 files changed, 117 insertions(+), 238 deletions(-) diff --git a/src/components/subcomponents/navbar.tsx b/src/components/subcomponents/navbar.tsx index 71fdc7e..d8d051a 100644 --- a/src/components/subcomponents/navbar.tsx +++ b/src/components/subcomponents/navbar.tsx @@ -14,6 +14,17 @@ import CloseIcon from "@mui/icons-material/Close"; import { changeGraphicalMode, setNewToken, toggleOpeningNotifications } from "src/redux/actions/generalActions"; import { RootState } from "src/redux/mainReducer"; +import { + NavbarContainer, + NavbarItem, + NavbarItemWrapper, + NavbarItemDescription, + NavbarItemBreak, + NavbarImg, + NavbarItemButton, + NavbarExpandButton, +} from "src/styled/subcomponents/navbar"; + import logout from "src/connectionFunctions/navbar/logout"; import styled from "styled-components"; import { Link } from "react-router-dom"; @@ -26,127 +37,6 @@ const NavbarLogo = require("src/assets/sparkledge_logo.webp"); // TODO: solve problem with black square below navbar // TODO: ... -const NavbarItemWrapper = styled.div` - box-sizing: border-box; - padding: 0.3rem; - - min-height: 100%; - @media screen and (max-width: 1000px) { - min-height: 5rem; - border-bottom: 1px solid ${(props) => props.theme.navBottomBorderColor}; - } - - display: inline-flex; - flex-direction: row; - align-items: center; -`; - -const NavbarItem = styled.div` - box-sizing: border-box; - - border: 1px solid transparent; - border-radius: 16px; - - height: 100%; - padding-inline: 1rem; - - display: inline-flex; - flex-direction: row; - justify-content: center; - align-items: center; - gap: 0.5rem; - - text-decoration: none; - font-family: ${(props) => props.theme.fonts.main}; - color: ${(props) => props.theme.color}; - font-size: 1.2rem; - white-space: nowrap; - - transition: 0.2s all; - - background: transparent; - - &:hover { - background: ${(props) => props.theme.hoverBgPrimary}; - } -`; - -const NavbarItemDescription = styled.div` - display: none; - @media screen and (max-width: 1000px) { - display: block; - } -`; - -const NavbarItemButton = styled.button` - box-sizing: border-box; - - cursor: pointer; -`; - -const NavbarExpandButton = styled.button` - box-sizing: border-box; - - cursor: pointer; - - aspect-ratio: 1/1; - - display: none; - @media screen and (max-width: 1000px) { - display: flex; - margin-left: auto; - } -`; - -const NavbarImg = styled.img` - box-sizing: border-box; - - height: 2rem; - padding-inline: 1rem; - scale: 1.4; -`; - -const NavbarItemBreak = styled.div` - flex-grow: 1; - - @media screen and (max-width: 1000px) { - display: none; - } -`; - -type NavbarProps = { - isOpened: boolean; -}; - -const NavbarContainer = styled.div` - box-sizing: border-box; - - height: 5rem; - width: 100%; - - @media screen and (max-width: 1000px) { - flex-direction: column; - height: ${(props) => props.isOpened ? "100vh" : "5rem"}; - overflow: ${(props) => props.isOpened ? "scroll" : "hidden"}; - } - - display: flex; - flex-direction: row; - - position: fixed; - top: 0; - - // this needs to change at some point - z-index: 10; - - overflow: hidden; - border-bottom: 1px solid ${(props) => props.theme.navBottomBorderColor}; - - transition: 0.2s height; - - background: ${(props) => props.theme.navBgColor}; -`; - const Navbar:React.FC = () => { const isDarkModeOn = useSelector((state: RootState) => state.generalData.graphicalMode); diff --git a/src/styled/subcomponents/navbar.tsx b/src/styled/subcomponents/navbar.tsx index 2be85f8..34c7393 100644 --- a/src/styled/subcomponents/navbar.tsx +++ b/src/styled/subcomponents/navbar.tsx @@ -1,133 +1,122 @@ import styled from "styled-components"; -interface NavbarAlignGroupInterface { - alignDir: string -} - -interface NavbarOpeningInterface { - isOpened?: string -} - -interface RotatingBtnElemInterface { - isrotated: string -} - -export const NavbarContainer = styled.nav` - border: 2px solid red; - width: calc(100% - 20px); - height: ${(props) => props.isOpened === "true" ? "100vh" : "10vh"}; - padding: 0px 10px; - background: ${(props) => props.theme.navBgColor}; - font-family: ${(props) => props.theme.fonts.main}; - color: ${(props) => props.theme.color}; - box-shadow: 0px 3px 4px rgba(0,0,0,.2); - transition: all 0.4s; - overflow-y: hidden; - position: fixed; - top: 0px; - z-index: 5; - - a{ - text-decoration: none; - color: inherit; - } - - @media screen and (min-width: 1200px){ - height: 10vh; - } +export const NavbarItemWrapper = styled.div` + box-sizing: border-box; + padding: 0.3rem; + + min-height: 100%; + @media screen and (max-width: 1000px) { + min-height: 5rem; + border-bottom: 1px solid ${(props) => props.theme.navBottomBorderColor}; + } + + display: inline-flex; + flex-direction: row; + align-items: center; `; -export const NavbarAlignGroup = styled.div` - @media screen and (min-width: 1200px){ - float: ${(props) => props.alignDir} - } +export const NavbarItem = styled.div` + box-sizing: border-box; + + border: 1px solid transparent; + border-radius: 16px; + + height: 100%; + padding-inline: 1rem; + + display: inline-flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 0.5rem; + + text-decoration: none; + font-family: ${(props) => props.theme.fonts.main}; + color: ${(props) => props.theme.color}; + font-size: 1.2rem; + white-space: nowrap; + + transition: 0.2s all; + + background: transparent; + + &:hover { + background: ${(props) => props.theme.hoverBgPrimary}; + } `; -export const NavbarElemColumn = styled.div` - height: fit-content; - z-index: 9; +export const NavbarItemDescription = styled.div` + display: none; + @media screen and (max-width: 1000px) { display: block; - margin: 0px auto 1vh; - - - @media screen and (min-width: 1200px){ - width: fit-content; - top: 0.5vh; - display: inline-block; - vertical-align: top; - margin: 0px 5px; - } + } `; -export const NavbarElem = styled.div` - width: calc(80% - 40px); - padding: 10px 20px; - height: calc(9vh - 20px); - line-height: calc(9vh - 20px); - position: relative; - top: 0.5vh; - display: block; - margin: 0px auto 1vh; - border-radius: 10px; - text-align: center; - font-size: 0.95em; - letter-spacing: 0.04em; - text-shadow: 3px 3px 4px rgba(0,0,0,.05); - transition: all 0.4s; - cursor: pointer; - background: ${(props) => props.theme.navElemBgColor}; - - &:hover{ - filter: brightness(70%); - } - - @media screen and (min-width: 425px){ - font-size: 0.95em; - } - - @media screen and (min-width: 1024px){ - font-size: 1.4em; - } - - @media screen and (min-width: 1200px){ - font-size: 1.1em; - width: fit-content; - top: 0.5vh; - display: inline-block; - vertical-align: top; - margin: 0px 5px; - } +export const NavbarItemButton = styled.button` + box-sizing: border-box; + + cursor: pointer; +`; + +export const NavbarExpandButton = styled.button` + box-sizing: border-box; + + cursor: pointer; + + aspect-ratio: 1/1; + + display: none; + @media screen and (max-width: 1000px) { + display: flex; + margin-left: auto; + } `; -export const NavbarElemImg = styled.img` - max-height: 100%; - width: auto; +export const NavbarImg = styled.img` + box-sizing: border-box; + + height: 2rem; + padding-inline: 1rem; + scale: 1.4; `; -export const RespOpeningCloseBtn = styled.div` - width: fit-content; - position: absolute; - color: ${(props) => props.theme.color}; - right: 5px; - font-size: 4vh; - top: 3vh; - @media screen and (min-width: 425px){ - top: 3vh; - right: 10px; - font-size: 5vh; - } - - @media screen and (min-width: 1200px){ - display: none; - } +export const NavbarItemBreak = styled.div` + flex-grow: 1; + + @media screen and (max-width: 1000px) { + display: none; + } `; -export const RotatingBtnElem = styled.div` - transition: all 0.4s; - width: fit-content; - height: fit-content; - transition: all 0.4s; - ${(props) => props.isrotated === "true" ? ` - transform: rotateX(90deg) scale(0); - font-size: 0;` : ""} +type NavbarProps = { + isOpened: boolean; +}; + +export const NavbarContainer = styled.div` + box-sizing: border-box; + + height: 5rem; + width: 100%; + + @media screen and (max-width: 1000px) { + flex-direction: column; + height: ${(props) => props.isOpened ? "100vh" : "5rem"}; + overflow: ${(props) => props.isOpened ? "scroll" : "hidden"}; + } + + display: flex; + flex-direction: row; + + position: fixed; + top: 0; + + // this needs to change at some point + z-index: 10; + + overflow: hidden; + border-bottom: 1px solid ${(props) => props.theme.navBottomBorderColor}; + + transition: 0.2s height; + + background: ${(props) => props.theme.navBgColor}; `; From 71abe0876998d6bbbd7578aef84e68eaedf4e65c Mon Sep 17 00:00:00 2001 From: Bartosz S <01169625@pw.edu.pl> Date: Sat, 17 Dec 2022 23:42:03 +0100 Subject: [PATCH 12/17] removed redundant files & added small padding to LandingSectionFilter component --- .../navbar/navbarElemComponent.tsx | 56 ------------------- .../helperComponents/navbar/navbarElemMap.tsx | 26 --------- src/components/subcomponents/navbar.tsx | 16 +++++- src/styled/subpages/welcome.tsx | 1 + 4 files changed, 14 insertions(+), 85 deletions(-) delete mode 100644 src/components/helperComponents/navbar/navbarElemComponent.tsx delete mode 100644 src/components/helperComponents/navbar/navbarElemMap.tsx diff --git a/src/components/helperComponents/navbar/navbarElemComponent.tsx b/src/components/helperComponents/navbar/navbarElemComponent.tsx deleted file mode 100644 index f3ff6b9..0000000 --- a/src/components/helperComponents/navbar/navbarElemComponent.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import React, { useState } from "react"; -import { Link } from "react-router-dom"; - -import ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp"; -import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown"; - -import { NavbarElemColumn, NavbarElem, NavbarElemImg } from "src/styled/subcomponents/navbar"; - -interface NavbarElemComponentInterface { - isDropDown: boolean, - dropDownElems: { - to: string, - content: any, - callback: () => void, - }[], isLink: boolean, to: string, isImage: boolean, content: any, callback: () => void -} - -const NavbarElemComponent:React.FC = ({ - isDropDown, - dropDownElems, - isLink, to, isImage, content, callback, -}: NavbarElemComponentInterface) => { - const [isDropOpened, toggleIsDropOpened] = useState(false); - return content === "noRender" ? null : isLink ? ( - - {}}> - {isImage === true ? : content} - {isDropDown === true ? : null} - - - ) : isDropDown ? ( - - { if (callback !== undefined) callback; toggleIsDropOpened(!isDropOpened); }}> - {isImage === true ? : content} - {isDropDown === true ? isDropOpened - ? - : : null} - - { - dropDownElems.map((elem) => ( - - { if (elem.callback !== undefined) elem.callback; toggleIsDropOpened(!isDropOpened); }}> - {elem.content} - - - )) - } - - ) : ( - {}}> - {isImage === true ? : content} - - ); -}; - -export default NavbarElemComponent; diff --git a/src/components/helperComponents/navbar/navbarElemMap.tsx b/src/components/helperComponents/navbar/navbarElemMap.tsx deleted file mode 100644 index e045437..0000000 --- a/src/components/helperComponents/navbar/navbarElemMap.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from "react"; -import { Link } from "react-router-dom"; - -import ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp"; -import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown"; - -import { NavbarElem, NavbarElemImg } from "src/styled/subcomponents/navbar"; -import NavbarElemComponent from "./navbarElemComponent"; - -interface NavbarElemMapInterface { - data: { isDropDown: boolean, - dropDownElems: { - to: string, - content: any, - callback: () => void, - }[], isLink: boolean, to: string, isImage: boolean, content: any, callback: () => void }[], - groupName: string -} - -const NavbarElemMap:React.FC = ({ data, groupName } : NavbarElemMapInterface) => ( - <> - {data.map((elem, ind) => elem.content !== null ? : null)} - -); - -export default NavbarElemMap; diff --git a/src/components/subcomponents/navbar.tsx b/src/components/subcomponents/navbar.tsx index d8d051a..f20d79e 100644 --- a/src/components/subcomponents/navbar.tsx +++ b/src/components/subcomponents/navbar.tsx @@ -90,7 +90,12 @@ const Navbar:React.FC = () => { return ( - + @@ -106,7 +111,12 @@ const Navbar:React.FC = () => { - + wyszukiwarka @@ -128,7 +138,7 @@ const Navbar:React.FC = () => { diff --git a/src/styled/subpages/welcome.tsx b/src/styled/subpages/welcome.tsx index 7845d2c..1803dbb 100644 --- a/src/styled/subpages/welcome.tsx +++ b/src/styled/subpages/welcome.tsx @@ -40,6 +40,7 @@ export const LandingSectionWrapper = styled.section` `; export const LandingSectionFilter = styled.section` + padding-top: 2rem; width: 100%; min-height: ${(props) => props.minheight !== undefined ? `${props.minheight}vh !important` : "inherit"}; height: fit-content; From ef64faa1945383926f1555fd561dbffdd9e3ac5e Mon Sep 17 00:00:00 2001 From: Bartosz S <01169625@pw.edu.pl> Date: Sat, 17 Dec 2022 23:53:31 +0100 Subject: [PATCH 13/17] added Template to Welcome page --- src/components/subpages/welcome.tsx | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/components/subpages/welcome.tsx b/src/components/subpages/welcome.tsx index a3831c4..8127c22 100644 --- a/src/components/subpages/welcome.tsx +++ b/src/components/subpages/welcome.tsx @@ -1,21 +1,21 @@ -import React, { Suspense } from "react"; +import React from "react"; -import { MainContainer, Preloader } from "src/styled/main"; -import HeadTags from "src/components/subcomponents/headTags"; +import { Preloader } from "src/styled/main"; +import Template from "../subcomponents/template"; const LandingComponent = React.lazy(() => import("../helperComponents/welcome/landingComponent")); const DescribeComponent = React.lazy(() => import("../helperComponents/welcome/describeComponents")); const FooterComponent = React.lazy(() => import("../helperComponents/welcome/footerComponent")); const Welcome:React.FC = () => ( - - - Ładowanie...}> - - - - - + ); export default Welcome; From 67dcfb0e3399876d59a2fddea7a2c868f43b5e57 Mon Sep 17 00:00:00 2001 From: Bartosz S <01169625@pw.edu.pl> Date: Sun, 18 Dec 2022 00:04:52 +0100 Subject: [PATCH 14/17] changed placement of right icon in navbar --- src/styled/subcomponents/navbar.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/styled/subcomponents/navbar.tsx b/src/styled/subcomponents/navbar.tsx index 34c7393..0f4a87b 100644 --- a/src/styled/subcomponents/navbar.tsx +++ b/src/styled/subcomponents/navbar.tsx @@ -10,6 +10,10 @@ export const NavbarItemWrapper = styled.div` border-bottom: 1px solid ${(props) => props.theme.navBottomBorderColor}; } + &:last-child { + padding-right: 0.6rem; + } + display: inline-flex; flex-direction: row; align-items: center; From 1fea0f4343e3cf271910ec2b9bb18bd79f185457 Mon Sep 17 00:00:00 2001 From: Bartosz S <01169625@pw.edu.pl> Date: Sun, 18 Dec 2022 12:41:26 +0100 Subject: [PATCH 15/17] remove small padding in LandingSectionFilter because it causes problems & removed duplicated footer --- src/components/subpages/welcome.tsx | 1 - src/styled/subpages/welcome.tsx | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/subpages/welcome.tsx b/src/components/subpages/welcome.tsx index 8127c22..1de1d0e 100644 --- a/src/components/subpages/welcome.tsx +++ b/src/components/subpages/welcome.tsx @@ -14,7 +14,6 @@ const Welcome:React.FC = () => ( > - ); diff --git a/src/styled/subpages/welcome.tsx b/src/styled/subpages/welcome.tsx index 1803dbb..c91824b 100644 --- a/src/styled/subpages/welcome.tsx +++ b/src/styled/subpages/welcome.tsx @@ -40,7 +40,7 @@ export const LandingSectionWrapper = styled.section` `; export const LandingSectionFilter = styled.section` - padding-top: 2rem; + /* padding-top: 2rem; */ width: 100%; min-height: ${(props) => props.minheight !== undefined ? `${props.minheight}vh !important` : "inherit"}; height: fit-content; From c06bf1f6f44f2c3f9837313f9af80b962b79eb93 Mon Sep 17 00:00:00 2001 From: Bartosz S <01169625@pw.edu.pl> Date: Wed, 21 Dec 2022 17:33:11 +0100 Subject: [PATCH 16/17] adjusted colors, spacing, icons & solve issue with menu flicking when user is logged out --- src/components/subcomponents/navbar.tsx | 62 +++++++++++++------------ src/styled/main.tsx | 2 +- src/styled/subcomponents/navbar.tsx | 18 +++---- 3 files changed, 44 insertions(+), 38 deletions(-) diff --git a/src/components/subcomponents/navbar.tsx b/src/components/subcomponents/navbar.tsx index f20d79e..cb12e95 100644 --- a/src/components/subcomponents/navbar.tsx +++ b/src/components/subcomponents/navbar.tsx @@ -7,12 +7,13 @@ import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock"; import LightModeIcon from "@mui/icons-material/LightMode"; import DarkModeIcon from "@mui/icons-material/DarkMode"; import AddIcon from "@mui/icons-material/Add"; -import SettingsIcon from "@mui/icons-material/Settings"; +import AccountCircleIcon from "@mui/icons-material/AccountCircle"; import MenuIcon from "@mui/icons-material/Menu"; import CloseIcon from "@mui/icons-material/Close"; import { changeGraphicalMode, setNewToken, toggleOpeningNotifications } from "src/redux/actions/generalActions"; import { RootState } from "src/redux/mainReducer"; +import { useNavigate, Link, Navigate } from "react-router-dom"; import { NavbarContainer, @@ -26,16 +27,11 @@ import { } from "src/styled/subcomponents/navbar"; import logout from "src/connectionFunctions/navbar/logout"; -import styled from "styled-components"; -import { Link } from "react-router-dom"; +import { AccountCircle } from "@mui/icons-material"; const NavbarLogo = require("src/assets/sparkledge_logo.webp"); -// TODO: extract constants from styled-components -// TODO: move styled-components to separate files - -// TODO: solve problem with black square below navbar -// TODO: ... +const isTokenPresent = (token: string) => token !== undefined && token.length !== 0; const Navbar:React.FC = () => { const isDarkModeOn = useSelector((state: RootState) => state.generalData.graphicalMode); @@ -45,10 +41,12 @@ const Navbar:React.FC = () => { const dispatch = useDispatch(); const [isMenuExpanded, setIsMenuExpanded] = useState(false); - const [isUserLoggedIn, setIsUserLoggedIn] = useState(true); + const [isUserLoggedIn, setIsUserLoggedIn] = useState(isTokenPresent(memoryUserId)); + + const navigate = useNavigate(); useEffect(() => { - setIsUserLoggedIn((memoryUserId !== undefined && memoryUserId.length !== 0)); + setIsUserLoggedIn(isTokenPresent(memoryUserId)); }, [memoryUserId]); const ref = useRef(null); @@ -82,9 +80,16 @@ const Navbar:React.FC = () => { // last function in logout is for closing menu // logout should be done with a hook const handleUserLogedOut = () => { - logout(memoryUserId, () => dispatch(setNewToken("")), setMemoryUserId, setRefreshUserId, (x) => {}); - - handleMenuHidden(); + logout( + memoryUserId, + () => dispatch(setNewToken("")), + setMemoryUserId, + setRefreshUserId, + (x) => { + handleMenuHidden(); + navigate("/"); + }, + ); }; return ( @@ -108,8 +113,6 @@ const Navbar:React.FC = () => { - - { + + {isUserLoggedIn ? ( <> - - - wyloguj się - - - { - + - ustawienia + profil + + + + wyloguj się + + ) : ( <> diff --git a/src/styled/main.tsx b/src/styled/main.tsx index 8814c91..d8d4592 100644 --- a/src/styled/main.tsx +++ b/src/styled/main.tsx @@ -62,7 +62,7 @@ export const DarkMode = { gradient404: "linear-gradient(90deg, rgba(0,102,212,1) 0%, rgba(0,176,212,1) 45%, rgba(0,212,255,1) 100%)", hoverBgPrimary: "#272727", - navBottomBorderColor: "#444444", + navBottomBorderColor: "#2f2f2f", }; export const MainContainer = styled.section` diff --git a/src/styled/subcomponents/navbar.tsx b/src/styled/subcomponents/navbar.tsx index 0f4a87b..27684e3 100644 --- a/src/styled/subcomponents/navbar.tsx +++ b/src/styled/subcomponents/navbar.tsx @@ -2,12 +2,13 @@ import styled from "styled-components"; export const NavbarItemWrapper = styled.div` box-sizing: border-box; - padding: 0.3rem; + padding: 0.6rem 0.3rem; min-height: 100%; - @media screen and (max-width: 1000px) { + @media screen and (max-width: 768px) { min-height: 5rem; border-bottom: 1px solid ${(props) => props.theme.navBottomBorderColor}; + padding: 0.6rem; } &:last-child { @@ -22,7 +23,6 @@ export const NavbarItemWrapper = styled.div` export const NavbarItem = styled.div` box-sizing: border-box; - border: 1px solid transparent; border-radius: 16px; height: 100%; @@ -51,26 +51,28 @@ export const NavbarItem = styled.div` export const NavbarItemDescription = styled.div` display: none; - @media screen and (max-width: 1000px) { + @media screen and (max-width: 768px) { display: block; } `; export const NavbarItemButton = styled.button` box-sizing: border-box; + border: 1px solid transparent; cursor: pointer; `; export const NavbarExpandButton = styled.button` box-sizing: border-box; + border: 1px solid transparent; cursor: pointer; aspect-ratio: 1/1; display: none; - @media screen and (max-width: 1000px) { + @media screen and (max-width: 768px) { display: flex; margin-left: auto; } @@ -80,14 +82,14 @@ export const NavbarImg = styled.img` box-sizing: border-box; height: 2rem; - padding-inline: 1rem; + margin-inline: 1rem; scale: 1.4; `; export const NavbarItemBreak = styled.div` flex-grow: 1; - @media screen and (max-width: 1000px) { + @media screen and (max-width: 768px) { display: none; } `; @@ -102,7 +104,7 @@ export const NavbarContainer = styled.div` height: 5rem; width: 100%; - @media screen and (max-width: 1000px) { + @media screen and (max-width: 768px) { flex-direction: column; height: ${(props) => props.isOpened ? "100vh" : "5rem"}; overflow: ${(props) => props.isOpened ? "scroll" : "hidden"}; From 42ea5ea5ac013bfa618d8a3365829dc66fe1887a Mon Sep 17 00:00:00 2001 From: Bartosz S <01169625@pw.edu.pl> Date: Sun, 25 Dec 2022 03:29:51 +0100 Subject: [PATCH 17/17] added commented style reset in main css file --- src/index.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/index.css b/src/index.css index d817ba3..5039eca 100644 --- a/src/index.css +++ b/src/index.css @@ -1,6 +1,13 @@ @import url('https://fonts.googleapis.com/css2?family=Mohave:wght@500&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Mohave:wght@700&display=swap'); +/* style reset */ +/* *, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} */ + body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',