update navbar , create pages
This commit is contained in:
nabijonovdavronbek619@gmail.com
@@ -7,66 +7,21 @@ import {
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/shared/ui/dropdown-menu';
|
||||
import SubMenuLink from './SubMenuLink';
|
||||
import { ChangeLang } from './ChangeLang';
|
||||
import { useLoginModal, useRegisterModal } from '@/shared/zustand/auth';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { useUserPlagiatStore } from '@/shared/zustand/user';
|
||||
import {
|
||||
ChevronDown,
|
||||
LogOut,
|
||||
User,
|
||||
LayoutDashboard,
|
||||
FileSearch,
|
||||
BrainCircuit,
|
||||
CreditCard,
|
||||
} from 'lucide-react';
|
||||
import { ChevronDown, LogOut } from 'lucide-react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useCabinetNav } from '@/shared/zustand/cabinetNav';
|
||||
|
||||
function AuthButtons() {
|
||||
const t = useTranslations('Navbar');
|
||||
const t_cab = useTranslations('Cabinet');
|
||||
const setNavItem = useCabinetNav((state) => state.setNavItem);
|
||||
const [localUser, setLocalUser] = useState<{
|
||||
id: number;
|
||||
name: string;
|
||||
surname: string;
|
||||
} | null>(null);
|
||||
const [open, setOpen] = useState(false);
|
||||
const auth = {
|
||||
login: { title: t('login'), url: '#' },
|
||||
signup: { title: t('signup'), url: '#' },
|
||||
};
|
||||
|
||||
const userItem = [
|
||||
{ title: t('profile'), url: '/cabinet', icon: User, key: 'profile' },
|
||||
{
|
||||
url: '/cabinet',
|
||||
title: t_cab('dashboard'),
|
||||
icon: LayoutDashboard,
|
||||
key: 'dashboard',
|
||||
},
|
||||
{
|
||||
url: '/cabinet',
|
||||
title: t_cab('plagiat'),
|
||||
icon: FileSearch,
|
||||
key: 'plagiat',
|
||||
},
|
||||
{
|
||||
url: '/cabinet',
|
||||
title: t_cab('siNav'),
|
||||
icon: BrainCircuit,
|
||||
key: 'si',
|
||||
},
|
||||
{
|
||||
url: '/cabinet',
|
||||
title: t_cab('payments'),
|
||||
icon: CreditCard,
|
||||
key: 'payments',
|
||||
},
|
||||
{ title: t('logout'), url: '/', icon: LogOut, key: 'logout' },
|
||||
];
|
||||
|
||||
const toggleLoginModal = useLoginModal((state) => state.toggleLoginModal);
|
||||
const toggleRegisterModal = useRegisterModal(
|
||||
@@ -74,13 +29,13 @@ function AuthButtons() {
|
||||
);
|
||||
const user = useUserPlagiatStore((state) => state.user);
|
||||
const clearUser = useUserPlagiatStore((state) => state.clearUser);
|
||||
|
||||
const clearTokens = () => {
|
||||
localStorage.removeItem('access');
|
||||
localStorage.removeItem('refresh');
|
||||
localStorage.removeItem('user');
|
||||
clearUser();
|
||||
};
|
||||
console.log('Current user:', user);
|
||||
|
||||
useEffect(() => {
|
||||
const data = localStorage.getItem('user');
|
||||
@@ -93,7 +48,7 @@ function AuthButtons() {
|
||||
|
||||
if (localUser) {
|
||||
return (
|
||||
<div className="flex flex-row max-sm:items-center max-sm:justify-around gap-3">
|
||||
<div className="flex flex-row max-sm:items-center max-sm:justify-around gap-3 items-center">
|
||||
<div className="sm:flex hidden">
|
||||
<ChangeLang />
|
||||
</div>
|
||||
@@ -102,24 +57,21 @@ function AuthButtons() {
|
||||
{localUser.name}
|
||||
<ChevronDown className="size-4" />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="">
|
||||
{userItem.map((subItem) => (
|
||||
<DropdownMenuItem key={subItem.title} asChild>
|
||||
<SubMenuLink
|
||||
logOut={() => {
|
||||
setOpen(false);
|
||||
if (subItem.url !== '/cabinet') {
|
||||
clearTokens();
|
||||
} else {
|
||||
setNavItem(
|
||||
subItem.key as import('@/widgets/cabinet/lib/types').CabinetSection,
|
||||
);
|
||||
}
|
||||
}}
|
||||
item={subItem}
|
||||
/>
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem
|
||||
onClick={() => {
|
||||
clearTokens();
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
<Link
|
||||
className="flex flex-row gap-4 rounded-md p-3 cursor-pointer"
|
||||
href={'/'}
|
||||
>
|
||||
<LogOut className="size-5 shrink-0 text-foreground" />
|
||||
<span className="text-sm font-semibold">{t('logout')}</span>
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
@@ -127,16 +79,14 @@ function AuthButtons() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-row max-sm:items-center max-sm:justify-around gap-3">
|
||||
<div className="flex flex-row max-sm:items-center max-sm:justify-around gap-3 items-center">
|
||||
<div className="sm:flex hidden">
|
||||
<ChangeLang />
|
||||
</div>
|
||||
<Button variant="outline" onClick={() => toggleLoginModal()}>
|
||||
<Link href={auth.login.url}>{auth.login.title}</Link>
|
||||
</Button>
|
||||
<Button onClick={() => toggleRegisterModal()}>
|
||||
<Link href={auth.signup.url}>{auth.signup.title}</Link>
|
||||
{t('login')}
|
||||
</Button>
|
||||
<Button onClick={() => toggleRegisterModal()}>{t('signup')}</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
'use client';
|
||||
import { Button } from '@/shared/ui/button';
|
||||
import {
|
||||
Sheet,
|
||||
@@ -13,16 +14,47 @@ import { AuthButtons } from './authButtons';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { Logo_image } from '@/image';
|
||||
import Image from 'next/image';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useUserPlagiatStore } from '@/shared/zustand/user';
|
||||
|
||||
const Navbar = () => {
|
||||
const t = useTranslations('Navbar');
|
||||
const t_cab = useTranslations('Cabinet');
|
||||
const [localUser, setLocalUser] = useState<{
|
||||
id: number;
|
||||
name: string;
|
||||
surname: string;
|
||||
} | null>(null);
|
||||
const user = useUserPlagiatStore((state) => state.user);
|
||||
|
||||
const scrollTo = (id: string) => {
|
||||
const el = document.getElementById(id);
|
||||
if (el) el.scrollIntoView({ behavior: 'smooth' });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const data = localStorage.getItem('user');
|
||||
if (data) {
|
||||
setLocalUser(JSON.parse(data));
|
||||
} else {
|
||||
setLocalUser(null);
|
||||
}
|
||||
}, [user]);
|
||||
|
||||
const navItems = [
|
||||
{ title: t_cab('dashboard'), href: '/dashboard' as const },
|
||||
{ title: t_cab('plagiat'), href: '/plagiat' as const },
|
||||
{ title: t_cab('siNav'), href: '/si' as const },
|
||||
{ title: t_cab('payments'), href: '/payments' as const },
|
||||
{ title: t('profile'), href: '/profile' as const },
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="py-1 flex items-center justify-center w-full ">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
|
||||
{/* Desktop Menu */}
|
||||
<nav className="justify-between items-center flex max-sm:flex-col gap-5">
|
||||
<div className="flex items-center justify-between gap-6">
|
||||
<div className="flex items-center justify-around gap-2 w-full">
|
||||
{/* Logo */}
|
||||
<Link
|
||||
href={'/'}
|
||||
@@ -36,6 +68,36 @@ const Navbar = () => {
|
||||
height={10}
|
||||
/>
|
||||
</Link>
|
||||
|
||||
{localUser ? (
|
||||
<div className="flex items-center gap-2">
|
||||
{navItems.map((item) => (
|
||||
<Link
|
||||
key={item.title}
|
||||
href={item.href}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-md hover:bg-muted transition-colors"
|
||||
>
|
||||
{item.title}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<nav className="hidden sm:flex items-center gap-1">
|
||||
<button
|
||||
onClick={() => scrollTo('info-section')}
|
||||
className="px-3 py-1.5 text-sm font-medium rounded-md hover:bg-muted transition-colors"
|
||||
>
|
||||
{t('aboutPlagiat')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => scrollTo('steps-section')}
|
||||
className="px-3 py-1.5 text-sm font-medium rounded-md hover:bg-muted transition-colors"
|
||||
>
|
||||
{t('howItWorks')}
|
||||
</button>
|
||||
</nav>
|
||||
)}
|
||||
|
||||
<div className="flex sm:hidden items-center justify-center">
|
||||
<ChangeLang />
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user