forked from codeforboston/maple
-
Notifications
You must be signed in to change notification settings - Fork 0
/
MobileNav.tsx
156 lines (146 loc) · 4.28 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
import { useTranslation } from "next-i18next"
import React, { 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 {
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 classes 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)
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 />
)}
</Nav.Link>
</Navbar.Brand>
</>
) : (
<SignInWithButton />
)}
</Col>
<BlackCollapse />
</Navbar>
)
}