feat: separate popular browse navigation

src/layouts/PublicLayout.tsx

@@ -12,6 +12,7 @@ type PublicNavWhich =
   | "browseLatest"
   | "browseRecommended"
   | "browsePopular"
+  | "favorites"
   | "about";
 
 function navIsActive(
@@ -32,11 +33,15 @@ function navIsActive(
         (pathname === "/" && hash === "#categories")
       );
     case "browseLatest":
-      return pathname === "/" && hash === "#latest";
+      return pathname === "/browse" && sp.get("sort") === "latest";
     case "browseRecommended":
-      return pathname === "/" && hash === "#official";
+      return pathname === "/official-recommendations";
     case "browsePopular":
-      return pathname === "/" && hash === "#popular";
+      return pathname === "/browse" && sp.get("sort") === "popular";
+    case "favorites":
+      return (
+        pathname === "/favorites" || (pathname === "/" && hash === "#favorites")
+      );
     case "about":
       return pathname === "/about";
     default:
@@ -397,26 +402,33 @@ export function PublicLayout() {
                 {t("categories")}
               </Link>
               <Link
-                to="/#official"
+                to="/official-recommendations"
                 className={navClassName(na("browseRecommended"))}
                 aria-current={na("browseRecommended") ? "page" : undefined}
               >
                 {t("official")}
               </Link>
               <Link
-                to="/#latest"
+                to="/browse?sort=latest"
                 className={navClassName(na("browseLatest"))}
                 aria-current={na("browseLatest") ? "page" : undefined}
               >
                 {t("latest")}
               </Link>
               <Link
-                to="/#popular"
+                to="/browse?sort=popular"
                 className={navClassName(na("browsePopular"))}
                 aria-current={na("browsePopular") ? "page" : undefined}
               >
                 {t("popular")}
               </Link>
+              <Link
+                to="/favorites"
+                className={navClassName(na("favorites"))}
+                aria-current={na("favorites") ? "page" : undefined}
+              >
+                {t("favorites")}
+              </Link>
               <Link
                 to="/about"
                 className={navClassName(na("about"))}
@@ -490,7 +502,7 @@ export function PublicLayout() {
               {t("categories")}
             </Link>
             <Link
-              to="/#official"
+              to="/official-recommendations"
               className={navClassName(na("browseRecommended"))}
               aria-current={na("browseRecommended") ? "page" : undefined}
               onClick={() => setOpen(false)}
@@ -498,7 +510,7 @@ export function PublicLayout() {
               {t("official")}
             </Link>
             <Link
-              to="/#latest"
+              to="/browse?sort=latest"
               className={navClassName(na("browseLatest"))}
               aria-current={na("browseLatest") ? "page" : undefined}
               onClick={() => setOpen(false)}
@@ -506,13 +518,21 @@ export function PublicLayout() {
               {t("latest")}
             </Link>
             <Link
-              to="/#popular"
+              to="/browse?sort=popular"
               className={navClassName(na("browsePopular"))}
               aria-current={na("browsePopular") ? "page" : undefined}
               onClick={() => setOpen(false)}
             >
               {t("popular")}
             </Link>
+            <Link
+              to="/favorites"
+              className={navClassName(na("favorites"))}
+              aria-current={na("favorites") ? "page" : undefined}
+              onClick={() => setOpen(false)}
+            >
+              {t("favorites")}
+            </Link>
             <Link
               to="/about"
               className={navClassName(na("about"))}
@@ -570,13 +590,16 @@ export function PublicLayout() {
             to="/favorites"
             label={t("favorites")}
             icon="bookmark"
-            active={pathname === "/favorites"}
+            active={na("favorites")}
           />
           <BottomNavIcon
-            to="/#popular"
+            to="/browse?sort=popular"
             label={t("popular")}
             icon="update"
-            active={pathname === "/" && hash === "#popular"}
+            active={
+              pathname === "/browse" &&
+              new URLSearchParams(search).get("sort") === "popular"
+            }
           />
         </div>
       </nav>