From fc64b503679cf94a2b6aab1cbb2e2c7910c1b647 Mon Sep 17 00:00:00 2001
From: Radiquum <kentai.waah@gmail.com>
Date: Mon, 17 Mar 2025 01:43:55 +0500
Subject: [PATCH 1/2] refactor: update navbar styling

---
 app/App.tsx                            |   2 +-
 app/components/Navbar/NavbarUpdate.tsx | 176 +++++++++++++++++++++++++
 2 files changed, 177 insertions(+), 1 deletion(-)
 create mode 100644 app/components/Navbar/NavbarUpdate.tsx

diff --git a/app/App.tsx b/app/App.tsx
index bb81fc1..e8c949c 100644
--- a/app/App.tsx
+++ b/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";
diff --git a/app/components/Navbar/NavbarUpdate.tsx b/app/components/Navbar/NavbarUpdate.tsx
new file mode 100644
index 0000000..98b8dcd
--- /dev/null
+++ b/app/components/Navbar/NavbarUpdate.tsx
@@ -0,0 +1,176 @@
+"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";
+
+export const Navbar = () => {
+  const pathname = usePathname();
+  const userStore = useUserStore();
+  const [isSettingModalOpen, setIsSettingModalOpen] = useState(false);
+
+  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">{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">Войти</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"}`}
+                >
+                  <Image
+                    src={userStore.user.avatar}
+                    alt=""
+                    className="w-6 h-6 rounded-full"
+                    width={24}
+                    height={24}
+                  />
+                  <span className="text-xs sm:text-base">
+                    {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"}`}
+                >
+                  <Image
+                    src={userStore.user.avatar}
+                    alt=""
+                    className="w-6 h-6 rounded-full"
+                    width={24}
+                    height={24}
+                  />
+                  <span className="text-xs sm:text-base">
+                    {userStore.user.login}
+                  </span>
+                </Link>
+              </>
+            }
+            <button
+              className="items-center hidden gap-2 md:flex"
+              onClick={() => setIsSettingModalOpen(true)}
+            >
+              <span className="w-6 h-6 iconify material-symbols--settings-outline-rounded"></span>
+            </button>
+            {userStore.isAuth && (
+              <button
+                className="items-center hidden gap-2 md:flex"
+                onClick={() => userStore.logout()}
+              >
+                <span className="w-6 h-6 iconify material-symbols--logout"></span>
+              </button>
+            )}
+          </div>
+        </div>
+      </header>
+      <SettingsModal
+        isOpen={isSettingModalOpen}
+        setIsOpen={setIsSettingModalOpen}
+      />
+    </>
+  );
+};

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 2/2] 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,