diff options
Diffstat (limited to 'public/projects/react-small-apps/apps/todos/src/components/layout')
9 files changed, 183 insertions, 0 deletions
diff --git a/public/projects/react-small-apps/apps/todos/src/components/layout/Footer/Footer.js b/public/projects/react-small-apps/apps/todos/src/components/layout/Footer/Footer.js new file mode 100644 index 0000000..8e5dc73 --- /dev/null +++ b/public/projects/react-small-apps/apps/todos/src/components/layout/Footer/Footer.js @@ -0,0 +1,15 @@ +import "./Footer.scss"; + +function Footer() { + return ( + <footer className="footer"> + <div className="container"> + <p className="copyright"> + React Redux ToDos. MIT 2021. Armand Philippot. + </p> + </div> + </footer> + ); +} + +export default Footer; diff --git a/public/projects/react-small-apps/apps/todos/src/components/layout/Footer/Footer.scss b/public/projects/react-small-apps/apps/todos/src/components/layout/Footer/Footer.scss new file mode 100644 index 0000000..eb34fd9 --- /dev/null +++ b/public/projects/react-small-apps/apps/todos/src/components/layout/Footer/Footer.scss @@ -0,0 +1,8 @@ +.footer { + text-align: center; + padding: 1rem 0; +} + +.copyright { + font-size: 0.9rem; +} diff --git a/public/projects/react-small-apps/apps/todos/src/components/layout/Header/Header.js b/public/projects/react-small-apps/apps/todos/src/components/layout/Header/Header.js new file mode 100644 index 0000000..75ecf8b --- /dev/null +++ b/public/projects/react-small-apps/apps/todos/src/components/layout/Header/Header.js @@ -0,0 +1,39 @@ +import { useSelector } from "react-redux"; +import UserOptions from "./UserOptions/UserOptions"; +import "./Header.scss"; +import { useEffect, useRef, useState } from "react"; +import { useLocation } from "react-router"; + +function Header() { + const [isExpanded, setIsExpanded] = useState(false); + const currentUser = useSelector((state) => state.auth.currentUser); + const headerRef = useRef(null); + const location = useLocation(); + + useEffect(() => { + setIsExpanded(false); + }, [location.pathname]); + + const closeModal = (e) => { + if (!headerRef.current.contains(e.relatedTarget)) setIsExpanded(false); + }; + + return ( + <header ref={headerRef} className="header" onBlur={closeModal}> + <div className="container"> + <h1 className="branding">ToDos App</h1> + {currentUser ? ( + <UserOptions + username={currentUser.username} + isExpanded={isExpanded} + setIsExpanded={setIsExpanded} + /> + ) : ( + "" + )} + </div> + </header> + ); +} + +export default Header; diff --git a/public/projects/react-small-apps/apps/todos/src/components/layout/Header/Header.scss b/public/projects/react-small-apps/apps/todos/src/components/layout/Header/Header.scss new file mode 100644 index 0000000..e1b0b27 --- /dev/null +++ b/public/projects/react-small-apps/apps/todos/src/components/layout/Header/Header.scss @@ -0,0 +1,18 @@ +@use "../../../sass/abstracts/variables" as var; + +.header { + border-bottom: 1px solid var.$primary-color; + + .container { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: space-between; + padding: 1rem 0; + position: relative; + } +} + +.branding { + color: var.$primary-color; +} diff --git a/public/projects/react-small-apps/apps/todos/src/components/layout/Header/UserOptions/UserOptions.js b/public/projects/react-small-apps/apps/todos/src/components/layout/Header/UserOptions/UserOptions.js new file mode 100644 index 0000000..92e8687 --- /dev/null +++ b/public/projects/react-small-apps/apps/todos/src/components/layout/Header/UserOptions/UserOptions.js @@ -0,0 +1,38 @@ +import { Link } from "react-router-dom"; +import { Button } from "../../../forms"; +import "./UserOptions.scss"; + +function UserOptions({ username, isExpanded, setIsExpanded }) { + const displayUserOptions = () => { + return ( + <nav className="nav nav--user"> + <ul className="nav__list"> + <li className="nav__item"> + <Link to="/account" className="nav__link"> + Account + </Link> + </li> + <li className="nav__item"> + <Link to="/logout" className="nav__link"> + Logout + </Link> + </li> + </ul> + </nav> + ); + }; + + return ( + <> + <Button + modifiers={["user"]} + onClickHandler={() => setIsExpanded(!isExpanded)} + > + {username} + </Button> + {isExpanded ? displayUserOptions() : ""} + </> + ); +} + +export default UserOptions; diff --git a/public/projects/react-small-apps/apps/todos/src/components/layout/Header/UserOptions/UserOptions.scss b/public/projects/react-small-apps/apps/todos/src/components/layout/Header/UserOptions/UserOptions.scss new file mode 100644 index 0000000..bb98c6a --- /dev/null +++ b/public/projects/react-small-apps/apps/todos/src/components/layout/Header/UserOptions/UserOptions.scss @@ -0,0 +1,50 @@ +@use "../../../../sass/abstracts/mixins" as mix; +@use "../../../../sass/abstracts/placeholders"; +@use "../../../../sass/abstracts/variables" as var; + +.nav { + &__list { + @extend %list-reset; + } + + &--user { + border: 1px solid var.$primary-color; + box-shadow: 0 2px 3px 0 var.$shadow-color; + position: absolute; + top: 100%; + right: 0; + + &::before { + content: ""; + display: block; + position: absolute; + top: -1.15rem; + left: calc(50% - 1.15rem / 2); + @include mix.triangle(1.2rem, var.$primary-color, up); + } + + &::after { + content: ""; + display: block; + position: absolute; + top: -1rem; + left: calc(50% - 1rem / 2); + @include mix.triangle(1rem, var.$background-color, up); + } + } + + &--user & { + &__link { + display: block; + padding: 0.5rem 1rem; + background: var.$background-color; + + &:focus { + background: var.$primary-color; + color: var.$foreground-color-alt; + outline: none; + transition: none; + } + } + } +} diff --git a/public/projects/react-small-apps/apps/todos/src/components/layout/Main/Main.js b/public/projects/react-small-apps/apps/todos/src/components/layout/Main/Main.js new file mode 100644 index 0000000..7a9cb2d --- /dev/null +++ b/public/projects/react-small-apps/apps/todos/src/components/layout/Main/Main.js @@ -0,0 +1,7 @@ +import "./Main.scss"; + +function Main({ children }) { + return <main className="main container">{children}</main>; +} + +export default Main; diff --git a/public/projects/react-small-apps/apps/todos/src/components/layout/Main/Main.scss b/public/projects/react-small-apps/apps/todos/src/components/layout/Main/Main.scss new file mode 100644 index 0000000..42c950f --- /dev/null +++ b/public/projects/react-small-apps/apps/todos/src/components/layout/Main/Main.scss @@ -0,0 +1,3 @@ +.main { + padding: 3rem 0; +} diff --git a/public/projects/react-small-apps/apps/todos/src/components/layout/index.js b/public/projects/react-small-apps/apps/todos/src/components/layout/index.js new file mode 100644 index 0000000..1e1af4c --- /dev/null +++ b/public/projects/react-small-apps/apps/todos/src/components/layout/index.js @@ -0,0 +1,5 @@ +import Footer from "./Footer/Footer"; +import Header from "./Header/Header"; +import Main from "./Main/Main"; + +export { Footer, Header, Main }; |