anix/refactor: navbar

app/components/Navbar/NavBarPc.tsx

@@ -0,0 +1,139 @@
+"use client";
+import {
+  Avatar,
+  Dropdown,
+  DropdownDivider,
+  DropdownItem,
+} from "flowbite-react";
+import { useUserStore } from "#/store/auth";
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+
+const NavbarItems = [
+  {
+    title: "Домашняя",
+    icon: "mdi--home",
+    href: "/",
+    auth: false,
+  },
+  {
+    title: "Поиск",
+    icon: "mdi--search",
+    href: "/search",
+    auth: false,
+  },
+  {
+    title: "Закладки",
+    icon: "mdi--bookmark-multiple",
+    href: "/bookmarks",
+    auth: true,
+  },
+  {
+    title: "Избранное",
+    icon: "mdi--favorite",
+    href: "/favorites",
+    auth: true,
+  },
+  {
+    title: "Коллекции",
+    icon: "mdi--collections-bookmark",
+    href: "/collections",
+    auth: true,
+  },
+  {
+    title: "История",
+    icon: "mdi--history",
+    href: "/history",
+    auth: true,
+  },
+  {
+    title: "Обзор",
+    icon: "mdi--compass",
+    href: "/discovery",
+    auth: true,
+  },
+];
+
+export const NavBarPc = (props: { setIsSettingModalOpen: any }) => {
+  const userStore = useUserStore();
+  const router = useRouter();
+  const pathname = usePathname();
+
+  return (
+    <>
+      <header className="sticky top-0 left-0 right-0 z-50 hidden w-full h-16 font-medium bg-black rounded-b-lg lg:block">
+        <div className="container flex items-center justify-between h-full px-2 mx-auto">
+          <div className="flex items-center h-full gap-3">
+            {NavbarItems.map((item) => {
+              if (item.auth && !userStore.isAuth) return <></>;
+              return (
+                <Link
+                  href={item.href}
+                  key={`navbar-pc-${item.title}`}
+                  className="flex items-center"
+                >
+                  <span className={`iconify ${item.icon} w-6 h-6`}></span>
+                  <span className="ml-1">{item.title}</span>
+                </Link>
+              );
+            })}
+          </div>
+          <Dropdown
+            arrowIcon={false}
+            inline
+            label={
+              <div className="flex items-center">
+                <Avatar
+                  alt=""
+                  img={
+                    userStore.isAuth ?
+                      userStore.user.avatar
+                    : "https://s.anixmirai.com/avatars/no_avatar.jpg"
+                  }
+                  rounded
+                  size="xs"
+                />
+                <p className="ml-2">
+                  {userStore.isAuth ? userStore.user.login : "Аноним"}
+                </p>
+              </div>
+            }
+          >
+            {userStore.isAuth ?
+              <DropdownItem
+                onClick={() => router.push(`/profile/${userStore.user.id}`)}
+                className="relative flex"
+              >
+                <span className="w-4 h-4 iconify mdi--user"></span>
+                <span className="ml-2">Профиль</span>
+              </DropdownItem>
+            : ""}
+            <DropdownItem
+              onClick={() => props.setIsSettingModalOpen(true)}
+              className="relative flex"
+            >
+              <span className="w-4 h-4 iconify mdi--settings"></span>
+              <span className="ml-2">Настройки</span>
+            </DropdownItem>
+            {userStore.isAuth ?
+              <DropdownItem
+                onClick={() => userStore.logout()}
+                className="relative flex"
+              >
+                <span className="w-4 h-4 iconify mdi--logout"></span>
+                <span className="ml-2">Выйти</span>
+              </DropdownItem>
+            : <DropdownItem
+                onClick={() => router.push(`/login?redirect=${pathname}`)}
+                className="relative flex"
+              >
+                <span className="w-4 h-4 iconify mdi--login"></span>
+                <span className="ml-2">Войти</span>
+              </DropdownItem>
+            }
+          </Dropdown>
+        </div>
+      </header>
+    </>
+  );
+};