Skip to content

Commit 1546518

Browse files
surya4419surya4419
committed
fix(navbar): improve responsiveness for better user experience
The navbar was not responsive on smaller screens, causing layout issues. This update ensures the navbar adapts properly across different screen sizes by implementing a more flexible design. Refs: #172 Signed-off-by: surya4419 <suryaa4419@gmail.com>
1 parent 70bd7aa commit 1546518

File tree

1 file changed

+47
-187
lines changed

1 file changed

+47
-187
lines changed

‎src/components/Navbar.tsx‎

Lines changed: 47 additions & 187 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
11
import { useState } from "react";
22
import { Menu, Dropdown, Button, Image, Grid } from "antd";
3-
import { useSpring, animated } from "react-spring";
43
import { useLocation, Link } from "react-router-dom";
4+
import { useSpring, animated } from "react-spring";
55
import {
66
GithubOutlined,
77
QuestionOutlined,
88
UserOutlined,
99
InfoOutlined,
1010
BookOutlined,
1111
CaretDownFilled,
12+
MenuOutlined,
1213
} from "@ant-design/icons";
1314
import ToggleDarkMode from "./ToggleDarkMode";
1415

1516
const { useBreakpoint } = Grid;
1617

17-
function Navbar({ scrollToFooter }: { scrollToFooter: any }) {
18-
const [hovered, setHovered] = useState<
19-
null | "home" | "explore" | "help" | "github" | "join"
20-
>(null);
18+
function Navbar({ scrollToFooter }: { scrollToFooter: () => void }) {
19+
const [hovered, setHovered] = useState<null | "home" | "explore" | "help" | "github" | "join">(null);
2120
const screens = useBreakpoint();
2221
const location = useLocation();
22+
const isLearnPage = location.pathname.startsWith("/learn");
2323

2424
const props = useSpring({
2525
loop: true,
@@ -33,222 +33,82 @@ function Navbar({ scrollToFooter }: { scrollToFooter: any }) {
3333

3434
const helpMenu = (
3535
<Menu>
36-
<Menu.ItemGroup title="Info">
36+
<Menu.Item key="template-playground">
37+
<a href="/" rel="noopener noreferrer">
38+
Template Playground
39+
</a>
40+
</Menu.Item>
41+
<Menu.Item key="explore">
42+
<a href="#explore" rel="noopener noreferrer">
43+
Explore
44+
</a>
45+
</Menu.Item>
46+
<Menu.ItemGroup title="Info">
3747
<Menu.Item key="about">
38-
<a
39-
href="https://github.com/accordproject/template-playground/blob/main/README.md"
40-
target="_blank"
41-
rel="noopener noreferrer"
42-
>
48+
<a href="https://github.com/accordproject/template-playground/blob/main/README.md" target="_blank" rel="noopener noreferrer">
4349
<QuestionOutlined /> About
4450
</a>
4551
</Menu.Item>
4652
<Menu.Item key="community">
47-
<a
48-
href="https://discord.com/invite/Zm99SKhhtA"
49-
target="_blank"
50-
rel="noopener noreferrer"
51-
>
53+
<a href="https://discord.com/invite/Zm99SKhhtA" target="_blank" rel="noopener noreferrer">
5254
<UserOutlined /> Community
5355
</a>
5456
</Menu.Item>
5557
<Menu.Item key="issues">
56-
<a
57-
href="https://github.com/accordproject/template-playground/issues"
58-
target="_blank"
59-
rel="noopener noreferrer"
60-
>
58+
<a href="https://github.com/accordproject/template-playground/issues" target="_blank" rel="noopener noreferrer">
6159
<InfoOutlined /> Issues
6260
</a>
6361
</Menu.Item>
6462
</Menu.ItemGroup>
6563
<Menu.ItemGroup title="Documentation">
6664
<Menu.Item key="documentation">
67-
<a
68-
href="https://github.com/accordproject/template-engine/blob/main/README.md"
69-
target="_blank"
70-
rel="noopener noreferrer"
71-
>
65+
<a href="https://github.com/accordproject/template-engine/blob/main/README.md" target="_blank" rel="noopener noreferrer">
7266
<BookOutlined /> Documentation
7367
</a>
7468
</Menu.Item>
7569
</Menu.ItemGroup>
7670
</Menu>
7771
);
7872

79-
const menuItemStyle = (key: string, isLast: boolean) => ({
80-
display: "flex",
81-
alignItems: "center",
82-
padding: screens.md ? "0 20px" : "0",
83-
backgroundColor:
84-
hovered === key ? "rgba(255, 255, 255, 0.1)" : "transparent",
85-
height: "65px",
86-
borderRight:
87-
screens.md && !isLast ? "1.5px solid rgba(255, 255, 255, 0.1)" : "none",
88-
});
89-
90-
const isLearnPage = location.pathname.startsWith("/learn");
91-
9273
return (
93-
<div
94-
style={{
95-
background: "#1b2540",
96-
height: "65px",
97-
lineHeight: "65px",
98-
display: "flex",
99-
alignItems: "center",
100-
paddingLeft: screens.md ? 40 : 10,
101-
paddingRight: screens.md ? 40 : 10,
102-
}}
103-
>
104-
<div
105-
style={{
106-
cursor: "pointer",
107-
...menuItemStyle("home", false),
108-
}}
109-
onMouseEnter={() => setHovered("home")}
110-
onMouseLeave={() => setHovered(null)}
111-
>
112-
<a
113-
href="/"
114-
rel="noopener noreferrer"
115-
style={{ display: "flex", alignItems: "center" }}
116-
>
117-
<Image
118-
src={screens.lg ? "/logo.png" : "/accord_logo.png"}
119-
alt="Template Playground"
120-
preview={false}
121-
style={{
122-
paddingRight: screens.md ? "24px" : "10px",
123-
height: "26px",
124-
maxWidth: screens.md ? "184.17px" : "36.67px",
125-
}}
126-
/>
127-
<span style={{ color: "white" }}>Template Playground</span>
74+
<div style={{ background: "#1b2540", height: "65px", display: "flex", alignItems: "center", padding: `0 ${screens.md ? 40 : 10}px` }}>
75+
<div style={{ cursor: "pointer", whiteSpace: "nowrap" }}>
76+
<a href="/" rel="noopener noreferrer" style={{ display: "flex", alignItems: "center" }}>
77+
<Image src={screens.md ? "/logo.png" : "/accord_logo.png"} alt="Template Playground" preview={false} style={{ paddingRight: screens.md ? "24px" : "10px", height: "26px" }} />
78+
{screens.md && <span style={{ color: hovered === 'home' ? '#19c6c7' : 'white' }} onMouseEnter={() => setHovered('home')} onMouseLeave={() => setHovered(null)}>Template Playground</span>}
12879
</a>
12980
</div>
130-
{screens.md && (
81+
{screens.md ? (
13182
<>
132-
<div
133-
style={{
134-
...menuItemStyle("explore", false),
135-
cursor: "pointer",
136-
}}
137-
onClick={scrollToFooter}
138-
onMouseEnter={() => setHovered("explore")}
139-
onMouseLeave={() => setHovered(null)}
140-
>
141-
<span style={{ color: "white" }}>Explore</span>
142-
</div>
143-
<div
144-
style={{
145-
...menuItemStyle("help", false),
146-
cursor: "pointer",
147-
}}
148-
onMouseEnter={() => setHovered("help")}
149-
onMouseLeave={() => setHovered(null)}
150-
>
83+
<div style={{ marginLeft: "20px", cursor: "pointer", color: hovered === 'explore' ? '#19c6c7' : 'white' }} onMouseEnter={() => setHovered('explore')} onMouseLeave={() => setHovered(null)} onClick={scrollToFooter}>Explore</div>
84+
<div onMouseEnter={() => setHovered('help')} onMouseLeave={() => setHovered(null)}>
15185
<Dropdown overlay={helpMenu} trigger={["click"]}>
152-
<Button
153-
style={{
154-
background: "transparent",
155-
border: "none",
156-
color: "white",
157-
height: "65px",
158-
display: "flex",
159-
alignItems: "center",
160-
}}
161-
>
162-
Help
163-
<CaretDownFilled
164-
style={{ fontSize: "10px", marginLeft: "5px" }}
165-
/>
86+
<Button style={{ background: "transparent", border: "none", color: hovered === 'help' ? '#19c6c7' : 'white', marginLeft: "20px" }}>
87+
Help <CaretDownFilled />
16688
</Button>
16789
</Dropdown>
16890
</div>
16991
</>
92+
) : (
93+
<Dropdown overlay={helpMenu} trigger={["click"]}>
94+
<Button style={{ background: "transparent", border: "none", color: "white" }}>
95+
<MenuOutlined style={{ fontSize: "20px" }} />
96+
</Button>
97+
</Dropdown>
17098
)}
171-
<div
172-
style={{
173-
display: "flex",
174-
marginLeft: "auto",
175-
alignItems: "center",
176-
height: "65px",
177-
}}
178-
>
179-
<div>
180-
<ToggleDarkMode />
181-
</div>
99+
<div style={{ display: "flex", marginLeft: "auto", alignItems: "center", height: "65px" }}>
100+
<ToggleDarkMode />
182101
{!isLearnPage && (
183-
<div
184-
style={{
185-
marginLeft: screens.md ? "20px" : "0",
186-
height: "65px",
187-
display: "flex",
188-
justifyContent: "center",
189-
paddingLeft: "15px",
190-
borderRadius: "5px",
191-
alignItems: "center",
192-
backgroundColor:
193-
hovered === "join" ? "rgba(255, 255, 255, 0.1)" : "transparent",
194-
cursor: "pointer",
195-
}}
196-
onMouseEnter={() => setHovered("join")}
197-
onMouseLeave={() => setHovered(null)}
198-
>
199-
<Link to="/learn/intro" className="learnNow-button">
200-
<animated.button
201-
style={{
202-
...props,
203-
padding: "10px 22px",
204-
backgroundColor: "#19c6c7",
205-
color: "#050c40",
206-
border: "none",
207-
borderRadius: "5px",
208-
marginRight: "15px",
209-
cursor: "pointer",
210-
}}
211-
>
212-
Learn
213-
</animated.button>
214-
</Link>
215-
</div>
102+
<Link to="/learn/intro">
103+
<animated.button style={{ ...props, padding: "10px 22px", backgroundColor: "#19c6c7", color: "#050c40", border: "none", borderRadius: "5px", marginLeft: "20px", cursor: "pointer" }}>
104+
Learn
105+
</animated.button>
106+
</Link>
216107
)}
217-
<div
218-
style={{
219-
height: "65px",
220-
display: "flex",
221-
alignItems: "center",
222-
justifyContent: "center",
223-
padding: screens.md ? "0 20px" : "0 10px",
224-
borderRadius: "5px",
225-
borderLeft: screens.md
226-
? "1.5px solid rgba(255, 255, 255, 0.1)"
227-
: "none",
228-
paddingLeft: screens.md ? "20px" : "0",
229-
backgroundColor:
230-
hovered === "github" ? "rgba(255, 255, 255, 0.1)" : "transparent",
231-
cursor: "pointer",
232-
}}
233-
onMouseEnter={() => setHovered("github")}
234-
onMouseLeave={() => setHovered(null)}
235-
>
236-
<a
237-
href="https://github.com/accordproject/template-playground"
238-
target="_blank"
239-
rel="noopener noreferrer"
240-
style={{ display: "flex", alignItems: "center", color: "white" }}
241-
>
242-
<GithubOutlined
243-
style={{
244-
fontSize: "20px",
245-
color: "white",
246-
marginRight: screens.md ? "5px" : "0",
247-
}}
248-
/>
249-
{screens.md && <span>Github</span>}
250-
</a>
251-
</div>
108+
<a href="https://github.com/accordproject/template-playground" target="_blank" rel="noopener noreferrer" style={{ marginLeft: "20px", display: "flex", alignItems: "center", color: "white" }}>
109+
<GithubOutlined style={{ fontSize: "20px" }} />
110+
{screens.md && <span style={{ marginLeft: "8px" }}>GitHub</span>}
111+
</a>
252112
</div>
253113
</div>
254114
);

0 commit comments

Comments
 (0)