feat: polish figma mobile home and nav

src/layouts/PublicLayout.tsx

@@ -29,11 +29,11 @@ function navIsActive(
     case "categories":
       return pathname === "/" && hash === "#categories";
     case "browseLatest":
-      return pathname === "/browse" && sp.get("sort") === "latest";
+      return pathname === "/" && hash === "#latest";
     case "browseRecommended":
-      return pathname === "/browse" && sp.get("sort") === "recommended";
+      return pathname === "/" && hash === "#official";
     case "browsePopular":
-      return pathname === "/browse" && sp.get("sort") === "popular";
+      return pathname === "/" && hash === "#popular";
     case "about":
       return pathname === "/about";
     default:
@@ -266,6 +266,7 @@ export function PublicLayout() {
 
   const na = (which: PublicNavWhich) =>
     navIsActive(pathname, search, hash, which);
+  const isHome = pathname === "/";
   const footerInContentFlow =
     pathname === "/browse" || pathname.startsWith("/category/");
 
@@ -280,13 +281,13 @@ export function PublicLayout() {
   return (
     <div className="min-h-full flex flex-col">
       <header className="sticky top-0 z-40 bg-[#08070c] backdrop-blur-md md:border-b md:border-ark-line md:bg-ark-nav/98">
-        <div className="flex h-[64px] items-center justify-between bg-[#08070c] px-[20px] py-[12px] md:hidden">
+        <div className="flex h-[64px] items-center justify-between bg-[#08070c] px-4 py-3 md:hidden">
           <Link
             to="/"
-            className="flex h-[28px] shrink-0 items-center gap-[8px] rounded-sm text-[18px] font-bold tracking-wide text-ark-gold outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-[#08070c]"
+            className="flex h-8 shrink-0 items-center gap-2 rounded-sm text-[20px] font-black leading-5 tracking-tight text-ark-gold outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-[#08070c]"
             aria-label={t("brand")}
           >
-            <ArkLogoMark className="h-[28px] w-[28px] shrink-0" />
+            <ArkLogoMark className="h-8 w-8 shrink-0" />
             <span className="truncate text-ark-gold">{t("brand")}</span>
           </Link>
 
@@ -379,13 +380,6 @@ export function PublicLayout() {
               className="header-nav-scroll hidden min-w-0 flex-1 items-center justify-center gap-4 overflow-x-auto overflow-y-hidden py-1 min-[1200px]:flex lg:gap-5"
               aria-label={t("mainNav")}
             >
-              <Link
-                to="/"
-                className={navClassName(na("home"))}
-                aria-current={na("home") ? "page" : undefined}
-              >
-                {t("home")}
-              </Link>
               <Link
                 to="/browse"
                 className={navClassName(na("browseAll"))}
@@ -401,26 +395,33 @@ export function PublicLayout() {
                 {t("categories")}
               </Link>
               <Link
-                to="/browse?sort=latest"
-                className={navClassName(na("browseLatest"))}
-                aria-current={na("browseLatest") ? "page" : undefined}
-              >
-                {t("latest")}
-              </Link>
-              <Link
-                to="/browse?sort=recommended"
+                to="/#official"
                 className={navClassName(na("browseRecommended"))}
                 aria-current={na("browseRecommended") ? "page" : undefined}
               >
                 {t("official")}
               </Link>
               <Link
-                to="/browse?sort=popular"
+                to="/#latest"
+                className={navClassName(na("browseLatest"))}
+                aria-current={na("browseLatest") ? "page" : undefined}
+              >
+                {t("latest")}
+              </Link>
+              <Link
+                to="/#popular"
                 className={navClassName(na("browsePopular"))}
                 aria-current={na("browsePopular") ? "page" : undefined}
               >
                 {t("popular")}
               </Link>
+              <Link
+                to="/about"
+                className={navClassName(na("about"))}
+                aria-current={na("about") ? "page" : undefined}
+              >
+                {t("footerAbout")}
+              </Link>
             </nav>
 
             <div className="flex min-w-0 flex-1 items-center justify-end gap-2 min-[1200px]:flex-none">
@@ -470,14 +471,6 @@ export function PublicLayout() {
               ariaLabel={t("langLabel")}
               className="mb-1 hidden md:block"
             />
-            <Link
-              to="/"
-              className={navClassName(na("home"))}
-              aria-current={na("home") ? "page" : undefined}
-              onClick={() => setOpen(false)}
-            >
-              {t("home")}
-            </Link>
             <Link
               to="/browse"
               className={navClassName(na("browseAll"))}
@@ -495,15 +488,7 @@ export function PublicLayout() {
               {t("categories")}
             </Link>
             <Link
-              to="/browse?sort=latest"
-              className={navClassName(na("browseLatest"))}
-              aria-current={na("browseLatest") ? "page" : undefined}
-              onClick={() => setOpen(false)}
-            >
-              {t("latest")}
-            </Link>
-            <Link
-              to="/browse?sort=recommended"
+              to="/#official"
               className={navClassName(na("browseRecommended"))}
               aria-current={na("browseRecommended") ? "page" : undefined}
               onClick={() => setOpen(false)}
@@ -511,7 +496,15 @@ export function PublicLayout() {
               {t("official")}
             </Link>
             <Link
-              to="/browse?sort=popular"
+              to="/#latest"
+              className={navClassName(na("browseLatest"))}
+              aria-current={na("browseLatest") ? "page" : undefined}
+              onClick={() => setOpen(false)}
+            >
+              {t("latest")}
+            </Link>
+            <Link
+              to="/#popular"
               className={navClassName(na("browsePopular"))}
               aria-current={na("browsePopular") ? "page" : undefined}
               onClick={() => setOpen(false)}
@@ -532,19 +525,17 @@ export function PublicLayout() {
 
       <main
         className={`mx-auto w-full max-w-[1280px] ${
-          footerInContentFlow
-            ? "px-0 pb-0 pt-0 md:px-9 md:pt-10 xl:px-0"
-            : "flex-1 px-4 pb-6 pt-6 min-[440px]:px-5 sm:px-6 md:px-9 md:pb-10 md:pt-10 xl:px-0"
+          isHome
+            ? "flex-1 px-0 pb-6 pt-0 md:px-9 md:pb-10 md:pt-10 xl:px-0"
+            : footerInContentFlow
+              ? "px-0 pb-0 pt-0 md:px-9 md:pt-10 xl:px-0"
+              : "flex-1 px-4 pb-6 pt-6 min-[440px]:px-5 sm:px-6 md:px-9 md:pb-10 md:pt-10 xl:px-0"
         }`}
       >
         <Outlet />
       </main>
 
-      <footer
-        className={`bg-transparent md:border-t md:border-ark-line md:bg-ark-nav/90 ${
-          footerInContentFlow ? "mt-3" : "mt-auto"
-        }`}
-      >
+      <footer className="mt-auto bg-transparent md:border-t md:border-ark-line md:bg-ark-nav/90">
         <div className="mx-auto flex h-[52px] max-w-[358px] items-center justify-center px-4 py-4 text-[13px] leading-5 md:h-auto md:max-w-[1280px] md:justify-start md:px-9 md:py-6 md:text-sm xl:px-0">
           <Link
             to="/about"
@@ -558,7 +549,7 @@ export function PublicLayout() {
       </footer>
 
       <nav className="sticky inset-x-0 bottom-0 z-40 bg-[#0C0D0F]/90 backdrop-blur md:hidden">
-        <div className="grid h-[78px] grid-cols-4 gap-3 px-5 py-4 text-center text-[13px] leading-[18px]">
+        <div className="grid h-[78px] grid-cols-4 gap-3 px-5 py-4 text-center text-[11px] leading-[17.6px]">
           <BottomNavIcon
             to="/"
             label={t("home")}
@@ -580,13 +571,10 @@ export function PublicLayout() {
             active={pathname === "/favorites"}
           />
           <BottomNavIcon
-            to="/browse?sort=latest"
+            to="/#latest"
             label={t("latest")}
             icon="update"
-            active={
-              pathname === "/browse" &&
-              new URLSearchParams(search).get("sort") === "latest"
-            }
+            active={pathname === "/" && hash === "#latest"}
           />
         </div>
       </nav>