Skip to content

Commit f1e9a4b

Browse files
marypas74claude
marypas74
and
claude
committed
feat(UI): Expanded Categories menu with 16 categories in 4x4 grid
## Categories Menu Enhancements (v2.1.0-dev) **16 Categories organized in 4 rows:** Row 1 - Tech & Development: - Development, IT & Software, Data Science, Cloud & DevOps Row 2 - Business & Finance: - Business, Finance, Marketing, Entrepreneurship Row 3 - Creative: - Design, Photography, Video & Film, Music Row 4 - Personal & Lifestyle: - Personal Growth, Health & Fitness, Languages, Academics **Design Features:** - 4-column grid layout (responsive: 3 cols tablet, 2 cols mobile) - Color-coded icons for each category - Icon hover animation (scale 1.15) - Dual footer links: View All Categories + Browse All Courses - Smooth transitions and hover effects 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
1 parent 14ab8b9 commit f1e9a4b

File tree

2 files changed

+209
-12
lines changed

2 files changed

+209
-12
lines changed

‎src/InsightLearn.WebAssembly/Layout/MainLayout.razor‎

Lines changed: 73 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -48,29 +48,90 @@
4848
<span class="desktop-only">Categories</span>
4949
<i class="fas fa-chevron-down dropdown-arrow @(isCategoriesOpen ? "rotated" : "")" aria-hidden="true"></i>
5050
</button>
51-
<div class="dropdown-menu categories-menu @(isCategoriesOpen ? "show" : "")" role="menu">
52-
<div class="categories-grid">
51+
<div class="dropdown-menu categories-menu categories-menu-expanded @(isCategoriesOpen ? "show" : "")" role="menu">
52+
<div class="categories-grid categories-grid-expanded">
53+
@* Row 1: Tech & Development *@
5354
<a href="/categories/development" class="category-item">
54-
<i class="fas fa-code"></i>
55+
<i class="fas fa-code" style="color: #3b82f6;"></i>
5556
<span>Development</span>
5657
</a>
58+
<a href="/categories/it-software" class="category-item">
59+
<i class="fas fa-laptop-code" style="color: #6366f1;"></i>
60+
<span>IT & Software</span>
61+
</a>
62+
<a href="/categories/data-science" class="category-item">
63+
<i class="fas fa-database" style="color: #8b5cf6;"></i>
64+
<span>Data Science</span>
65+
</a>
66+
<a href="/categories/cloud-devops" class="category-item">
67+
<i class="fas fa-cloud" style="color: #0ea5e9;"></i>
68+
<span>Cloud & DevOps</span>
69+
</a>
70+
71+
@* Row 2: Business & Finance *@
5772
<a href="/categories/business" class="category-item">
58-
<i class="fas fa-briefcase"></i>
73+
<i class="fas fa-briefcase" style="color: #f59e0b;"></i>
5974
<span>Business</span>
6075
</a>
61-
<a href="/categories/design" class="category-item">
62-
<i class="fas fa-palette"></i>
63-
<span>Design</span>
76+
<a href="/categories/finance" class="category-item">
77+
<i class="fas fa-calculator" style="color: #10b981;"></i>
78+
<span>Finance</span>
6479
</a>
6580
<a href="/categories/marketing" class="category-item">
66-
<i class="fas fa-bullhorn"></i>
81+
<i class="fas fa-bullhorn" style="color: #ef4444;"></i>
6782
<span>Marketing</span>
6883
</a>
84+
<a href="/categories/entrepreneurship" class="category-item">
85+
<i class="fas fa-rocket" style="color: #f97316;"></i>
86+
<span>Entrepreneurship</span>
87+
</a>
88+
89+
@* Row 3: Creative *@
90+
<a href="/categories/design" class="category-item">
91+
<i class="fas fa-palette" style="color: #ec4899;"></i>
92+
<span>Design</span>
93+
</a>
94+
<a href="/categories/photography" class="category-item">
95+
<i class="fas fa-camera" style="color: #14b8a6;"></i>
96+
<span>Photography</span>
97+
</a>
98+
<a href="/categories/video" class="category-item">
99+
<i class="fas fa-video" style="color: #a855f7;"></i>
100+
<span>Video & Film</span>
101+
</a>
102+
<a href="/categories/music" class="category-item">
103+
<i class="fas fa-music" style="color: #06b6d4;"></i>
104+
<span>Music</span>
105+
</a>
106+
107+
@* Row 4: Personal & Lifestyle *@
108+
<a href="/categories/personal-development" class="category-item">
109+
<i class="fas fa-brain" style="color: #8b5cf6;"></i>
110+
<span>Personal Growth</span>
111+
</a>
112+
<a href="/categories/health-fitness" class="category-item">
113+
<i class="fas fa-heartbeat" style="color: #ef4444;"></i>
114+
<span>Health & Fitness</span>
115+
</a>
116+
<a href="/categories/languages" class="category-item">
117+
<i class="fas fa-language" style="color: #3b82f6;"></i>
118+
<span>Languages</span>
119+
</a>
120+
<a href="/categories/academics" class="category-item">
121+
<i class="fas fa-graduation-cap" style="color: #f59e0b;"></i>
122+
<span>Academics</span>
123+
</a>
124+
</div>
125+
<div class="categories-footer">
126+
<a href="/categories" class="view-all-link">
127+
<i class="fas fa-th"></i>
128+
<span>View All Categories</span>
129+
</a>
130+
<a href="/courses" class="browse-courses-link">
131+
<i class="fas fa-book-open"></i>
132+
<span>Browse All Courses</span>
133+
</a>
69134
</div>
70-
<a href="/categories" class="view-all-link">
71-
<i class="fas fa-th"></i>
72-
<span>View All Categories</span>
73-
</a>
74135
</div>
75136
</div>
76137

‎src/InsightLearn.WebAssembly/wwwroot/css/header-clean.css‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -569,6 +569,142 @@ body {
569569
box-shadow: 0 8px 20px rgba(164, 53, 240, 0.4);
570570
}
571571

572+
/* ===================================
573+
EXPANDED CATEGORIES MENU (v2.1.0)
574+
16 categories in 4x4 grid layout
575+
=================================== */
576+
577+
.categories-menu-expanded {
578+
min-width: 520px;
579+
max-width: 580px;
580+
padding: 0;
581+
}
582+
583+
.categories-grid-expanded {
584+
display: grid;
585+
grid-template-columns: repeat(4, 1fr);
586+
gap: var(--space-xs);
587+
padding: var(--space-md);
588+
}
589+
590+
.categories-grid-expanded .category-item {
591+
flex-direction: column;
592+
text-align: center;
593+
padding: var(--space-md) var(--space-sm);
594+
gap: var(--space-sm);
595+
min-height: 80px;
596+
justify-content: center;
597+
}
598+
599+
.categories-grid-expanded .category-item i {
600+
font-size: 24px;
601+
transition: transform 0.2s ease;
602+
}
603+
604+
.categories-grid-expanded .category-item:hover i {
605+
transform: scale(1.15);
606+
}
607+
608+
.categories-grid-expanded .category-item span {
609+
font-size: 12px;
610+
font-weight: 600;
611+
line-height: 1.2;
612+
color: var(--text-primary);
613+
}
614+
615+
.categories-grid-expanded .category-item:hover {
616+
background: var(--bg-hover);
617+
transform: translateY(-2px);
618+
}
619+
620+
/* Categories Footer with dual links */
621+
.categories-menu-expanded .categories-footer {
622+
display: flex;
623+
justify-content: space-between;
624+
align-items: center;
625+
padding: var(--space-md) var(--space-lg);
626+
background: var(--bg-secondary);
627+
border-top: 1px solid var(--border-light);
628+
gap: var(--space-md);
629+
}
630+
631+
.categories-menu-expanded .view-all-link,
632+
.categories-menu-expanded .browse-courses-link {
633+
display: flex;
634+
align-items: center;
635+
gap: var(--space-sm);
636+
padding: var(--space-sm) var(--space-md);
637+
font-size: 13px;
638+
font-weight: 600;
639+
color: var(--primary);
640+
text-decoration: none;
641+
border-radius: var(--radius-md);
642+
transition: all 0.2s ease;
643+
}
644+
645+
.categories-menu-expanded .view-all-link:hover,
646+
.categories-menu-expanded .browse-courses-link:hover {
647+
background: var(--primary);
648+
color: white;
649+
}
650+
651+
.categories-menu-expanded .view-all-link i,
652+
.categories-menu-expanded .browse-courses-link i {
653+
font-size: 14px;
654+
}
655+
656+
/* Responsive: Tablet */
657+
@media (max-width: 768px) {
658+
.categories-menu-expanded {
659+
min-width: 320px;
660+
max-width: 360px;
661+
right: -60px;
662+
}
663+
664+
.categories-grid-expanded {
665+
grid-template-columns: repeat(3, 1fr);
666+
gap: var(--space-xs);
667+
padding: var(--space-sm);
668+
}
669+
670+
.categories-grid-expanded .category-item {
671+
min-height: 70px;
672+
padding: var(--space-sm);
673+
}
674+
675+
.categories-grid-expanded .category-item i {
676+
font-size: 20px;
677+
}
678+
679+
.categories-grid-expanded .category-item span {
680+
font-size: 11px;
681+
}
682+
683+
.categories-menu-expanded .categories-footer {
684+
flex-direction: column;
685+
gap: var(--space-sm);
686+
}
687+
688+
.categories-menu-expanded .view-all-link,
689+
.categories-menu-expanded .browse-courses-link {
690+
width: 100%;
691+
justify-content: center;
692+
}
693+
}
694+
695+
/* Responsive: Mobile */
696+
@media (max-width: 480px) {
697+
.categories-menu-expanded {
698+
min-width: 280px;
699+
max-width: 300px;
700+
right: -80px;
701+
}
702+
703+
.categories-grid-expanded {
704+
grid-template-columns: repeat(2, 1fr);
705+
}
706+
}
707+
572708
/* Generic dropdown trigger (for non-categories dropdowns) */
573709
.dropdown-trigger:not(.categories-trigger) {
574710
display: flex;

0 commit comments

Comments
 (0)