feat: add fifth navbar button settings for mobile

app/components/Navbar/NavbarUpdate.tsx

@@ -87,8 +87,8 @@ export const Navbar = () => {
   return (
     <>
       <header className="fixed bottom-0 left-0 z-50 w-full text-white bg-black rounded-t-lg sm:sticky sm:top-0 sm:rounded-t-none sm:rounded-b-lg">
-        <div className="container flex items-center min-h-[76px] justify-center gap-4 mx-auto sm:gap-0 sm:justify-between">
-          <div className="flex items-center gap-8 px-2 py-4 sm:gap-4">
+        <div className={`container flex items-center min-h-[76px] justify-center ${preferenceStore.flags.showFifthButton && preferenceStore.flags.showNavbarTitles == "always" ? "gap-0" : "gap-4"} mx-auto sm:gap-0 sm:justify-between`}>
+          <div className={`flex items-center ${preferenceStore.flags.showFifthButton && preferenceStore.flags.showNavbarTitles == "always" ? "gap-4" : "gap-8"} px-2 py-4 sm:gap-4`}>
             {menuItems.map((item) => {
               return (
                 <Link
@@ -98,7 +98,7 @@ export const Navbar = () => {
                     item.isAuthRequired && !userStore.isAuth ? "hidden"
                     : item.isShownOnMobile ? "flex"
                     : "hidden sm:flex"
-                  } ${[item.href, item.hrefInCategory].includes("/" + pathname.split("/")[1]) ? "font-bold" : "font-medium"}`}
+                  } ${[item.href, item.hrefInCategory].includes("/" + pathname.split("/")[1]) ? "font-bold" : "font-medium"} transition-all`}
                 >
                   <span
                     className={`w-6 h-6 iconify ${[item.href, item.hrefInCategory].includes("/" + pathname.split("/")[1]) ? item.icon.active : item.icon.default}`}
@@ -112,13 +112,13 @@ export const Navbar = () => {
               );
             })}
           </div>
-          <div className="flex items-center gap-8 px-2 py-4 sm:gap-4">
+          <div className={`flex items-center ${preferenceStore.flags.showFifthButton && preferenceStore.flags.showNavbarTitles == "always" ? "gap-4" : "gap-8"} px-2 py-4 sm:gap-4`}>
             {!userStore.isAuth ?
               <Link
                 href={
                   pathname != "/login" ? `/login?redirect=${pathname}` : "#"
                 }
-                className={`flex items-center flex-col lg:flex-row gap-1 ${pathname == "/login" ? "font-bold" : "font-medium"}`}
+                className={`flex items-center flex-col lg:flex-row gap-1 ${pathname == "/login" ? "font-bold" : "font-medium"} transition-all`}
               >
                 <span className="w-6 h-6 iconify material-symbols--login"></span>
                 <span
@@ -130,7 +130,7 @@ export const Navbar = () => {
             : <>
                 <Link
                   href={`/profile/${userStore.user.id}`}
-                  className={`hidden lg:flex flex-col lg:flex-row items-center gap-1 ${pathname == `/profile/${userStore.user.id}` ? "font-bold" : "font-medium"}`}
+                  className={`hidden lg:flex flex-col lg:flex-row items-center gap-1 ${pathname == `/profile/${userStore.user.id}` ? "font-bold" : "font-medium"} transition-all`}
                 >
                   <Image
                     src={userStore.user.avatar}
@@ -139,13 +139,30 @@ export const Navbar = () => {
                     width={24}
                     height={24}
                   />
-                  <span className={`text-xs sm:text-base ${preferenceStore.flags.showNavbarTitles == "always" || preferenceStore.flags.showNavbarTitles == "links" || (preferenceStore.flags.showNavbarTitles == "selected" && pathname == `/profile/${userStore.user.id}`) ? "block" : "hidden"}`}>
+                  <span
+                    className={`text-xs sm:text-base ${preferenceStore.flags.showNavbarTitles == "always" || preferenceStore.flags.showNavbarTitles == "links" || (preferenceStore.flags.showNavbarTitles == "selected" && pathname == `/profile/${userStore.user.id}`) ? "block" : "hidden"}`}
+                  >
                     {userStore.user.login}
                   </span>
                 </Link>
+                {preferenceStore.flags.showFifthButton ?
+                  <Link
+                    href={menuItems[preferenceStore.flags.showFifthButton].href}
+                    className={`flex flex-col sm:hidden items-center gap-1 ${pathname == menuItems[preferenceStore.flags.showFifthButton].href ? "font-bold" : "font-medium"} transition-all`}
+                  >
+                    <span
+                    className={`w-6 h-6 iconify ${pathname == menuItems[preferenceStore.flags.showFifthButton].href ? menuItems[preferenceStore.flags.showFifthButton].icon.active : menuItems[preferenceStore.flags.showFifthButton].icon.default}`}
+                  ></span>
+                    <span
+                      className={`text-xs sm:text-base ${preferenceStore.flags.showNavbarTitles == "always" || preferenceStore.flags.showNavbarTitles == "links" || (preferenceStore.flags.showNavbarTitles == "selected" && pathname == menuItems[preferenceStore.flags.showFifthButton].href) ? "block" : "hidden"}`}
+                    >
+                      {menuItems[preferenceStore.flags.showFifthButton].title}
+                    </span>
+                  </Link>
+                : ""}
                 <Link
                   href={`/menu`}
-                  className={`flex flex-col lg:hidden items-center gap-1 ${pathname == `/menu` || pathname == `/profile/${userStore.user.id}` ? "font-bold" : "font-medium"}`}
+                  className={`flex flex-col lg:hidden items-center gap-1 ${pathname == `/menu` || pathname == `/profile/${userStore.user.id}` ? "font-bold" : "font-medium"} transition-all`}
                 >
                   <Image
                     src={userStore.user.avatar}
@@ -154,7 +171,9 @@ export const Navbar = () => {
                     width={24}
                     height={24}
                   />
-                  <span className={`text-xs sm:text-base ${preferenceStore.flags.showNavbarTitles == "always" || preferenceStore.flags.showNavbarTitles == "links" || (preferenceStore.flags.showNavbarTitles == "selected" && (pathname == `/menu` || pathname == `/profile/${userStore.user.id}`)) ? "block" : "hidden"}`}>
+                  <span
+                    className={`text-xs sm:text-base ${preferenceStore.flags.showNavbarTitles == "always" || preferenceStore.flags.showNavbarTitles == "links" || (preferenceStore.flags.showNavbarTitles == "selected" && (pathname == `/menu` || pathname == `/profile/${userStore.user.id}`)) ? "block" : "hidden"}`}
+                  >
                     {userStore.user.login}
                   </span>
                 </Link>
@@ -165,7 +184,11 @@ export const Navbar = () => {
               onClick={() => setIsSettingModalOpen(true)}
             >
               <span className="w-6 h-6 iconify material-symbols--settings-outline-rounded"></span>
-              <span className={`text-xs sm:text-base ${preferenceStore.flags.showNavbarTitles == "always" ? "block" : "hidden"}`}>Настройки</span>
+              <span
+                className={`text-xs sm:text-base ${preferenceStore.flags.showNavbarTitles == "always" ? "block" : "hidden"}`}
+              >
+                Настройки
+              </span>
             </button>
             {userStore.isAuth && (
               <button
@@ -173,7 +196,9 @@ export const Navbar = () => {
                 onClick={() => userStore.logout()}
               >
                 <span className="w-6 h-6 iconify material-symbols--logout"></span>
-                <span className={`text-xs sm:text-base ${preferenceStore.flags.showNavbarTitles == "always" ? "lg:hidden xl:block" : "hidden"}`}>
+                <span
+                  className={`text-xs sm:text-base ${preferenceStore.flags.showNavbarTitles == "always" ? "lg:hidden xl:block" : "hidden"}`}
+                >
                   Выйти
                 </span>
               </button>

app/components/SettingsModal/SettingsModal.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { CURRENT_APP_VERSION } from "#/api/config";
+import { useUserStore } from "#/store/auth";
 import { usePreferencesStore } from "#/store/preferences";
 import {
   Modal,
@@ -35,8 +36,15 @@ const NavbarTitles = {
   never: "Никогда",
 };
 
+const FifthButton = {
+  3: "Избранное",
+  4: "Коллекции",
+  5: "История",
+};
+
 export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
   const preferenceStore = usePreferencesStore();
+  const userStore = useUserStore();
 
   const { computedMode, setMode } = useThemeMode();
 
@@ -190,6 +198,45 @@ export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
               )}
             </Dropdown>
           </div>
+          {userStore.isAuth ?
+            <div className="flex items-center justify-between sm:hidden">
+              <p className=" dark:text-white max-w-96">
+                Пятый пункт в навигации
+              </p>
+              <Dropdown
+                color="blue"
+                label={
+                  preferenceStore.flags.showFifthButton ?
+                    FifthButton[preferenceStore.flags.showFifthButton]
+                  : "Нет"
+                }
+              >
+                <Dropdown.Item
+                  onClick={() =>
+                    preferenceStore.setFlags({
+                      showFifthButton: null,
+                    })
+                  }
+                >
+                  Не показывать
+                </Dropdown.Item>
+                {Object.keys(FifthButton).map((key) => {
+                  return (
+                    <Dropdown.Item
+                      key={`navbar-fifthbutton-${key}`}
+                      onClick={() =>
+                        preferenceStore.setFlags({
+                          showFifthButton: Number(key) as 3 | 4 | 5,
+                        })
+                      }
+                    >
+                      {FifthButton[key]}
+                    </Dropdown.Item>
+                  );
+                })}
+              </Dropdown>
+            </div>
+          : ""}
           <HR className="my-4 dark:bg-slate-400" />
           <div className="flex items-center gap-2">
             <span className="w-6 h-6 iconify material-symbols--settings-outline"></span>

app/pages/MobileMenuPage.tsx

@@ -6,9 +6,11 @@ import { useRouter } from "next/navigation";
 import { SettingsModal } from "#/components/SettingsModal/SettingsModal";
 import { useEffect, useState } from "react";
 import Image from "next/image";
+import { usePreferencesStore } from "#/store/preferences";
 
 export const MenuPage = () => {
   const userStore = useUserStore();
+  const preferenceStore = usePreferencesStore();
   const router = useRouter();
   const [isSettingModalOpen, setIsSettingModalOpen] = useState(false);
 
@@ -81,6 +83,7 @@ export const MenuPage = () => {
               </button>
             </div>
           </div>
+          {preferenceStore.flags.showFifthButton != 3 ?
             <Link href="/favorites" className="flex-1 sm:hidden">
               <Card>
                 <div className="flex items-center gap-2">
@@ -91,6 +94,8 @@ export const MenuPage = () => {
                 </div>
               </Card>
             </Link>
+          : ""}
+          {preferenceStore.flags.showFifthButton != 4 ?
             <Link href="/collections" className="flex-1 sm:hidden">
               <Card>
                 <div className="flex items-center gap-2">
@@ -101,6 +106,8 @@ export const MenuPage = () => {
                 </div>
               </Card>
             </Link>
+          : ""}
+          {preferenceStore.flags.showFifthButton != 5 ?
             <Link href="/history" className="flex-1 sm:hidden">
               <Card>
                 <div className="flex items-center gap-2">
@@ -111,6 +118,7 @@ export const MenuPage = () => {
                 </div>
               </Card>
             </Link>
+          : ""}
           <SettingsModal
             isOpen={isSettingModalOpen}
             setIsOpen={setIsSettingModalOpen}

app/store/preferences.ts

@@ -11,6 +11,7 @@ interface preferencesState {
     showChangelog?: boolean;
     enableAnalytics?: boolean;
     showNavbarTitles?: "always" | "links" | "selected" | "never";
+    showFifthButton?: null | 3 | 4 | 5;
   };
   params: {
     isFirstLaunch?: boolean;
@@ -22,7 +23,7 @@ interface preferencesState {
     };
     experimental?: {
       newPlayer: boolean;
-    }
+    };
     // color: {
     //   primary: string;
     //   secondary: string;
@@ -44,6 +45,7 @@ export const usePreferencesStore = create<preferencesState>()(
         showChangelog: true,
         enableAnalytics: true,
         showNavbarTitles: "always",
+        showFifthButton: null,
       },
       params: {
         isFirstLaunch: true,
@@ -54,8 +56,8 @@ export const usePreferencesStore = create<preferencesState>()(
           bookmarksCategory: "watching",
         },
         experimental: {
-          newPlayer: false
-        }
+          newPlayer: false,
+        },
       },
       setHasHydrated: (state) => {
         set({
@@ -74,9 +76,12 @@ export const usePreferencesStore = create<preferencesState>()(
       onRehydrateStorage: (state) => {
         return () => state.setHasHydrated(true);
       },
-      merge: (persistedState , currentState) => {
-        return deepmerge(currentState as preferencesState, persistedState as preferencesState);
-      }
+      merge: (persistedState, currentState) => {
+        return deepmerge(
+          currentState as preferencesState,
+          persistedState as preferencesState
+        );
+      },
     }
   )
 );