Skip to content

Commit 8422feb

Browse files
shubhamkmr04shubhamkmr04
committed
enhancement: updated mobile view for navbar
1 parent e4c2a8d commit 8422feb

File tree

2 files changed

+156
-321
lines changed

2 files changed

+156
-321
lines changed

‎src/components/Nav.tsx‎

Lines changed: 51 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -1,173 +1,76 @@
11
import { A } from "@solidjs/router";
22
import { AiFillHome } from "solid-icons/ai";
33
import { OcLinkexternal2 } from "solid-icons/oc";
4+
import { createSignal } from "solid-js";
45

56
import logo from "../assets/olympus-z-white.svg";
67
import { useGlobalContext } from "../context/Global";
8+
import "../style/nav.scss";
79

810
const Nav = () => {
911
const { t } = useGlobalContext();
12+
const [isMenuOpen, setIsMenuOpen] = createSignal(false);
13+
14+
const closeMenu = () => setIsMenuOpen(false);
1015

1116
return (
12-
<div
13-
style={{
14-
position: "fixed",
15-
top: 0,
16-
left: 0,
17-
width: "100%",
18-
}}>
19-
<div
20-
style={{
21-
position: "absolute",
22-
left: "10px",
23-
top: "10px",
24-
display: "flex",
25-
"align-items": "center",
26-
}}>
27-
<A
28-
href="/"
29-
style={{
30-
"text-decoration": "none",
31-
color: "inherit",
32-
display: "flex",
33-
"align-items": "center",
34-
}}>
35-
<img
36-
src={logo}
37-
height="30"
38-
alt="Swaps by ZEUS LSP"
39-
style={{ "margin-right": "8px" }}
40-
/>
41-
<p
42-
class="hide-on-mobile"
43-
style={{
44-
"font-size": "18px",
45-
margin: 0,
46-
color: "#fff",
47-
}}>
48-
Swaps by ZEUS LSP
49-
</p>
17+
<div class="navbar-container">
18+
<div class="logo-container">
19+
<A href="/" onClick={closeMenu}>
20+
<img src={logo} height="30" alt="Swaps by ZEUS LSP" />
21+
<p class="hide-on-mobile">Swaps by ZEUS LSP</p>
5022
</A>
5123
</div>
5224

53-
<div
54-
style={{
55-
padding: "16px 0",
56-
display: "flex",
57-
"align-items": "center",
58-
"justify-content": "center",
59-
gap: "16px",
60-
}}>
61-
<A
62-
href="/swap"
63-
style={{
64-
color: "#fff",
65-
"text-decoration": "none",
66-
"font-size": "18px",
67-
}}
68-
onMouseEnter={(e) => {
69-
e.currentTarget.style.color = "yellow";
70-
e.currentTarget.style.textDecoration = "underline";
71-
}}
72-
onMouseLeave={(e) => {
73-
e.currentTarget.style.color = "#fff";
74-
e.currentTarget.style.textDecoration = "none";
75-
}}>
76-
{t("swap")}
77-
</A>
78-
79-
<div
80-
style={{
81-
width: "1px",
82-
height: "20px",
83-
"background-color": "#fff",
84-
}}
85-
/>
86-
<A
87-
href="/rescue"
88-
style={{
89-
color: "#fff",
90-
"text-decoration": "none",
91-
"font-size": "18px",
92-
}}
93-
onMouseEnter={(e) => {
94-
e.currentTarget.style.color = "#efc22b";
95-
e.currentTarget.style.textDecoration = "underline";
96-
}}
97-
onMouseLeave={(e) => {
98-
e.currentTarget.style.color = "#fff";
99-
e.currentTarget.style.textDecoration = "none";
100-
}}>
101-
{t("rescue")}
102-
</A>
103-
104-
<div
105-
style={{
106-
width: "1px",
107-
height: "20px",
108-
"background-color": "#fff",
109-
}}
110-
/>
111-
<A
112-
href="/history"
113-
style={{
114-
color: "#fff",
115-
"text-decoration": "none",
116-
"font-size": "18px",
117-
}}
118-
onMouseEnter={(e) => {
119-
e.currentTarget.style.color = "yellow";
120-
e.currentTarget.style.textDecoration = "underline";
121-
}}
122-
onMouseLeave={(e) => {
123-
e.currentTarget.style.color = "#fff";
124-
e.currentTarget.style.textDecoration = "none";
125-
}}>
126-
{t("history")}
127-
</A>
128-
<div
129-
style={{
130-
width: "1px",
131-
height: "20px",
132-
"background-color": "#fff",
133-
}}
134-
/>
135-
<A
136-
href="https://docs.zeusln.app/swaps/intro"
137-
class="external"
138-
target="_blank"
139-
style={{
140-
color: "#fff",
141-
"text-decoration": "none",
142-
"font-size": "18px",
143-
}}
144-
onMouseEnter={(e) => {
145-
e.currentTarget.style.color = "yellow";
146-
e.currentTarget.style.textDecoration = "underline";
147-
}}
148-
onMouseLeave={(e) => {
149-
e.currentTarget.style.color = "#fff";
150-
e.currentTarget.style.textDecoration = "none";
151-
}}>
25+
<div class="desktop-nav-links">
26+
<A href="/swap">{t("swap")}</A>
27+
<div class="separator" />
28+
<A href="/rescue">{t("rescue")}</A>
29+
<div class="separator" />
30+
<A href="/history">{t("history")}</A>
31+
<div class="separator" />
32+
<A href="https://docs.zeusln.app/swaps/intro" target="_blank">
15233
{t("documentation")}
15334
<OcLinkexternal2 size={24} />
15435
</A>
15536
</div>
15637

157-
<div style={{ position: "absolute", right: 0, top: 0 }}>
158-
<A
159-
href="https://olympusln.com"
160-
style={{
161-
"text-decoration": "none",
162-
color: "inherit",
163-
padding: "10px",
164-
display: "flex",
165-
"align-items": "center",
166-
"justify-content": "center",
167-
}}>
38+
<div class="desktop-home-icon">
39+
<A href="https://olympusln.com">
16840
<AiFillHome size={25} color="white" />
16941
</A>
17042
</div>
43+
44+
<div
45+
class={`hamburger-icon ${isMenuOpen() ? "active" : ""}`}
46+
onClick={() => setIsMenuOpen(!isMenuOpen())}>
47+
<div class="bar1"></div>
48+
<div class="bar2"></div>
49+
<div class="bar3"></div>
50+
</div>
51+
52+
{isMenuOpen() && (
53+
<div class="mobile-nav-overlay">
54+
<A href="/swap" onClick={closeMenu}>
55+
{t("swap")}
56+
</A>
57+
<A href="/rescue" onClick={closeMenu}>
58+
{t("rescue")}
59+
</A>
60+
<A href="/history" onClick={closeMenu}>
61+
{t("history")}
62+
</A>
63+
<A
64+
href="https://docs.zeusln.app/swaps/intro"
65+
target="_blank"
66+
onClick={closeMenu}>
67+
{t("documentation")} <OcLinkexternal2 size={24} />
68+
</A>
69+
<A href="https://olympusln.com" onClick={closeMenu}>
70+
<AiFillHome size={25} color="white" /> Home
71+
</A>
72+
</div>
73+
)}
17174
</div>
17275
);
17376
};

0 commit comments

Comments
 (0)