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] 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}
+      />
+    </>
+  );
+};