From 75eb4a3170226bb8824ed38307982537040363c0 Mon Sep 17 00:00:00 2001 From: Kentai Radiquum Date: Sat, 21 Sep 2024 01:54:02 +0500 Subject: [PATCH] feat: mobile menu page instead of dropdown for authorized user --- app/components/Navbar/Navbar.tsx | 285 +++++++----------- .../SettingsModal/SettingsModal.tsx | 95 ++++++ app/menu/page.tsx | 9 + app/pages/MobileMenuPage.tsx | 115 +++++++ public/changelog/3.2.1.md | 3 +- 5 files changed, 327 insertions(+), 180 deletions(-) create mode 100644 app/components/SettingsModal/SettingsModal.tsx create mode 100644 app/menu/page.tsx create mode 100644 app/pages/MobileMenuPage.tsx diff --git a/app/components/Navbar/Navbar.tsx b/app/components/Navbar/Navbar.tsx index 8ba8a51..3477707 100644 --- a/app/components/Navbar/Navbar.tsx +++ b/app/components/Navbar/Navbar.tsx @@ -2,16 +2,10 @@ import Link from "next/link"; import { usePathname } from "next/navigation"; import { useUserStore } from "#/store/auth"; -import { usePreferencesStore } from "#/store/preferences"; -import { - Dropdown, - Modal, - Button, - useThemeMode, - ToggleSwitch, -} from "flowbite-react"; +import { Dropdown } from "flowbite-react"; import { useState } from "react"; import Image from "next/image"; +import { SettingsModal } from "#/components/SettingsModal/SettingsModal"; export const Navbar = () => { const pathname = usePathname(); @@ -110,93 +104,114 @@ export const Navbar = () => { })} {userStore.isAuth ? ( -
- - - - +
+ + + + + + Профиль + + + {navLinks.map((link) => { + return ( + + + + + {link.title} + + + + ); + })} + { + setIsSettingModalOpen(true); + }} + className="flex items-center gap-1 text-sm md:text-base" > - Профиль - - - {navLinks.map((link) => { - return ( - - - - - {link.title} - - - - ); - })} - { - setIsSettingModalOpen(true); - }} - className="flex items-center gap-1 text-sm md:text-base" + Настройки + + { + userStore.logout(); + }} + className="flex items-center gap-1 text-sm md:text-base" + > + + Выйти + + +
+
+ - - Настройки - - { - userStore.logout(); - }} - className="flex items-center gap-1 text-sm md:text-base" - > - - Выйти - - -
+ +

{userStore.user.login}

+ +
+ ) : ( { ); }; - -const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => { - const preferenceStore = usePreferencesStore(); - - const { computedMode, setMode } = useThemeMode(); - - return ( - props.setIsOpen(false)} - > - Настройки - -
-
-

Тема

- - - - -
-
-

- Показывать список изменений -

- - preferenceStore.setFlags({ - showChangelog: !preferenceStore.flags.showChangelog, - }) - } - checked={preferenceStore.flags.showChangelog} - /> -
-
-
-

- Отправка аналитики -

-

- Требуется перезагрузка для применения -

-
- - preferenceStore.setFlags({ - enableAnalytics: !preferenceStore.flags.enableAnalytics, - }) - } - checked={preferenceStore.flags.enableAnalytics} - /> -
-
- - - ); -}; diff --git a/app/components/SettingsModal/SettingsModal.tsx b/app/components/SettingsModal/SettingsModal.tsx new file mode 100644 index 0000000..6d49353 --- /dev/null +++ b/app/components/SettingsModal/SettingsModal.tsx @@ -0,0 +1,95 @@ +"use client"; + +import { usePreferencesStore } from "#/store/preferences"; +import { + Modal, + Button, + useThemeMode, + ToggleSwitch, +} from "flowbite-react"; + +export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => { + const preferenceStore = usePreferencesStore(); + + const { computedMode, setMode } = useThemeMode(); + + return ( + props.setIsOpen(false)} + > + Настройки + +
+
+

Тема

+ + + + +
+
+

+ Показывать список изменений +

+ + preferenceStore.setFlags({ + showChangelog: !preferenceStore.flags.showChangelog, + }) + } + checked={preferenceStore.flags.showChangelog} + /> +
+
+
+

Отправка аналитики

+

+ Требуется перезагрузка для применения +

+
+ + preferenceStore.setFlags({ + enableAnalytics: !preferenceStore.flags.enableAnalytics, + }) + } + checked={preferenceStore.flags.enableAnalytics} + /> +
+
+ + + ); +}; diff --git a/app/menu/page.tsx b/app/menu/page.tsx new file mode 100644 index 0000000..1350fbc --- /dev/null +++ b/app/menu/page.tsx @@ -0,0 +1,9 @@ +export const metadata = { + title: "Меню", +}; + +import { MenuPage } from "#/pages/MobileMenuPage"; + +export default function Index() { + return ; +} diff --git a/app/pages/MobileMenuPage.tsx b/app/pages/MobileMenuPage.tsx new file mode 100644 index 0000000..91b740a --- /dev/null +++ b/app/pages/MobileMenuPage.tsx @@ -0,0 +1,115 @@ +"use client"; +import { Card } from "flowbite-react"; +import { useUserStore } from "#/store/auth"; +import Link from "next/link"; +import { useRouter } from "next/navigation"; +import { SettingsModal } from "#/components/SettingsModal/SettingsModal"; +import { useEffect, useState } from "react"; + +export const MenuPage = () => { + const userStore = useUserStore(); + const router = useRouter(); + const [isSettingModalOpen, setIsSettingModalOpen] = useState(false); + + useEffect(() => { + if (!userStore.user) { + router.push("/"); + } + }, [userStore.user]); + + return ( + <> + {userStore.user && ( +
+
+ + +
+ +
+

+ {userStore.user.login} +

+

+ {userStore.user.status} +

+
+
+ + +
+ + +
+
+ + +
+ +

Избранное

+
+ + + + +
+ +

Коллекции

+
+ + + + +
+ +

История

+
+ + + +
+ )} + + ); +}; diff --git a/public/changelog/3.2.1.md b/public/changelog/3.2.1.md index a6e062f..234b368 100644 --- a/public/changelog/3.2.1.md +++ b/public/changelog/3.2.1.md @@ -3,10 +3,11 @@ ## Добавлено - Редактирование профиля +- Страница меню, для авторизованного пользователя, вместо выпадающего списка на мобильных устройствах ## Изменено -- Изменён вид каруселей +- Изменён вид каруселей релизов для ПК ## Исправлено