Skip to content

Commit cf4d2ed

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

File tree

2 files changed

+166
-328
lines changed

2 files changed

+166
-328
lines changed

‎src/components/Nav.tsx‎

Lines changed: 62 additions & 155 deletions
Original file line numberDiff line numberDiff line change
@@ -1,174 +1,81 @@
11
import { A } from "@solidjs/router";
22
import { AiFillHome } from "solid-icons/ai";
33
import { OcLinkexternal2 } from "solid-icons/oc";
4+
import { Component, 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

8-
const Nav = () => {
10+
const Nav: Component = () => {
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>
50-
</A>
51-
</div>
17+
<>
18+
<div class="navbar-container">
19+
<div class="logo-container">
20+
<A href="/" onClick={closeMenu}>
21+
<img src={logo} height="30" alt="Swaps by ZEUS LSP" />
22+
<p class="hide-on-mobile">Swaps by ZEUS LSP</p>
23+
</A>
24+
</div>
5225

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>
26+
<div class="desktop-nav-links">
27+
<A href="/swap">{t("swap")}</A>
28+
<div class="separator" />
29+
<A href="/rescue">{t("rescue")}</A>
30+
<div class="separator" />
31+
<A href="/history">{t("history")}</A>
32+
<div class="separator" />
33+
<A
34+
href="https://docs.zeusln.app/swaps/intro"
35+
target="_blank">
36+
{t("documentation")}
37+
<OcLinkexternal2 size={24} />
38+
</A>
39+
</div>
7840

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>
41+
<div class="desktop-home-icon">
42+
<A href="https://olympusln.com">
43+
<AiFillHome size={25} color="white" />
44+
</A>
45+
</div>
10346

10447
<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-
}}>
152-
{t("documentation")}
153-
<OcLinkexternal2 size={24} />
154-
</A>
48+
class={`hamburger-icon ${isMenuOpen() ? "active" : ""}`}
49+
onClick={() => setIsMenuOpen(!isMenuOpen())}>
50+
<div class="bar1"></div>
51+
<div class="bar2"></div>
52+
<div class="bar3"></div>
53+
</div>
15554
</div>
15655

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-
}}>
168-
<AiFillHome size={25} color="white" />
169-
</A>
170-
</div>
171-
</div>
56+
{isMenuOpen() && (
57+
<div class="mobile-nav-overlay">
58+
<A href="/swap" onClick={closeMenu}>
59+
{t("swap")}
60+
</A>
61+
<A href="/rescue" onClick={closeMenu}>
62+
{t("rescue")}
63+
</A>
64+
<A href="/history" onClick={closeMenu}>
65+
{t("history")}
66+
</A>
67+
<A
68+
href="https://docs.zeusln.app/swaps/intro"
69+
target="_blank"
70+
onClick={closeMenu}>
71+
{t("documentation")} <OcLinkexternal2 size={24} />
72+
</A>
73+
<A href="https://olympusln.com" onClick={closeMenu}>
74+
<AiFillHome size={25} color="white" /> Home
75+
</A>
76+
</div>
77+
)}
78+
</>
17279
);
17380
};
17481

0 commit comments

Comments
 (0)