From 8f04abb3b260c79e23a9b187cd91cefa9524f358 Mon Sep 17 00:00:00 2001 From: Kevin Charles Date: Sun, 5 Mar 2023 23:07:14 +0000 Subject: [PATCH] Start of navigation using NavItem and Outlet --- src/Tools/_framework/Paths/Community.jsx | 12 + src/Tools/_framework/Paths/Home.jsx | 11 + src/Tools/_framework/Paths/Portfolio.jsx | 12 + src/Tools/_framework/Paths/SiteHeader.jsx | 282 ++++++++++++++++++++++ src/Tools/singlepage/index.jsx | 126 ++++++---- 5 files changed, 393 insertions(+), 50 deletions(-) create mode 100644 src/Tools/_framework/Paths/Community.jsx create mode 100644 src/Tools/_framework/Paths/Home.jsx create mode 100644 src/Tools/_framework/Paths/Portfolio.jsx create mode 100644 src/Tools/_framework/Paths/SiteHeader.jsx diff --git a/src/Tools/_framework/Paths/Community.jsx b/src/Tools/_framework/Paths/Community.jsx new file mode 100644 index 0000000000..fcfdc47aad --- /dev/null +++ b/src/Tools/_framework/Paths/Community.jsx @@ -0,0 +1,12 @@ +import React, { useRef, useState } from 'react'; +import { useOutletContext } from 'react-router'; + + +export default function Community(props){ + let context = useOutletContext(); + + if (context.signedIn == null){ return null;} + + return
Community
+} + diff --git a/src/Tools/_framework/Paths/Home.jsx b/src/Tools/_framework/Paths/Home.jsx new file mode 100644 index 0000000000..8f62c52bfe --- /dev/null +++ b/src/Tools/_framework/Paths/Home.jsx @@ -0,0 +1,11 @@ +import React, { useRef, useState } from 'react'; +import { useOutletContext } from 'react-router'; + + +export default function Home(props){ + let context = useOutletContext(); + if (context.signedIn == null){ return null;} + + return
Home
+} + diff --git a/src/Tools/_framework/Paths/Portfolio.jsx b/src/Tools/_framework/Paths/Portfolio.jsx new file mode 100644 index 0000000000..9bb6b67858 --- /dev/null +++ b/src/Tools/_framework/Paths/Portfolio.jsx @@ -0,0 +1,12 @@ +import React, { useRef, useState } from 'react'; +import { useOutletContext } from 'react-router'; + + +export default function Portfolio(){ + let context = useOutletContext(); + + if (context.signedIn == null){ return null;} + + return
Portfolio
+} + diff --git a/src/Tools/_framework/Paths/SiteHeader.jsx b/src/Tools/_framework/Paths/SiteHeader.jsx new file mode 100644 index 0000000000..8cc39deae6 --- /dev/null +++ b/src/Tools/_framework/Paths/SiteHeader.jsx @@ -0,0 +1,282 @@ +import React, { useRef, useState } from 'react'; +import { Outlet, useLoaderData, useNavigate } from 'react-router'; +import { NavLink } from 'react-router-dom'; +import styled from 'styled-components'; +import Button from '../../../_reactComponents/PanelHeaderComponents/Button'; +import { checkIfUserClearedOut } from '../../../_utils/applicationUtils'; +import RouterLogo from '../RouterLogo'; + + + + +// const PublicSection = styled.div` +// display: flex; +// flex-direction: column; +// padding: 0px 10px 60px 10px; +// margin: 0px; +// row-gap: 30px; +// justify-content: center; +// align-items: center; +// text-align: center; +// background: var(--lightBlue); +// ` + +// const PrivateSection = styled.div` +// display: flex; +// flex-direction: column; +// padding: 0px 10px 60px 10px; +// margin: 0px; +// row-gap: 30px; +// justify-content: center; +// align-items: center; +// text-align: center; +// background: var(--mainGray); +// ` + +// const SignInSection = styled.div` +// display: flex; +// flex-direction: column; +// row-gap: 10px; +// margin: 0px; +// justify-content: center; +// align-items: center; +// text-align: center; +// background: var(--mainGray); +// height: calc(100% - 40px); +// ` + +// const SectionHeading = styled.div` +// display: flex; +// margin: 0px; +// justify-content: center; +// align-items: center; +// text-align: center; +// height: 100px; +// font-size: 18pt; +// ` + +// export default function SiteHeader(){ +// return
Site Header
+// } + +// function Heading(props) { +// let navigate = useNavigate(); + +// return
+//

{props.heading}

+//

{props.subheading}

+//
+//
+// } + +const SignInButtonContainer = styled.div` + margin: auto 10px auto 0px; +` + +const Header = styled.header` + background-color: #fff; + color: #000; + height: 40px; + position: fixed; + top: 0; + width: 100%; + margin: 0; + display: flex; + justify-content: space-between; + +`; + +const Main = styled.main` + margin-top: 40px; + /* padding: 20px; */ + overflow-y: scroll; + height: 100vh; + margin: 0; +`; + +const Branding = styled.span` + margin: 4px 0px 4px 10px; + display: flex; + justify-content: space-between; + align-items: center; + width: 110px; + cursor: default; + font-size: 16px; +` + +// const MenuItem = styled.NavLink` +// padding: 8px; +// color: "var(--mainBlue)"; +// border-bottom: "2px solid var(--mainBlue)"; +// cursor: pointer; +// ` + +/* border-bottom: 2px solid var(--mainBlue); */ + +const MenuItem = styled(NavLink)` + padding: 8px; + color: black; + cursor: pointer; + text-decoration: none; + &.active { + color: var(--mainBlue); + border-bottom: 2px solid var(--mainBlue); + } +`; + +// const activeClassName = 'nav-item-active'; + +// const MenuItem = styled(NavLink)` +// padding: 8px; +// color: black; +// cursor: pointer; + +// &.${activeClassName} { +// color: var(--mainBlue); +// border-bottom: 2px solid var(--mainBlue); +// } +// `; + + +// const MenuItem = styled.div` + // padding: 8px; + // color: ${props => props.active ? "var(--mainBlue)" : "black"}; + // border-bottom: ${props => props.active ? "2px solid var(--mainBlue)" : null}; + // cursor: pointer; +// ` + +const BarMenu = styled.div` + margin: 0px; + display: flex; + justify-content: space-between; + align-items: center; + font-size: 16px; + column-gap: 20px; +` +const TopSpace = styled.div` + margin-top: 40px; +` + + + +export default function SiteHeader(props) { + // const loaderData = useLoaderData(); + // const carouselData = loaderData?.carouselData; + let navigate = useNavigate(); + let checkingCookie = useRef(false); + const [signedIn, setSignedIn] = useState(null); + + //Only ask once + if (!checkingCookie.current) { + checkingCookie.current = true; + checkIfUserClearedOut().then(({ cookieRemoved }) => { + setSignedIn(!cookieRemoved); + }) + } + + // location.pathname === '/' || isActive + console.log(location.pathname === '/') + + + let signInButton =