Skip to content

Commit 3747f38

Browse files
cursoragentNeftaliYagua
cursoragent
and
NeftaliYagua
committed
Refactor: Improve navigation and styling with utility classes
Co-authored-by: neftali.yagua <[email protected]>
1 parent 5bdb8a4 commit 3747f38

File tree

4 files changed

+193
-210
lines changed

4 files changed

+193
-210
lines changed

‎_includes/portal.html‎

Lines changed: 82 additions & 164 deletions
Original file line numberDiff line numberDiff line change
@@ -2,34 +2,34 @@
22
<nav class="bg-stone-800 text-white shadow-lg sticky top-0 z-50" role="navigation" aria-label="Main navigation">
33
<div class="max-w-7xl mx-auto">
44
<!-- Top Bar: Domain Links & Auth -->
5-
<div class="bg-stone-900 border-b border-stone-700 px-4 py-2">
5+
<div class="bg-stone-900 border-b border-stone-700 container-padding py-2">
66
<div class="flex flex-wrap items-center justify-between gap-2">
77
<!-- Domain Links -->
8-
<ol class="inline-flex flex-wrap items-center gap-x-2 gap-y-1 text-xs sm:text-sm text-stone-400" role="list">
8+
<ol class="inline-flex flex-wrap items-center gap-x-2 gap-y-1 text-stone-400" role="list">
99
<li>
10-
<a href="https://coderic.co" class="inline-flex items-center gap-1 hover:text-orange-500 focus:outline-none focus:ring-2 focus:ring-orange-500 rounded px-1 transition-colors"
10+
<a href="https://coderic.co" class="nav-link-sm"
1111
title="Coderic FinTech" aria-label="Visit Coderic FinTech">
12-
<svg class="w-3 h-3 sm:w-4 sm:h-4" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
12+
<svg class="nav-icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
1313
<path d="M6,16.5L3,19.44V11H6M11,14.66L9.43,13.32L8,14.64V7H11M16,13L13,16V3H16M18.81,12.81L17,11H22V16L20.21,14.21L13,21.36L9.53,18.34L5.75,22H3L9.47,15.66L13,18.64" />
1414
</svg>
1515
<span class="hidden sm:inline">FINTECH</span>
1616
</a>
1717
</li>
1818
<li aria-hidden="true" class="text-stone-600">·</li>
1919
<li>
20-
<a href="https://coderic.cloud" class="inline-flex items-center gap-1 hover:text-orange-500 focus:outline-none focus:ring-2 focus:ring-orange-500 rounded px-1 transition-colors"
20+
<a href="https://coderic.cloud" class="nav-link-sm"
2121
title="Coderic Cloud" aria-label="Visit Coderic Cloud">
22-
<svg class="w-3 h-3 sm:w-4 sm:h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
22+
<svg class="nav-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
2323
<path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z" />
2424
</svg>
2525
<span class="hidden sm:inline">CLOUD</span>
2626
</a>
2727
</li>
2828
<li aria-hidden="true" class="text-stone-600">·</li>
2929
<li>
30-
<a href="https://coderic.net" class="inline-flex items-center gap-1 hover:text-orange-500 focus:outline-none focus:ring-2 focus:ring-orange-500 rounded px-1 transition-colors"
30+
<a href="https://coderic.net" class="nav-link-sm"
3131
title="Coderic Hub Content" aria-label="Visit Coderic Hub">
32-
<svg class="w-3 h-3 sm:w-4 sm:h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
32+
<svg class="nav-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
3333
<rect x="6" y="7" width="8" height="2" />
3434
<rect x="6" y="11" width="12" height="2" />
3535
<rect x="6" y="15" width="2.99" height="2" />
@@ -41,9 +41,9 @@
4141
</li>
4242
<li aria-hidden="true" class="text-stone-600">·</li>
4343
<li>
44-
<a href="https://coderic.org" class="inline-flex items-center gap-1 hover:text-orange-500 focus:outline-none focus:ring-2 focus:ring-orange-500 rounded px-1 transition-colors"
44+
<a href="https://coderic.org" class="nav-link-sm"
4545
title="Coderic Organization" aria-label="Visit Coderic Organization">
46-
<svg class="w-3 h-3 sm:w-4 sm:h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
46+
<svg class="nav-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
4747
<path d="M19,9A7,7,0,1,0,8.0257,14.75928L5,20l2.25562.09314L8.46411,22l3.46613-6.00354C11.95374,15.9967,11.97644,16,12,16s.04626-.0033.06976-.00354L15.53589,22l1.232-1.866L19,20l-3.02576-5.24072A6.98951,6.98951,0,0,0,19,9ZM7,9a5,5,0,1,1,5,5A5,5,0,0,1,7,9Z" />
4848
<circle cx="12" cy="9" r="3" />
4949
</svg>
@@ -53,31 +53,31 @@
5353
</ol>
5454

5555
<!-- Auth Buttons -->
56-
<ol class="inline-flex items-center gap-2 text-xs sm:text-sm" role="list">
56+
<ol class="inline-flex items-center gap-2" role="list">
5757
<li class="guest hidden">
58-
<a class="inline-flex items-center gap-1 hover:text-orange-500 focus:outline-none focus:ring-2 focus:ring-orange-500 rounded px-2 py-1 transition-colors"
58+
<a class="nav-link-md"
5959
href="/" title="Sign in" aria-label="Sign in to Coderic" onclick="if(typeof login === 'function') { login(); return false; }">
60-
<svg class="w-3 h-3 sm:w-4 sm:h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" aria-hidden="true">
60+
<svg class="nav-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" aria-hidden="true">
6161
<path d="M26,30H14a2,2,0,0,1-2-2V25h2v3H26V4H14V7H12V4a2,2,0,0,1,2-2H26a2,2,0,0,1,2,2V28A2,2,0,0,1,26,30Z" />
6262
<polygon points="14.59 20.59 18.17 17 4 17 4 15 18.17 15 14.59 11.41 16 10 22 16 16 22 14.59 20.59" />
6363
</svg>
6464
<span class="hidden sm:inline">Sign in</span>
6565
</a>
6666
</li>
6767
<li class="authenticated hidden">
68-
<a href="/profile" class="inline-flex items-center gap-1 hover:text-orange-500 focus:outline-none focus:ring-2 focus:ring-orange-500 rounded px-2 py-1 transition-colors"
68+
<a href="/profile" class="nav-link-md"
6969
title="Profile" aria-label="View profile">
70-
<svg class="w-3 h-3 sm:w-4 sm:h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" aria-hidden="true">
70+
<svg class="nav-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" aria-hidden="true">
7171
<path d="M16,8a5,5,0,1,0,5,5A5,5,0,0,0,16,8Zm0,8a3,3,0,1,1,3-3A3.0034,3.0034,0,0,1,16,16Z" />
7272
<path d="M16,2A14,14,0,1,0,30,16,14.0158,14.0158,0,0,0,16,2ZM10,26.3765V25a3.0033,3.0033,0,0,1,3-3h6a3.0033,3.0033,0,0,1,3,3v1.3765a11.8989,11.8989,0,0,1-12,0Zm13.9925-1.4507A5.0016,5.0016,0,0,0,19,20H13a5.0016,5.0016,0,0,0-4.9925,4.9258,12,12,0,1,1,15.985,0Z" />
7373
</svg>
7474
<span class="hidden sm:inline" id="username"></span>
7575
</a>
7676
</li>
7777
<li class="authenticated hidden">
78-
<a href="/dashboard" class="inline-flex items-center gap-1 hover:text-orange-500 focus:outline-none focus:ring-2 focus:ring-orange-500 rounded px-2 py-1 transition-colors"
78+
<a href="/dashboard" class="nav-link-md"
7979
title="Dashboard" aria-label="View dashboard">
80-
<svg class="w-3 h-3 sm:w-4 sm:h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" aria-hidden="true">
80+
<svg class="nav-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" aria-hidden="true">
8181
<rect x="24" y="21" width="2" height="5" />
8282
<rect x="20" y="16" width="2" height="10" />
8383
<path d="M11,26a5.0059,5.0059,0,0,1-5-5H8a3,3,0,1,0,3-3V16a5,5,0,0,1,0,10Z" />
@@ -88,9 +88,9 @@
8888
</li>
8989
<li class="authenticated hidden">
9090
<button type="button" onclick="if(typeof logout === 'function') { logout(); return false; }"
91-
class="inline-flex items-center gap-1 hover:text-orange-500 focus:outline-none focus:ring-2 focus:ring-orange-500 rounded px-2 py-1 transition-colors"
91+
class="nav-link-md"
9292
aria-label="Sign out">
93-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-3 h-3 sm:w-4 sm:h-4" aria-hidden="true">
93+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="nav-icon" aria-hidden="true">
9494
<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" />
9595
</svg>
9696
<span class="hidden sm:inline">Sign out</span>
@@ -101,7 +101,7 @@
101101
</div>
102102

103103
<!-- Main Menu Bar -->
104-
<div class="px-4 sm:px-6 lg:px-8">
104+
<div class="container-padding">
105105
<div class="flex items-center justify-between">
106106
<!-- Mobile menu button -->
107107
<button
@@ -111,187 +111,105 @@
111111
aria-controls="main-menu"
112112
aria-label="Toggle navigation menu"
113113
id="mobile-menu-button">
114-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" aria-hidden="true">
114+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="nav-icon-lg" aria-hidden="true">
115115
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
116116
</svg>
117117
</button>
118118

119119
<!-- Desktop Navigation -->
120120
<ul class="hidden lg:flex flex-row items-center" role="menubar" id="main-menu-desktop">
121+
{% assign nav_items = "development,crowdfunding,coworking,freelancers,learning,community,organization" | split: "," %}
122+
{% for item in nav_items %}
121123
<li role="none">
122-
<a class="flex items-center justify-center h-16 px-4 font-semibold text-white transition-colors hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-orange-500"
123-
href="/development"
124+
<a class="nav-menu-item"
125+
href="/{{ item }}"
124126
role="menuitem"
125-
aria-label="Development">
126-
DEVELOPMENT
127-
</a>
128-
</li>
129-
<li role="none">
130-
<a class="flex items-center justify-center h-16 px-4 font-semibold text-white transition-colors hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-orange-500"
131-
href="/crowdfunding"
132-
role="menuitem"
133-
aria-label="Crowdfunding">
134-
CROWDFUNDING
135-
</a>
136-
</li>
137-
<li role="none">
138-
<a class="flex items-center justify-center h-16 px-4 font-semibold text-white transition-colors hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-orange-500"
139-
href="/coworking"
140-
role="menuitem"
141-
aria-label="Coworking">
142-
CO-WORKING
143-
</a>
144-
</li>
145-
<li role="none">
146-
<a class="flex items-center justify-center h-16 px-4 font-semibold text-white transition-colors hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-orange-500"
147-
href="/freelancers"
148-
role="menuitem"
149-
aria-label="Freelancers">
150-
FREELANCERS
151-
</a>
152-
</li>
153-
<li role="none">
154-
<a class="flex items-center justify-center h-16 px-4 font-semibold text-white transition-colors hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-orange-500"
155-
href="/learning"
156-
role="menuitem"
157-
aria-label="Learning">
158-
LEARNING
159-
</a>
160-
</li>
161-
<li role="none">
162-
<a class="flex items-center justify-center h-16 px-4 font-semibold text-white transition-colors hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-orange-500"
163-
href="/community"
164-
role="menuitem"
165-
aria-label="Community">
166-
COMMUNITY
167-
</a>
168-
</li>
169-
<li role="none">
170-
<a class="flex items-center justify-center h-16 px-4 font-semibold text-white transition-colors hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-orange-500"
171-
href="/organization"
172-
role="menuitem"
173-
aria-label="Organization">
174-
ORGANIZATION
127+
aria-label="{{ item | capitalize }}">
128+
{{ item | upcase | replace: "-", "-" }}
175129
</a>
176130
</li>
131+
{% endfor %}
177132
</ul>
178133
</div>
179134

180135
<!-- Mobile Navigation (hidden by default) -->
181136
<ul class="lg:hidden hidden flex-col w-full absolute left-0 bg-stone-800 shadow-lg z-50 border-t border-stone-700" id="mobile-menu" role="menu">
137+
{% for item in nav_items %}
182138
<li role="none">
183-
<a class="block px-4 py-3 text-white font-semibold hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-orange-500 transition-colors"
184-
href="/development"
185-
role="menuitem"
186-
aria-label="Development">
187-
DEVELOPMENT
188-
</a>
189-
</li>
190-
<li role="none">
191-
<a class="block px-4 py-3 text-white font-semibold hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-orange-500 transition-colors"
192-
href="/crowdfunding"
193-
role="menuitem"
194-
aria-label="Crowdfunding">
195-
CROWDFUNDING
196-
</a>
197-
</li>
198-
<li role="none">
199-
<a class="block px-4 py-3 text-white font-semibold hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-orange-500 transition-colors"
200-
href="/coworking"
201-
role="menuitem"
202-
aria-label="Coworking">
203-
CO-WORKING
204-
</a>
205-
</li>
206-
<li role="none">
207-
<a class="block px-4 py-3 text-white font-semibold hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-orange-500 transition-colors"
208-
href="/freelancers"
209-
role="menuitem"
210-
aria-label="Freelancers">
211-
FREELANCERS
212-
</a>
213-
</li>
214-
<li role="none">
215-
<a class="block px-4 py-3 text-white font-semibold hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-orange-500 transition-colors"
216-
href="/learning"
217-
role="menuitem"
218-
aria-label="Learning">
219-
LEARNING
220-
</a>
221-
</li>
222-
<li role="none">
223-
<a class="block px-4 py-3 text-white font-semibold hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-orange-500 transition-colors"
224-
href="/community"
139+
<a class="nav-menu-item-mobile"
140+
href="/{{ item }}"
225141
role="menuitem"
226-
aria-label="Community">
227-
COMMUNITY
228-
</a>
229-
</li>
230-
<li role="none">
231-
<a class="block px-4 py-3 text-white font-semibold hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-orange-500 transition-colors"
232-
href="/organization"
233-
role="menuitem"
234-
aria-label="Organization">
235-
ORGANIZATION
142+
aria-label="{{ item | capitalize }}">
143+
{{ item | upcase | replace: "-", "-" }}
236144
</a>
237145
</li>
146+
{% endfor %}
238147
</ul>
239148
</div>
240149
</div>
241150
</nav>
242151

243152
{% if page.title %}
244153
<header class="bg-white border-b border-stone-200" role="banner">
245-
<div class="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
246-
<h1 class="text-2xl sm:text-3xl font-semibold text-gray-900">
154+
<div class="max-w-7xl mx-auto container-padding py-4">
155+
<h1 class="heading-3 text-gray-900">
247156
{{ page.title }}
248157
</h1>
249158
</div>
250159
</header>
251160
{% endif %}
252161

253162
<script>
254-
// Mobile menu toggle
255-
document.addEventListener('DOMContentLoaded', function() {
163+
// Mobile menu toggle with better practices
164+
(function() {
165+
'use strict';
166+
256167
const mobileMenuButton = document.getElementById('mobile-menu-button');
257168
const mobileMenu = document.getElementById('mobile-menu');
258169

259-
if (mobileMenuButton && mobileMenu) {
260-
mobileMenuButton.addEventListener('click', function() {
261-
const isExpanded = mobileMenuButton.getAttribute('aria-expanded') === 'true';
262-
mobileMenu.classList.toggle('hidden');
263-
mobileMenuButton.setAttribute('aria-expanded', !isExpanded);
264-
265-
// Update icon
170+
if (!mobileMenuButton || !mobileMenu) return;
171+
172+
const toggleMenu = () => {
173+
const isExpanded = mobileMenuButton.getAttribute('aria-expanded') === 'true';
174+
mobileMenu.classList.toggle('hidden');
175+
mobileMenuButton.setAttribute('aria-expanded', String(!isExpanded));
176+
177+
// Update icon
178+
const icon = mobileMenuButton.querySelector('svg path');
179+
if (icon) {
180+
icon.setAttribute('d', isExpanded
181+
? 'M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5'
182+
: 'M6 18L18 6M6 6l12 12'
183+
);
184+
icon.setAttribute('stroke-linecap', 'round');
185+
icon.setAttribute('stroke-linejoin', 'round');
186+
}
187+
};
188+
189+
const closeMenu = () => {
190+
if (!mobileMenu.classList.contains('hidden')) {
191+
mobileMenu.classList.add('hidden');
192+
mobileMenuButton.setAttribute('aria-expanded', 'false');
266193
const icon = mobileMenuButton.querySelector('svg path');
267194
if (icon) {
268-
if (!isExpanded) {
269-
// Change to X icon
270-
icon.setAttribute('d', 'M6 18L18 6M6 6l12 12');
271-
icon.setAttribute('stroke-linecap', 'round');
272-
icon.setAttribute('stroke-linejoin', 'round');
273-
} else {
274-
// Change back to hamburger
275-
icon.setAttribute('d', 'M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5');
276-
icon.setAttribute('stroke-linecap', 'round');
277-
icon.setAttribute('stroke-linejoin', 'round');
278-
}
279-
}
280-
});
281-
282-
// Close menu when clicking outside
283-
document.addEventListener('click', function(event) {
284-
if (!mobileMenuButton.contains(event.target) && !mobileMenu.contains(event.target)) {
285-
if (!mobileMenu.classList.contains('hidden')) {
286-
mobileMenu.classList.add('hidden');
287-
mobileMenuButton.setAttribute('aria-expanded', 'false');
288-
const icon = mobileMenuButton.querySelector('svg path');
289-
if (icon) {
290-
icon.setAttribute('d', 'M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5');
291-
}
292-
}
195+
icon.setAttribute('d', 'M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5');
293196
}
294-
});
295-
}
296-
});
197+
}
198+
};
199+
200+
mobileMenuButton.addEventListener('click', toggleMenu);
201+
202+
// Close menu when clicking outside or pressing Escape
203+
document.addEventListener('click', (e) => {
204+
if (!mobileMenuButton.contains(e.target) && !mobileMenu.contains(e.target)) {
205+
closeMenu();
206+
}
207+
});
208+
209+
document.addEventListener('keydown', (e) => {
210+
if (e.key === 'Escape') {
211+
closeMenu();
212+
}
213+
});
214+
})();
297215
</script>

0 commit comments

Comments
 (0)