feat: add navbar title show options

app/App.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { useUserStore } from "./store/auth";
 import { usePreferencesStore } from "./store/preferences";
-import { Navbar } from "./components/Navbar/Navbar";
+import { Navbar } from "./components/Navbar/NavbarUpdate";
 import { Inter } from "next/font/google";
 import { useEffect, useState } from "react";
 import { Button, Modal } from "flowbite-react";

app/components/Navbar/NavbarUpdate.tsx

@@ -0,0 +1,190 @@
+"use client";
+
+import Link from "next/link";
+import Image from "next/image";
+import { useUserStore } from "#/store/auth";
+import { usePathname } from "next/navigation";
+import { useState } from "react";
+import { SettingsModal } from "#/components/SettingsModal/SettingsModal";
+import { usePreferencesStore } from "#/store/preferences";
+
+export const Navbar = () => {
+  const pathname = usePathname();
+  const userStore = useUserStore();
+  const [isSettingModalOpen, setIsSettingModalOpen] = useState(false);
+  const preferenceStore = usePreferencesStore();
+
+  const menuItems = [
+    {
+      id: 1,
+      title: "Домашняя",
+      href: "/",
+      hrefInCategory: "/home",
+      icon: {
+        default: "material-symbols--home-outline",
+        active: "material-symbols--home",
+      },
+      isAuthRequired: false,
+      isShownOnMobile: true,
+    },
+    {
+      id: 2,
+      title: "Поиск",
+      href: "/search",
+      icon: {
+        default: "material-symbols--search",
+        active: "material-symbols--search",
+      },
+      isAuthRequired: false,
+      isShownOnMobile: true,
+    },
+    {
+      id: 3,
+      title: "Закладки",
+      href: "/bookmarks",
+      icon: {
+        default: "material-symbols--bookmarks-outline",
+        active: "material-symbols--bookmarks",
+      },
+      isAuthRequired: true,
+      isShownOnMobile: true,
+    },
+    {
+      id: 4,
+      title: "Избранное",
+      href: "/favorites",
+      icon: {
+        default: "material-symbols--favorite-outline",
+        active: "material-symbols--favorite",
+      },
+      isAuthRequired: true,
+      isShownOnMobile: false,
+    },
+    {
+      id: 5,
+      title: "Коллекции",
+      href: "/collections",
+      icon: {
+        default: "material-symbols--collections-bookmark-outline",
+        active: "material-symbols--collections-bookmark",
+      },
+      isAuthRequired: true,
+      isShownOnMobile: false,
+    },
+    {
+      id: 6,
+      title: "История",
+      href: "/history",
+      icon: {
+        default: "material-symbols--history",
+        active: "material-symbols--history",
+      },
+      isAuthRequired: true,
+      isShownOnMobile: false,
+    },
+  ];
+
+  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 justify-center mx-auto sm:justify-between">
+          <div className="flex items-center gap-4 px-2 py-4">
+            {menuItems.map((item) => {
+              return (
+                <Link
+                  href={item.href}
+                  key={`navbar__${item.id}`}
+                  className={`flex-col items-center justify-center gap-1 lg:flex-row ${
+                    item.isAuthRequired && !userStore.isAuth ? "hidden"
+                    : item.isShownOnMobile ? "flex"
+                    : "hidden sm:flex"
+                  } ${[item.href, item.hrefInCategory].includes("/" + pathname.split("/")[1]) ? "font-bold" : "font-medium"}`}
+                >
+                  <span
+                    className={`w-6 h-6 iconify ${[item.href, item.hrefInCategory].includes("/" + pathname.split("/")[1]) ? item.icon.active : item.icon.default}`}
+                  ></span>
+                  <span
+                    className={`text-xs sm:text-base ${preferenceStore.flags.showNavbarTitles == "always" || preferenceStore.flags.showNavbarTitles == "links" || (preferenceStore.flags.showNavbarTitles == "selected" && [item.href, item.hrefInCategory].includes("/" + pathname.split("/")[1])) ? "block" : "hidden"}`}
+                  >
+                    {item.title}
+                  </span>
+                </Link>
+              );
+            })}
+          </div>
+          <div className="flex items-center gap-4 px-2 py-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"}`}
+              >
+                <span className="w-6 h-6 iconify material-symbols--login"></span>
+                <span
+                  className={`text-xs sm:text-base ${preferenceStore.flags.showNavbarTitles == "always" || (preferenceStore.flags.showNavbarTitles == "selected" && pathname == "/login") ? "block" : "hidden"}`}
+                >
+                  Войти
+                </span>
+              </Link>
+            : <>
+                <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"}`}
+                >
+                  <Image
+                    src={userStore.user.avatar}
+                    alt=""
+                    className="w-6 h-6 rounded-full"
+                    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"}`}>
+                    {userStore.user.login}
+                  </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"}`}
+                >
+                  <Image
+                    src={userStore.user.avatar}
+                    alt=""
+                    className="w-6 h-6 rounded-full"
+                    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"}`}>
+                    {userStore.user.login}
+                  </span>
+                </Link>
+              </>
+            }
+            <button
+              className={`${userStore.isAuth ? "hidden lg:flex" : "flex"} flex-col items-center gap-1 lg:flex-row`}
+              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>
+            </button>
+            {userStore.isAuth && (
+              <button
+                className="flex-col items-center hidden gap-1 lg:flex-row lg:flex"
+                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>
+              </button>
+            )}
+          </div>
+        </div>
+      </header>
+      <SettingsModal
+        isOpen={isSettingModalOpen}
+        setIsOpen={setIsSettingModalOpen}
+      />
+    </>
+  );
+};

app/components/SettingsModal/SettingsModal.tsx

@@ -27,6 +27,13 @@ const BookmarksCategory = {
   abandoned: "Заброшено",
 };
 
+const NavbarTitles = {
+  always: "Всегда",
+  links: "Только ссылки",
+  selected: "Только выбранные",
+  never: "Никогда",
+}
+
 export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
   const preferenceStore = usePreferencesStore();
 
@@ -89,7 +96,7 @@ export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
               checked={preferenceStore.params.skipToCategory.enabled}
             />
           </div>
-          {preferenceStore.params.skipToCategory.enabled ? (
+          {preferenceStore.params.skipToCategory.enabled ?
             <>
               <div className="flex items-center justify-between">
                 <p className=" dark:text-white max-w-96">
@@ -154,9 +161,33 @@ export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
                 </Dropdown>
               </div>
             </>
-          ) : (
-            ""
-          )}
+          : ""}
+          <div className="flex items-center justify-between">
+            <p className=" dark:text-white max-w-96">
+              Показывать название пункта в навигации
+            </p>
+            <Dropdown
+              color="blue"
+              label={
+                NavbarTitles[preferenceStore.flags.showNavbarTitles]
+              }
+            >
+              {Object.keys(NavbarTitles).map((key: "always" | "links" | "selected" | "never") => {
+                return (
+                  <Dropdown.Item
+                    key={`navbar-titles-${key}`}
+                    onClick={() =>
+                      preferenceStore.setFlags({
+                        showNavbarTitles: key,
+                      })
+                    }
+                  >
+                    {NavbarTitles[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

@@ -81,7 +81,7 @@ export const MenuPage = () => {
               </button>
             </div>
           </div>
-          <Link href="/favorites" className="flex-1">
+          <Link href="/favorites" className="flex-1 sm:hidden">
             <Card>
               <div className="flex items-center gap-2">
                 <span
@@ -91,7 +91,7 @@ export const MenuPage = () => {
               </div>
             </Card>
           </Link>
-          <Link href="/collections" className="flex-1">
+          <Link href="/collections" className="flex-1 sm:hidden">
             <Card>
               <div className="flex items-center gap-2">
                 <span
@@ -101,7 +101,7 @@ export const MenuPage = () => {
               </div>
             </Card>
           </Link>
-          <Link href="/history" className="flex-1">
+          <Link href="/history" className="flex-1 sm:hidden">
             <Card>
               <div className="flex items-center gap-2">
                 <span

app/store/preferences.ts

@@ -10,6 +10,7 @@ interface preferencesState {
     saveWatchHistory?: boolean;
     showChangelog?: boolean;
     enableAnalytics?: boolean;
+    showNavbarTitles?: "always" | "links" | "selected" | "never";
   };
   params: {
     isFirstLaunch?: boolean;
@@ -42,6 +43,7 @@ export const usePreferencesStore = create<preferencesState>()(
         saveWatchHistory: true,
         showChangelog: true,
         enableAnalytics: true,
+        showNavbarTitles: "always",
       },
       params: {
         isFirstLaunch: true,