From 6287291607fe5e50c7fd54102cfed7024a94c364 Mon Sep 17 00:00:00 2001 From: Merritt Baggett Date: Thu, 6 Jun 2024 19:22:27 -0400 Subject: [PATCH 1/7] basic layout --- components/MobileNavV2.tsx | 214 +++++++++++++++++++++++++++++++++++++ components/layout.tsx | 3 +- 2 files changed, 216 insertions(+), 1 deletion(-) create mode 100644 components/MobileNavV2.tsx diff --git a/components/MobileNavV2.tsx b/components/MobileNavV2.tsx new file mode 100644 index 000000000..40bfbf4a0 --- /dev/null +++ b/components/MobileNavV2.tsx @@ -0,0 +1,214 @@ +import { useTranslation } from "next-i18next" +import React, { FC, useState } from "react" +import { SignInWithButton, signOutAndRedirectToHome, useAuth } from "./auth" +import { Container, Nav, Navbar, NavDropdown } from "./bootstrap" +import { useProfile } from "./db" +import { + Avatar, + NavbarLinkBills, + NavbarLinkEditProfile, + NavbarLinkEffective, + NavbarLinkFAQ, + NavbarLinkGoals, + NavbarLinkLogo, + NavbarLinkProcess, + NavbarLinkSignOut, + NavbarLinkSupport, + NavbarLinkTeam, + NavbarLinkTestimony, + NavbarLinkViewProfile, + NavbarLinkWhyUse +} from "./NavbarComponents" + +import { Col, Row } from "./bootstrap" + +const NavBarBoxContainer: FC< + React.PropsWithChildren<{ className?: string }> +> = ({ children, className }) => { + return ( +
+ {children} +
+ ) +} + +const NavBarBox: FC> = ({ + children, + className +}) => { + return ( +
+ {children} +
+ ) +} + +export const MobileNavV2: React.FC> = () => { + const { authenticated } = useAuth() + const [isExpanded, setIsExpanded] = useState(false) + const { t } = useTranslation(["common", "auth"]) + + const toggleNav = () => setIsExpanded(!isExpanded) + const closeNav = () => setIsExpanded(false) + + const result = useProfile() + let isOrg = result?.profile?.role === "organization" + + return ( + <> +
+ + + + + + + + + + + + + +
+ +
+ + +
+ + + + + + + + + + +
+ +
+ + {/* + + + + + + + + + + + + + */} + + {/* + + + + + + + + + */} + + ) +} diff --git a/components/layout.tsx b/components/layout.tsx index 754fb3927..24523a6ff 100644 --- a/components/layout.tsx +++ b/components/layout.tsx @@ -7,6 +7,7 @@ import AuthModal from "./auth/AuthModal" import { DesktopNav } from "./DesktopNav" import PageFooter from "./Footer/Footer" import { MobileNav } from "./MobileNav" +import { MobileNavV2 } from "./MobileNavV2" export const PageContainer: FC> = ({ children @@ -45,7 +46,7 @@ export const Layout: React.FC> = ({ - {isMobile ? : } + {isMobile ? : }
{children}
Date: Thu, 6 Jun 2024 21:19:20 -0400 Subject: [PATCH 2/7] set up shared collapse menu --- components/MobileNavV2.tsx | 236 +++++++++++++++---------------------- 1 file changed, 94 insertions(+), 142 deletions(-) diff --git a/components/MobileNavV2.tsx b/components/MobileNavV2.tsx index 40bfbf4a0..28ad854c0 100644 --- a/components/MobileNavV2.tsx +++ b/components/MobileNavV2.tsx @@ -48,167 +48,119 @@ const NavBarBox: FC> = ({ } export const MobileNavV2: React.FC> = () => { + const ProfileLinks = () => { + return ( + + ) + } + + const SiteLinks = () => { + return ( + + ) + } + const { authenticated } = useAuth() const [isExpanded, setIsExpanded] = useState(false) + const [whichMenu, setWhichMenu] = useState("site") const { t } = useTranslation(["common", "auth"]) - const toggleNav = () => setIsExpanded(!isExpanded) + const toggleSite = () => { + if (isExpanded && whichMenu == "profile") { + setWhichMenu("site") + } else { + setWhichMenu("site") + setIsExpanded(!isExpanded) + } + } + + const toggleAvatar = () => { + if (isExpanded && whichMenu == "site") { + setWhichMenu("profile") + } else { + setWhichMenu("profile") + setIsExpanded(!isExpanded) + } + } + const closeNav = () => setIsExpanded(false) const result = useProfile() let isOrg = result?.profile?.role === "organization" + console.log("Is Expanded? ", isExpanded) + console.log("Which Menu? ", whichMenu) + return ( <> -
- - - - - - - - - - - - - -
- -
- - -
- - - - - - - - - - -
- -
- - {/* - - - - - - - - - - - - - */} - - {/* - - - + + + + + + +
+ +
+ + + {authenticated ? ( + <> + + + + + + + ) : ( + + )} + + - + {whichMenu == "site" ? : } - */} + ) } From 2d40fbf3fc38f3a1b307d3c8d7108bf69635e3ca Mon Sep 17 00:00:00 2001 From: Merritt Baggett Date: Thu, 6 Jun 2024 21:47:17 -0400 Subject: [PATCH 3/7] added x's for open menus --- components/MobileNavV2.tsx | 24 ++++++++++++++++++------ public/Union.svg | 3 +++ 2 files changed, 21 insertions(+), 6 deletions(-) create mode 100644 public/Union.svg diff --git a/components/MobileNavV2.tsx b/components/MobileNavV2.tsx index 28ad854c0..879656055 100644 --- a/components/MobileNavV2.tsx +++ b/components/MobileNavV2.tsx @@ -21,6 +21,7 @@ import { } from "./NavbarComponents" import { Col, Row } from "./bootstrap" +import Image from "react-bootstrap/Image" const NavBarBoxContainer: FC< React.PropsWithChildren<{ className?: string }> @@ -130,11 +131,18 @@ export const MobileNavV2: React.FC> = () => { > - - + + {isExpanded && whichMenu == "site" ? ( + x + ) : ( + + )} @@ -147,7 +155,11 @@ export const MobileNavV2: React.FC> = () => { <> - + {isExpanded && whichMenu == "profile" ? ( + x + ) : ( + + )} diff --git a/public/Union.svg b/public/Union.svg new file mode 100644 index 000000000..f9378875a --- /dev/null +++ b/public/Union.svg @@ -0,0 +1,3 @@ + + + From 78647445aaf6b3698ac0b31ee1d47bdf2bd052b2 Mon Sep 17 00:00:00 2001 From: Merritt Baggett Date: Fri, 7 Jun 2024 00:07:31 -0400 Subject: [PATCH 4/7] 100vh --- components/MobileNavV2.tsx | 117 +++++++++++++++++++------------------ 1 file changed, 61 insertions(+), 56 deletions(-) diff --git a/components/MobileNavV2.tsx b/components/MobileNavV2.tsx index 879656055..20731bd87 100644 --- a/components/MobileNavV2.tsx +++ b/components/MobileNavV2.tsx @@ -22,6 +22,7 @@ import { import { Col, Row } from "./bootstrap" import Image from "react-bootstrap/Image" +import styled from "styled-components" const NavBarBoxContainer: FC< React.PropsWithChildren<{ className?: string }> @@ -49,9 +50,22 @@ const NavBarBox: FC> = ({ } export const MobileNavV2: React.FC> = () => { + const BlackCollapse = styled(() => { + return ( + + {whichMenu == "site" ? : } + + ) + })` + .bg-black { + background-color: black; + height: 100vh; + } + ` + const ProfileLinks = () => { return ( -