forked from codeforboston/maple
-
Notifications
You must be signed in to change notification settings - Fork 0
/
MobileNav.tsx
160 lines (149 loc) · 4.4 KB
/
MobileNav.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
import { useTranslation } from "next-i18next"
import React, { FC, useState } from "react"
import Image from "react-bootstrap/Image"
import styled from "styled-components"
import { SignInWithButton, signOutAndRedirectToHome, useAuth } from "./auth"
import { Col, 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"
export const MobileNav: React.FC<React.PropsWithChildren<unknown>> = () => {
const BlackCollapse = styled(() => {
return (
<Navbar.Collapse id="basic-navbar-nav" className="bg-black mt-2 ps-4">
{/* while MAPLE is trying to do away with inline styling *
* both styled-components and bootstrap class have been *
* ignoring height properties for some reason */}
<div style={{ height: "100vh" }}>
{whichMenu == "site" ? <SiteLinks /> : <ProfileLinks />}
</div>
</Navbar.Collapse>
)
})`
.bg-black {
background-color: black;
}
`
const ProfileLinks = () => {
return (
<Nav className="my-4 d-flex align-items-start">
<NavbarLinkViewProfile />
<NavbarLinkEditProfile
handleClick={() => {
closeNav()
}}
/>
<NavbarLinkSignOut
handleClick={() => {
closeNav()
void signOutAndRedirectToHome()
}}
/>
</Nav>
)
}
const SiteLinks = () => {
return (
<Nav className="my-4">
<NavbarLinkBills handleClick={closeNav} />
<NavbarLinkTestimony handleClick={closeNav} />
<NavDropdown className={"navLink-primary"} title={t("about")}>
<NavbarLinkGoals handleClick={closeNav} />
<NavbarLinkTeam handleClick={closeNav} />
<NavbarLinkSupport handleClick={closeNav} />
<NavbarLinkFAQ handleClick={closeNav} />
</NavDropdown>
<NavDropdown className={"navLink-primary"} title={t("learn")}>
<NavbarLinkEffective handleClick={closeNav} />
<NavbarLinkProcess handleClick={closeNav} />
<NavbarLinkWhyUse handleClick={closeNav} />
</NavDropdown>
</Nav>
)
}
const { authenticated } = useAuth()
const [isExpanded, setIsExpanded] = useState(false)
const [whichMenu, setWhichMenu] = useState("site")
const { t } = useTranslation(["common", "auth"])
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"
return (
<Navbar
bg="secondary"
className={`w-100 ${isExpanded ? "pb-0" : ""}`}
data-bs-theme="dark"
expand="lg"
expanded={isExpanded}
>
<Col className="ms-3 ps-2">
<Navbar.Brand onClick={toggleSite}>
{isExpanded && whichMenu == "site" ? (
<Image
src="/Union.svg"
alt="x"
width="35"
height="35"
className="ms-2"
/>
) : (
<Navbar.Toggle aria-controls="basic-navbar-nav" />
)}
</Navbar.Brand>
</Col>
<Col>
<div className="d-flex justify-content-center">
<NavbarLinkLogo />
</div>
</Col>
<Col className="d-flex justify-content-end me-3 pe-2">
{authenticated ? (
<>
<Navbar.Brand onClick={toggleAvatar}>
<Nav.Link className="p-0 text-white">
{isExpanded && whichMenu == "profile" ? (
<Image src="/Union.svg" alt="x" width="35" height="35" />
) : (
<Avatar isOrg={isOrg} />
)}
</Nav.Link>
</Navbar.Brand>
</>
) : (
<SignInWithButton />
)}
</Col>
<BlackCollapse />
</Navbar>
)
}