From 5270c50c7ba56b66962e836ce8273d49f863de09 Mon Sep 17 00:00:00 2001
From: Radiquum <kentai.waah@gmail.com>
Date: Mon, 17 Mar 2025 02:34:06 +0500
Subject: [PATCH] feat: add navbar title show options

---
 app/components/Navbar/NavbarUpdate.tsx        | 30 ++++++++++----
 .../SettingsModal/SettingsModal.tsx           | 39 +++++++++++++++++--
 app/pages/MobileMenuPage.tsx                  |  6 +--
 app/store/preferences.ts                      |  2 +
 4 files changed, 62 insertions(+), 15 deletions(-)

diff --git a/app/components/Navbar/NavbarUpdate.tsx b/app/components/Navbar/NavbarUpdate.tsx
index 98b8dcd..9ee4d76 100644
--- a/app/components/Navbar/NavbarUpdate.tsx
+++ b/app/components/Navbar/NavbarUpdate.tsx
@@ -6,11 +6,13 @@ 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 = [
     {
@@ -101,7 +103,11 @@ export const Navbar = () => {
                   <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">{item.title}</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>
               );
             })}
@@ -115,12 +121,16 @@ export const Navbar = () => {
                 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">Войти</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 md: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"}`}
                 >
                   <Image
                     src={userStore.user.avatar}
@@ -129,13 +139,13 @@ export const Navbar = () => {
                     width={24}
                     height={24}
                   />
-                  <span className="text-xs sm:text-base">
+                  <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 md: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"}`}
                 >
                   <Image
                     src={userStore.user.avatar}
@@ -144,24 +154,28 @@ export const Navbar = () => {
                     width={24}
                     height={24}
                   />
-                  <span className="text-xs sm:text-base">
+                  <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="items-center hidden gap-2 md:flex"
+              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="items-center hidden gap-2 md:flex"
+                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>
diff --git a/app/components/SettingsModal/SettingsModal.tsx b/app/components/SettingsModal/SettingsModal.tsx
index 6b1f976..39ae318 100644
--- a/app/components/SettingsModal/SettingsModal.tsx
+++ b/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>
diff --git a/app/pages/MobileMenuPage.tsx b/app/pages/MobileMenuPage.tsx
index 450e42b..a075e2a 100644
--- a/app/pages/MobileMenuPage.tsx
+++ b/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
diff --git a/app/store/preferences.ts b/app/store/preferences.ts
index d125350..93131c7 100644
--- a/app/store/preferences.ts
+++ b/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,