Skip to content

Commit 8843aab

Browse files
taichan03taichan03
authored
Merge pull request #313 from CodeForPhilly/304-balancer-logo-in-header-is-not-clickable-on-mobile
Added handleForm to MdNavBar so Balancer logo triggers the function
2 parents eafa48d + 4517f1c commit 8843aab

File tree

2 files changed

+125
-121
lines changed

2 files changed

+125
-121
lines changed

‎frontend/src/components/Header/Header.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -196,7 +196,7 @@ const Header: React.FC<LoginFormProps> = ({
196196
{/* <Chat showChat={showChat} setShowChat={setShowChat} /> */}
197197
{isAuthenticated ? authLinks() : guestLinks()}
198198
</div>
199-
<MdNavBar isAuthenticated={isAuthenticated}/>
199+
<MdNavBar handleForm={handleForm} isAuthenticated={isAuthenticated}/>
200200
</header>
201201
);
202202
};

‎frontend/src/components/Header/MdNavBar.tsx‎

Lines changed: 124 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -1,146 +1,150 @@
1-
import { useState } from "react";
2-
import { Link } from "react-router-dom";
1+
import {useState} from "react";
2+
import {Link} from "react-router-dom";
33
// import { useLocation } from "react-router-dom";
44
import Chat from "./Chat";
55
// import logo from "../../assets/balancer.png";
66
import closeLogo from "../../assets/close.svg";
77
import hamburgerLogo from "../../assets/hamburger.svg";
8-
import { useDispatch } from "react-redux";
9-
import { logout, AppDispatch } from "../../services/actions/auth";
8+
import {useDispatch} from "react-redux";
9+
import {logout, AppDispatch} from "../../services/actions/auth";
1010

1111
interface LoginFormProps {
12-
isAuthenticated: boolean;
12+
isAuthenticated: boolean;
13+
handleForm: () => void;
1314
}
1415

1516
const MdNavBar = (props: LoginFormProps) => {
16-
const [nav, setNav] = useState(true);
17-
// const { pathname } = useLocation();
18-
const [showChat, setShowChat] = useState(false);
19-
const { isAuthenticated } = props;
20-
const handleNav = () => {
21-
setNav(!nav);
22-
};
17+
const [nav, setNav] = useState(true);
18+
// const { pathname } = useLocation();
19+
const [showChat, setShowChat] = useState(false);
20+
const {isAuthenticated, handleForm} = props;
21+
const handleNav = () => {
22+
setNav(!nav);
23+
};
2324

24-
const dispatch = useDispatch<AppDispatch>();
25+
const dispatch = useDispatch<AppDispatch>();
2526

26-
const logout_user = () => {
27-
dispatch(logout());
28-
};
27+
const logout_user = () => {
28+
dispatch(logout());
29+
};
2930

30-
return (
31-
<div
32-
className={
33-
"mx-auto flex items-center justify-between border-b border-gray-300 bg-white p-2 px-5 md:h-20 lg:hidden"
34-
}
35-
>
36-
<nav className="flex w-full ">
37-
{/* <Link to="/">
31+
32+
return (
33+
<div
34+
className={
35+
"mx-auto flex items-center justify-between border-b border-gray-300 bg-white p-2 px-5 md:h-20 lg:hidden"
36+
}
37+
>
38+
<nav className="flex w-full ">
39+
{/* <Link to="/">
3840
<img src={logo} alt="logo" className="mr-16 w-28 object-contain " />
3941
</Link> */}
40-
<Link to="/">
41-
<span className="bg-gradient-to-r from-blue-500 via-blue-700 to-blue-300 bg-clip-text font-quicksand text-2xl font-bold text-transparent md:text-3xl ">
42+
<Link to="/">
43+
<span
44+
className="bg-gradient-to-r from-blue-500 via-blue-700 to-blue-300 bg-clip-text font-quicksand text-2xl font-bold text-transparent md:text-3xl "
45+
onClick={handleForm}>
4246
Balancer
4347
</span>
44-
</Link>
45-
</nav>
46-
<div onClick={handleNav} className="">
47-
{nav && (
48-
<img
49-
src={hamburgerLogo}
50-
alt="logo"
51-
className="h-8 w-7 md:h-8 md:w-7"
52-
/>
53-
)}
54-
</div>
55-
<div
56-
className={
57-
!nav
58-
? "fixed left-0 top-0 h-full w-[100%] border-r border-r-gray-900 bg-white duration-500 ease-in-out"
59-
: "ease-out-in fixed left-[-100%] duration-1000"
60-
}
61-
>
62-
<div className="flex items-center justify-between p-5">
48+
</Link>
49+
</nav>
50+
<div onClick={handleNav} className="">
51+
{nav && (
52+
<img
53+
src={hamburgerLogo}
54+
alt="logo"
55+
className="h-8 w-7 md:h-8 md:w-7"
56+
/>
57+
)}
58+
</div>
59+
<div
60+
className={
61+
!nav
62+
? "fixed left-0 top-0 h-full w-[100%] border-r border-r-gray-900 bg-white duration-500 ease-in-out"
63+
: "ease-out-in fixed left-[-100%] duration-1000"
64+
}
65+
>
66+
<div className="flex items-center justify-between p-5">
6367
<span className="bg-gradient-to-r from-blue-500 via-blue-700 to-blue-300 bg-clip-text font-quicksand text-3xl font-bold text-transparent md:text-3xl lg:text-3xl ">
6468
Balancer
6569
</span>
6670

67-
<div onClick={handleNav} className="">
68-
{!nav && (
69-
<img
70-
src={closeLogo}
71-
alt="logo"
72-
className="h-8 w-7 md:h-8 md:w-7"
73-
/>
71+
<div onClick={handleNav} className="">
72+
{!nav && (
73+
<img
74+
src={closeLogo}
75+
alt="logo"
76+
className="h-8 w-7 md:h-8 md:w-7"
77+
/>
78+
)}
79+
</div>
80+
</div>
81+
82+
<ul className="mt-10 font-satoshi uppercase">
83+
<li className="border-b border-gray-300 p-4">
84+
<Link
85+
to="/about"
86+
className="mr-9 text-black hover:border-b-2 hover:border-blue-600 hover:text-black hover:no-underline"
87+
>
88+
About Balancer
89+
</Link>
90+
</li>
91+
<li className="border-b border-gray-300 p-4">
92+
<Link
93+
to="/help"
94+
className="mr-9 text-black hover:border-b-2 hover:border-blue-600 hover:text-black hover:no-underline"
95+
>
96+
Help
97+
</Link>
98+
</li>
99+
<li className="border-b border-gray-300 p-4">
100+
<Link
101+
to="/login"
102+
className="mr-9 text-black hover:border-b-2 hover:border-blue-600 hover:text-black hover:no-underline"
103+
>
104+
Medical Suggester
105+
</Link>
106+
</li>
107+
<li className="border-b border-gray-300 p-4">
108+
<Link
109+
to="/medications"
110+
className="mr-9 text-black hover:border-b-2 hover:border-blue-600 hover:text-black hover:no-underline"
111+
>
112+
Medications List
113+
</Link>
114+
</li>
115+
<li className="border-b border-gray-300 p-4">
116+
<Link
117+
to="/drugSummary"
118+
className="mr-9 text-black hover:border-b-2 hover:border-blue-600 hover:text-black hover:no-underline"
119+
>
120+
Chat
121+
</Link>
122+
</li>
123+
<li className="border-b border-gray-300 p-4">
124+
<Link
125+
to="/feedback"
126+
className="mr-9 text-black hover:border-b-2 hover:border-blue-600 hover:text-black hover:no-underline"
127+
>
128+
Leave Feedback
129+
</Link>
130+
</li>
131+
{isAuthenticated &&
132+
<li className="border-b border-gray-300 p-4">
133+
<a
134+
onClick={logout_user}
135+
className="mr-9 text-black hover:border-b-2 hover:border-blue-600 hover:text-black hover:no-underline"
136+
>
137+
Sign Out
138+
</a>
139+
</li>
140+
}
141+
</ul>
142+
</div>
143+
{isAuthenticated && (
144+
<Chat showChat={showChat} setShowChat={setShowChat}/>
74145
)}
75-
</div>
76146
</div>
77-
78-
<ul className="mt-10 font-satoshi uppercase">
79-
<li className="border-b border-gray-300 p-4">
80-
<Link
81-
to="/about"
82-
className="mr-9 text-black hover:border-b-2 hover:border-blue-600 hover:text-black hover:no-underline"
83-
>
84-
About Balancer
85-
</Link>
86-
</li>
87-
<li className="border-b border-gray-300 p-4">
88-
<Link
89-
to="/help"
90-
className="mr-9 text-black hover:border-b-2 hover:border-blue-600 hover:text-black hover:no-underline"
91-
>
92-
Help
93-
</Link>
94-
</li>
95-
<li className="border-b border-gray-300 p-4">
96-
<Link
97-
to="/login"
98-
className="mr-9 text-black hover:border-b-2 hover:border-blue-600 hover:text-black hover:no-underline"
99-
>
100-
Medical Suggester
101-
</Link>
102-
</li>
103-
<li className="border-b border-gray-300 p-4">
104-
<Link
105-
to="/medications"
106-
className="mr-9 text-black hover:border-b-2 hover:border-blue-600 hover:text-black hover:no-underline"
107-
>
108-
Medications List
109-
</Link>
110-
</li>
111-
<li className="border-b border-gray-300 p-4">
112-
<Link
113-
to="/drugSummary"
114-
className="mr-9 text-black hover:border-b-2 hover:border-blue-600 hover:text-black hover:no-underline"
115-
>
116-
Chat
117-
</Link>
118-
</li>
119-
<li className="border-b border-gray-300 p-4">
120-
<Link
121-
to="/feedback"
122-
className="mr-9 text-black hover:border-b-2 hover:border-blue-600 hover:text-black hover:no-underline"
123-
>
124-
Leave Feedback
125-
</Link>
126-
</li>
127-
{isAuthenticated &&
128-
<li className="border-b border-gray-300 p-4">
129-
<a
130-
onClick={logout_user}
131-
className="mr-9 text-black hover:border-b-2 hover:border-blue-600 hover:text-black hover:no-underline"
132-
>
133-
Sign Out
134-
</a>
135-
</li>
136-
}
137-
</ul>
138-
</div>
139-
{isAuthenticated && (
140-
<Chat showChat={showChat} setShowChat={setShowChat} />
141-
)}
142-
</div>
143-
);
147+
);
144148
};
145149

146150
export default MdNavBar;

0 commit comments

Comments
 (0)