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,