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

Replace PNG icons with Habbo-style SVG pixel art icons across index, nav, and mobile nav
Deploy / release (push) Skipped
Details
Deploy / deploy (push) Successful in 1m59s
Details

Browse Source 
- Create 20 Habbo-style pixel-art SVG icon components (home, user, catalog, star, community, games, enter, news, online, camera, chat, clock, heart, arrow, cog, furni, diamond, credits, duckets, rank)
- Update index page: replace all PNG icon references, add pixel font headings, add Habbo-style gradient section headers
- Update navigation: replace all PNG nav icons with Habbo SVG icons
- Update NavDropdown: accept ReactNode icon instead of string path
- Update mobile-nav: replace PNG brand icon with HabboHome SVG
This commit is contained in:
openhands committed 2026-07-23 16:36:32 +02:00
1 parent 255c09b9fd
commit ac16df98c3
5 files changed
+575 -313
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/navigation.tsx
+46 -125
View File
@@ -1,4 +1,3 @@
import Image from "next/image";
import Link from "next/link";
import type { Session } from "next-auth";
import { getTranslations } from "next-intl/server";
@@ -9,6 +8,17 @@ import { NavbarColorPicker } from "@/components/navbar-color-picker";
import { ThemeSwitcher } from "@/components/theme-switcher";
import { resolveHotelName } from "@/lib/hotel-name";
import { canAccess, getApiAdminContext, PERMS } from "@/lib/permissions";
import {
HabboHome,
HabboCommunity,
HabboCatalog,
HabboRank,
HabboGames,
HabboHeart,
HabboOnline,
HabboChat,
HabboCog,
} from "@/components/shared/habbo-icons";
export async function Navigation({ session }: { session: Session | null }) {
const t = await getTranslations("nav");
@@ -53,14 +63,8 @@ export async function Navigation({ session }: { session: Session | null }) {
{/* Desktop: home link */}
<div className="hidden md:flex items-center gap-x-1">
<Link href="/" className="nav-item shrink-0">
<Image
src="/assets/images/icons/navigation/me.png"
alt=""
width={20}
height={20}
className="mr-1.5"
/>
<span>{t("home")}</span>
<HabboHome size={18} />
<span className="ml-1.5">{t("home")}</span>
</Link>
</div>
@@ -68,7 +72,7 @@ export async function Navigation({ session }: { session: Session | null }) {
<div className="hidden md:flex items-center gap-x-1">
<NavDropdown
label={t("community")}
icon="/assets/images/icons/navigation/community.png"
icon={<HabboCommunity size={18} />}
>
<Link href="/news" className="dropdown-item" role="menuitem">
{t("articles")}
@@ -95,7 +99,7 @@ export async function Navigation({ session }: { session: Session | null }) {
<NavDropdown
label={t("shop")}
icon="/assets/images/icons/navigation/shop.png"
icon={<HabboCatalog size={18} />}
>
<Link href="/shop" className="dropdown-item" role="menuitem">
{t("shop")}
@@ -109,30 +113,18 @@ export async function Navigation({ session }: { session: Session | null }) {
</NavDropdown>
<Link href="/leaderboard" className="nav-item">
<Image
src="/assets/images/icons/navigation/leaderboards.png"
alt=""
width={20}
height={20}
className="mr-1.5"
/>
{t("leaderboards")}
<HabboRank size={18} />
<span className="ml-1.5">{t("leaderboards")}</span>
</Link>
<Link href="/radio" className="nav-item">
<Image
src="/assets/images/icons/navigation/bb.png"
alt=""
width={20}
height={20}
className="mr-1.5"
/>
{t("radio")}
<HabboGames size={18} />
<span className="ml-1.5">{t("radio")}</span>
</Link>
<NavDropdown
label={t("assistance")}
icon="/assets/images/icons/navigation/rules.gif"
icon={<HabboHeart size={18} />}
>
<Link href="/help" className="dropdown-item" role="menuitem">
{t("helpCenter")}
@@ -157,51 +149,27 @@ export async function Navigation({ session }: { session: Session | null }) {
{session?.user ? (
<>
<Link href="/friends" className="nav-item">
<Image
src="/assets/images/icons/navigation/goody.png"
alt=""
width={20}
height={20}
className="mr-1.5"
/>
{t("friends")}
<HabboOnline size={18} />
<span className="ml-1.5">{t("friends")}</span>
</Link>
<Link href="/messages" className="nav-item">
<Image
src="/assets/images/icons/navigation/bb.png"
alt=""
width={20}
height={20}
className="mr-1.5"
/>
{t("messages")}
<HabboChat size={18} />
<span className="ml-1.5">{t("messages")}</span>
</Link>
</>
) : null}
{showMod ? (
<Link href="/mod" className="nav-item">
<Image
src="/assets/images/icons/navigation/home.png"
alt=""
width={20}
height={20}
className="mr-1.5"
/>
{t("mod")}
<HabboCog size={18} />
<span className="ml-1.5">{t("mod")}</span>
</Link>
) : null}
{showAdmin ? (
<Link href="/admin" className="nav-item">
<Image
src="/assets/images/icons/navigation/home.png"
alt=""
width={20}
height={20}
className="mr-1.5"
/>
{t("admin")}
<HabboCog size={18} />
<span className="ml-1.5">{t("admin")}</span>
</Link>
) : null}
</div>
@@ -213,19 +181,13 @@ export async function Navigation({ session }: { session: Session | null }) {
brandLabel={brandLabel}
>
<Link href="/" className="nav-item">
<Image
src="/assets/images/icons/navigation/me.png"
alt=""
width={20}
height={20}
className="mr-1.5"
/>
{t("home")}
<HabboHome size={18} />
<span className="ml-1.5">{t("home")}</span>
</Link>
<NavDropdown
label={t("community")}
icon="/assets/images/icons/navigation/community.png"
icon={<HabboCommunity size={18} />}
>
<Link href="/news" className="dropdown-item" role="menuitem">
{t("articles")}
@@ -252,7 +214,7 @@ export async function Navigation({ session }: { session: Session | null }) {
<NavDropdown
label={t("shop")}
icon="/assets/images/icons/navigation/shop.png"
icon={<HabboCatalog size={18} />}
>
<Link href="/shop" className="dropdown-item" role="menuitem">
{t("shop")}
@@ -266,30 +228,18 @@ export async function Navigation({ session }: { session: Session | null }) {
</NavDropdown>
<Link href="/leaderboard" className="nav-item">
<Image
src="/assets/images/icons/navigation/leaderboards.png"
alt=""
width={20}
height={20}
className="mr-1.5"
/>
{t("leaderboards")}
<HabboRank size={18} />
<span className="ml-1.5">{t("leaderboards")}</span>
</Link>
<Link href="/radio" className="nav-item">
<Image
src="/assets/images/icons/navigation/bb.png"
alt=""
width={20}
height={20}
className="mr-1.5"
/>
{t("radio")}
<HabboGames size={18} />
<span className="ml-1.5">{t("radio")}</span>
</Link>
<NavDropdown
label={t("assistance")}
icon="/assets/images/icons/navigation/rules.gif"
icon={<HabboHeart size={18} />}
>
<Link href="/help" className="dropdown-item" role="menuitem">
{t("helpCenter")}
@@ -314,51 +264,27 @@ export async function Navigation({ session }: { session: Session | null }) {
{session?.user ? (
<>
<Link href="/friends" className="nav-item">
<Image
src="/assets/images/icons/navigation/goody.png"
alt=""
width={20}
height={20}
className="mr-1.5"
/>
{t("friends")}
<HabboOnline size={18} />
<span className="ml-1.5">{t("friends")}</span>
</Link>
<Link href="/messages" className="nav-item">
<Image
src="/assets/images/icons/navigation/bb.png"
alt=""
width={20}
height={20}
className="mr-1.5"
/>
{t("messages")}
<HabboChat size={18} />
<span className="ml-1.5">{t("messages")}</span>
</Link>
</>
) : null}
{showMod ? (
<Link href="/mod" className="nav-item">
<Image
src="/assets/images/icons/navigation/home.png"
alt=""
width={20}
height={20}
className="mr-1.5"
/>
{t("mod")}
<HabboCog size={18} />
<span className="ml-1.5">{t("mod")}</span>
</Link>
) : null}
{showAdmin ? (
<Link href="/admin" className="nav-item">
<Image
src="/assets/images/icons/navigation/home.png"
alt=""
width={20}
height={20}
className="mr-1.5"
/>
{t("admin")}
<HabboCog size={18} />
<span className="ml-1.5">{t("admin")}</span>
</Link>
) : null}
@@ -381,12 +307,7 @@ export async function Navigation({ session }: { session: Session | null }) {
className="ml-auto flex md:hidden items-center gap-2 shrink-0"
aria-label="Home"
>
<Image
src="/assets/images/icons/navigation/home.png"
alt=""
width={26}
height={26}
/>
<HabboHome size={24} />
<span
className="text-base font-extrabold uppercase tracking-wide"
style={{