Skip to content

Commit c1414c2

Browse files
cursoragentcursoragent
committed
Fix navigation: standardize icon sizes and ensure menu visibility
- Fix inconsistent icon sizes in top navigation bar - Standardize all icons to viewBox 0 0 24 24 for consistency - Replace 32x32 viewBox icons with 24x24 equivalents - Ensure desktop navigation menu is always visible - Fix mobile menu positioning and visibility - Add explicit width/height to nav-icon class for consistency - Remove Liquid loops that may cause rendering issues
1 parent 8eea9b6 commit c1414c2

File tree

2 files changed

+48
-28
lines changed

2 files changed

+48
-28
lines changed

‎_includes/portal.html‎

Lines changed: 44 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -57,31 +57,26 @@
5757
<li class="guest hidden">
5858
<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="nav-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" aria-hidden="true">
61-
<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" />
62-
<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" />
60+
<svg class="nav-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
61+
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15M12 9l-3 3m0 0 3 3m-3-3h12.75" />
6362
</svg>
6463
<span class="hidden sm:inline">Sign in</span>
6564
</a>
6665
</li>
6766
<li class="authenticated hidden">
6867
<a href="/profile" class="nav-link-md"
6968
title="Profile" aria-label="View profile">
70-
<svg class="nav-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" aria-hidden="true">
71-
<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" />
72-
<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" />
69+
<svg class="nav-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
70+
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
7371
</svg>
7472
<span class="hidden sm:inline" id="username"></span>
7573
</a>
7674
</li>
7775
<li class="authenticated hidden">
7876
<a href="/dashboard" class="nav-link-md"
7977
title="Dashboard" aria-label="View dashboard">
80-
<svg class="nav-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" aria-hidden="true">
81-
<rect x="24" y="21" width="2" height="5" />
82-
<rect x="20" y="16" width="2" height="10" />
83-
<path d="M11,26a5.0059,5.0059,0,0,1-5-5H8a3,3,0,1,0,3-3V16a5,5,0,0,1,0,10Z" />
84-
<path d="M28,2H4A2.002,2.002,0,0,0,2,4V28a2.0023,2.0023,0,0,0,2,2H28a2.0027,2.0027,0,0,0,2-2V4A2.0023,2.0023,0,0,0,28,2Zm0,9H14V4H28ZM12,4v7H4V4ZM4,28V13H28.0007l.0013,15Z" />
78+
<svg class="nav-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
79+
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z" />
8580
</svg>
8681
<span class="hidden sm:inline">Dashboard</span>
8782
</a>
@@ -118,32 +113,53 @@
118113

119114
<!-- Desktop Navigation -->
120115
<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 %}
123116
<li role="none">
124-
<a class="nav-menu-item"
125-
href="/{{ item }}"
126-
role="menuitem"
127-
aria-label="{{ item | capitalize }}">
128-
{{ item | upcase | replace: "-", "-" }}
129-
</a>
117+
<a class="nav-menu-item" href="/development" role="menuitem" aria-label="Development">DEVELOPMENT</a>
118+
</li>
119+
<li role="none">
120+
<a class="nav-menu-item" href="/crowdfunding" role="menuitem" aria-label="Crowdfunding">CROWDFUNDING</a>
121+
</li>
122+
<li role="none">
123+
<a class="nav-menu-item" href="/coworking" role="menuitem" aria-label="Coworking">CO-WORKING</a>
124+
</li>
125+
<li role="none">
126+
<a class="nav-menu-item" href="/freelancers" role="menuitem" aria-label="Freelancers">FREELANCERS</a>
127+
</li>
128+
<li role="none">
129+
<a class="nav-menu-item" href="/learning" role="menuitem" aria-label="Learning">LEARNING</a>
130+
</li>
131+
<li role="none">
132+
<a class="nav-menu-item" href="/community" role="menuitem" aria-label="Community">COMMUNITY</a>
133+
</li>
134+
<li role="none">
135+
<a class="nav-menu-item" href="/organization" role="menuitem" aria-label="Organization">ORGANIZATION</a>
130136
</li>
131-
{% endfor %}
132137
</ul>
133138
</div>
134139

135140
<!-- Mobile Navigation (hidden by default) -->
136141
<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 %}
138142
<li role="none">
139-
<a class="nav-menu-item-mobile"
140-
href="/{{ item }}"
141-
role="menuitem"
142-
aria-label="{{ item | capitalize }}">
143-
{{ item | upcase | replace: "-", "-" }}
144-
</a>
143+
<a class="nav-menu-item-mobile" href="/development" role="menuitem" aria-label="Development">DEVELOPMENT</a>
144+
</li>
145+
<li role="none">
146+
<a class="nav-menu-item-mobile" href="/crowdfunding" role="menuitem" aria-label="Crowdfunding">CROWDFUNDING</a>
147+
</li>
148+
<li role="none">
149+
<a class="nav-menu-item-mobile" href="/coworking" role="menuitem" aria-label="Coworking">CO-WORKING</a>
150+
</li>
151+
<li role="none">
152+
<a class="nav-menu-item-mobile" href="/freelancers" role="menuitem" aria-label="Freelancers">FREELANCERS</a>
153+
</li>
154+
<li role="none">
155+
<a class="nav-menu-item-mobile" href="/learning" role="menuitem" aria-label="Learning">LEARNING</a>
156+
</li>
157+
<li role="none">
158+
<a class="nav-menu-item-mobile" href="/community" role="menuitem" aria-label="Community">COMMUNITY</a>
159+
</li>
160+
<li role="none">
161+
<a class="nav-menu-item-mobile" href="/organization" role="menuitem" aria-label="Organization">ORGANIZATION</a>
145162
</li>
146-
{% endfor %}
147163
</ul>
148164
</div>
149165
</div>

‎_sass/main.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,10 @@ select:focus {
7979
.nav-icon {
8080
@apply w-4 h-4;
8181
flex-shrink: 0;
82+
width: 1rem;
83+
height: 1rem;
84+
display: inline-block;
85+
vertical-align: middle;
8286
}
8387

8488
.nav-icon-lg {

0 commit comments

Comments
 (0)