remco/EpicNext-Cms
1
1 Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: complete header and dropdown redesign for professional look

Browse Source 
- Redesign site header with multi-layer gradient overlays, decorative glows, dot pattern texture, responsive clamp font sizing, and animated ping online badge
- Add glass-dropdown CSS class with 60% opacity backdrop blur (20px) and smooth dropdownIn animation (scale + translate)
- Fix dropdown positioning with top-full for proper alignment under menu triggers
- Standardize all dropdowns (nav, top-header, color picker, language switcher) to use glass-dropdown class
This commit is contained in:
remco committed 2026-07-01 17:28:10 +02:00
1 parent 5bddf99cbe
commit 1e787c6c62
6 files changed
+73 -73
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/navigation.tsx
+9 -18
View File
@@ -36,16 +36,13 @@ export async function Navigation() {
{t("community")}
<svg className="ml-auto md:ml-1 w-3 h-3 transition-transform duration-200 group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
</summary>
<div
className="md:absolute static left-0 mt-1.5 md:min-w-[200px] rounded-xl md:shadow-xl z-50 py-2 border backdrop-blur-md md:ml-0 ml-4"
style={{ backgroundColor: "color-mix(in srgb, var(--color-dropdown) 80%, transparent)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}
>
<Link href="/news" className="dropdown-item">{t("articles")}</Link>
<Link href="/photos" className="dropdown-item">{t("photos")}</Link>
<Link href="/staff" className="dropdown-item">{t("staff")}</Link>
<Link href="/rankings" className="dropdown-item">{t("rankings")}</Link>
<Link href="/guilds" className="dropdown-item">{t("guilds")}</Link>
</div>
<div className="glass-dropdown md:absolute left-0 top-full mt-0.5 min-w-[200px] rounded-xl z-50 py-2">
<Link href="/news" className="dropdown-item">{t("articles")}</Link>
<Link href="/photos" className="dropdown-item">{t("photos")}</Link>
<Link href="/staff" className="dropdown-item">{t("staff")}</Link>
<Link href="/rankings" className="dropdown-item">{t("rankings")}</Link>
<Link href="/guilds" className="dropdown-item">{t("guilds")}</Link>
</div>
</details>
<details className="relative group md:flex">
@@ -54,10 +51,7 @@ export async function Navigation() {
{t("shop")}
<svg className="ml-auto md:ml-1 w-3 h-3 transition-transform duration-200 group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
</summary>
<div
className="md:absolute left-0 mt-1.5 min-w-[200px] rounded-xl shadow-xl z-50 py-2 border backdrop-blur-md"
style={{ backgroundColor: "color-mix(in srgb, var(--color-dropdown) 80%, transparent)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}
>
<div className="glass-dropdown md:absolute left-0 top-full mt-0.5 min-w-[200px] rounded-xl z-50 py-2">
<Link href="/shop" className="dropdown-item">{t("shop")}</Link>
<Link href="/marketplace" className="dropdown-item">{t("market")}</Link>
<Link href="/rares" className="dropdown-item">{t("rareValues")}</Link>
@@ -80,10 +74,7 @@ export async function Navigation() {
{t("assistance")}
<svg className="ml-auto md:ml-1 w-3 h-3 transition-transform duration-200 group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
</summary>
<div
className="md:absolute left-0 mt-1.5 min-w-[200px] rounded-xl shadow-xl z-50 py-2 border backdrop-blur-md"
style={{ backgroundColor: "color-mix(in srgb, var(--color-dropdown) 80%, transparent)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}
>
<div className="glass-dropdown md:absolute left-0 top-full mt-0.5 min-w-[200px] rounded-xl z-50 py-2">
<Link href="/help" className="dropdown-item">{t("helpCenter")}</Link>
{session?.user ? (
<Link href="/help/tickets" className="dropdown-item">{t("myTickets")}</Link>