Skip to content

Commit 26b5f81

Browse files
alvarengathomasalvarengathomas
authored
Merge pull request #989 from hemilabs/fixed-get-started-mobile
Set fixed on Get Started section on navbar mobile
2 parents 4b023d5 + 2978a02 commit 26b5f81

File tree

1 file changed

+125
-109
lines changed
  • webapp/app/[locale]/_components/navbar

1 file changed

+125
-109
lines changed

‎webapp/app/[locale]/_components/navbar/index.tsx

+125-109
Original file line numberDiff line numberDiff line change
@@ -44,130 +44,146 @@ export const Navbar = function () {
4444
const href = useTunnelOperationByConnectedWallet()
4545

4646
return (
47-
<div className="md:h-98vh flex h-[calc(100dvh-56px)] flex-col px-3 pt-3 md:pt-0 [&>*]:md:ml-3 [&>*]:md:pr-3">
48-
<div className="hidden h-24 items-center justify-center md:flex">
49-
<div className="flex h-1/3 w-1/3">
50-
<Link className="w-full" href={href}>
51-
<HemiLogoFull />
52-
</Link>
47+
<>
48+
<div className="md:h-98vh flex h-[calc(100dvh-56px)] flex-col bg-white px-3 pt-3 md:pt-0 [&>*]:md:ml-3 [&>*]:md:pr-3">
49+
<div className="hidden h-24 items-center justify-center md:flex">
50+
<div className="flex h-1/3 w-1/3">
51+
<Link className="w-full" href={href}>
52+
<HemiLogoFull />
53+
</Link>
54+
</div>
5355
</div>
54-
</div>
55-
<ul className="flex h-full flex-col gap-y-1 overflow-y-auto [&>li>div]:px-3">
56-
<li className="order-1">
57-
<ItemLink
58-
event="nav - tunnel"
59-
href={href}
60-
icon={<TunnelIcon />}
61-
rightSection={
62-
<div className="ml-auto">
63-
<ActionableOperations />
64-
</div>
65-
}
66-
text={t('tunnel')}
67-
/>
68-
</li>
69-
<li className="order-2">
70-
{featureFlags.stakeCampaignEnabled && (
56+
<ul className="flex h-[calc(100dvh-275px)] flex-col gap-y-1 overflow-y-auto md:h-full [&>li>div]:px-3">
57+
<li className="order-1">
58+
<ItemLink
59+
event="nav - tunnel"
60+
href={href}
61+
icon={<TunnelIcon />}
62+
rightSection={
63+
<div className="ml-auto">
64+
<ActionableOperations />
65+
</div>
66+
}
67+
text={t('tunnel')}
68+
/>
69+
</li>
70+
<li className="order-2">
71+
{featureFlags.stakeCampaignEnabled && (
72+
<ItemLink
73+
event="nav - stake"
74+
href="/stake/dashboard"
75+
icon={<StakeIcon />}
76+
text={t('stake')}
77+
urlToBeSelected="/stake"
78+
/>
79+
)}
80+
</li>
81+
<li className="order-3">
82+
<ItemLink
83+
event="nav - dex"
84+
href={getSwapUrl(networkType)}
85+
icon={<DexIcon />}
86+
text={t('swap')}
87+
/>
88+
</li>
89+
<li className="order-4">
90+
<Suspense>
91+
<HemiExplorerLink />
92+
</Suspense>
93+
</li>
94+
<li className="order-5">
95+
<Separator />
96+
</li>
97+
<li className="order-6">
7198
<ItemLink
72-
event="nav - stake"
73-
href="/stake/dashboard"
74-
icon={<StakeIcon />}
75-
text={t('stake')}
76-
urlToBeSelected="/stake"
99+
event="nav - hbk"
100+
href="https://docs.hemi.xyz/building-bitcoin-apps/hemi-bitcoin-kit-hbk"
101+
icon={<BitcoinKitIcon />}
102+
text={t('bitcoinkit')}
77103
/>
104+
</li>
105+
<li className="order-7">
106+
<ItemWithSubmenu
107+
event="nav - tools"
108+
icon={<ToolsIcon />}
109+
subMenu={
110+
<>
111+
<ItemLink
112+
event="nav - pure finance"
113+
href="https://purefinance.hemi.xyz"
114+
text="Pure Finance"
115+
/>
116+
</>
117+
}
118+
text={t('tools')}
119+
/>
120+
</li>
121+
<li className="order-8">
122+
<Separator />
123+
</li>
124+
<li className="order-9 mb-auto">
125+
<ItemLink
126+
event="nav - demos"
127+
href="/demos"
128+
icon={<DemosPageIcon />}
129+
text={t('demos')}
130+
/>
131+
</li>
132+
<li className="order-10 md:order-11">
133+
<ItemLink
134+
event="nav - network status"
135+
href="https://hemistatus.com"
136+
icon={<ElectroCardiogramIcon />}
137+
text={t('network-status')}
138+
/>
139+
</li>
140+
<li className="order-11 md:order-12">
141+
<ItemLink
142+
event="nav - docs"
143+
href="https://docs.hemi.xyz"
144+
icon={<DocsIcon />}
145+
text={t('hemidocs')}
146+
/>
147+
</li>
148+
{featureFlags.mainnetEnabled && (
149+
<li className="md:order-13 order-12">
150+
<NetworkSwitch />
151+
</li>
78152
)}
79-
</li>
80-
<li className="order-3">
81-
<ItemLink
82-
event="nav - dex"
83-
href={getSwapUrl(networkType)}
84-
icon={<DexIcon />}
85-
text={t('swap')}
86-
/>
87-
</li>
88-
<li className="order-4">
89-
<Suspense>
90-
<HemiExplorerLink />
91-
</Suspense>
92-
</li>
93-
<li className="order-5">
94-
<Separator />
95-
</li>
96-
<li className="order-6">
97-
<ItemLink
98-
event="nav - hbk"
99-
href="https://docs.hemi.xyz/building-bitcoin-apps/hemi-bitcoin-kit-hbk"
100-
icon={<BitcoinKitIcon />}
101-
text={t('bitcoinkit')}
102-
/>
103-
</li>
104-
<li className="order-7">
105-
<ItemWithSubmenu
106-
event="nav - tools"
107-
icon={<ToolsIcon />}
108-
subMenu={
109-
<>
110-
<ItemLink
111-
event="nav - pure finance"
112-
href="https://purefinance.hemi.xyz"
113-
text="Pure Finance"
114-
/>
115-
</>
116-
}
117-
text={t('tools')}
118-
/>
119-
</li>
120-
<li className="order-8">
121-
<Separator />
122-
</li>
123-
<li className="order-9 mb-auto">
124-
<ItemLink
125-
event="nav - demos"
126-
href="/demos"
127-
icon={<DemosPageIcon />}
128-
text={t('demos')}
129-
/>
130-
</li>
131-
<li className="order-10 md:order-11">
132-
<ItemLink
133-
event="nav - network status"
134-
href="https://hemistatus.com"
135-
icon={<ElectroCardiogramIcon />}
136-
text={t('network-status')}
137-
/>
138-
</li>
139-
<li className="order-11 md:order-12">
140-
<ItemLink
141-
event="nav - docs"
142-
href="https://docs.hemi.xyz"
143-
icon={<DocsIcon />}
144-
text={t('hemidocs')}
145-
/>
146-
</li>
147-
{featureFlags.mainnetEnabled && (
148-
<li className="md:order-13 order-12">
149-
<NetworkSwitch />
153+
<li className="hidden md:order-10 md:block">
154+
<GetStarted />
150155
</li>
151-
)}
152-
<li className="order-14 md:hidden">
153-
<Separator />
154-
</li>
155-
<li className="order-15 md:order-10">
156+
<li className="md:order-14 hidden md:block">
157+
<SocialLinks />
158+
</li>
159+
<li className="md:order-15 hidden md:block">
160+
<CmcAttribution />
161+
</li>
162+
<li className="md:order-16 hidden md:block">
163+
<Separator />
164+
</li>
165+
<li className="md:order-17 hidden md:block">
166+
<TermsAndConditions />
167+
</li>
168+
</ul>
169+
</div>
170+
<ul className="fixed bottom-0 w-full border-t border-neutral-300 bg-neutral-50 px-3 pt-4 md:hidden">
171+
<li>
156172
<GetStarted />
157173
</li>
158-
<li className="order-16 md:order-14">
174+
<li>
159175
<SocialLinks />
160176
</li>
161-
<li className="order-16 md:order-15">
177+
<li>
162178
<CmcAttribution />
163179
</li>
164-
<li className="order-17 md:order-16">
180+
<li>
165181
<Separator />
166182
</li>
167-
<li className="order-18 md:order-17">
183+
<li>
168184
<TermsAndConditions />
169185
</li>
170186
</ul>
171-
</div>
187+
</>
172188
)
173189
}

0 commit comments

Comments
 (0)