Home Menu
This commit is contained in:
Sedat Öztürk
parent
efdba93e32
commit
6dd3cc4c32
1 changed files with 152 additions and 80 deletions
|
|
@ -1,24 +1,20 @@
|
|||
import View from '@/views/Views'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { useLocation, Link } from 'react-router-dom'
|
||||
import { FaFacebook, FaTwitter, FaLinkedin, FaInstagram } from 'react-icons/fa';
|
||||
import {
|
||||
FaBars,
|
||||
FaTimes,
|
||||
FaHome,
|
||||
FaInfoCircle,
|
||||
FaVectorSquare,
|
||||
FaBriefcase,
|
||||
FaBook,
|
||||
FaPhone,
|
||||
FaFacebook,
|
||||
FaTwitter,
|
||||
FaLinkedin,
|
||||
FaInstagram,
|
||||
FaMapPin,
|
||||
FaEnvelope,
|
||||
FaPlayCircle,
|
||||
FaBookOpen
|
||||
} from 'react-icons/fa';
|
||||
LuMenu,
|
||||
LuX,
|
||||
LuHouse,
|
||||
LuInfo,
|
||||
LuBriefcase,
|
||||
LuPackage,
|
||||
LuBookOpen,
|
||||
LuMonitorPlay,
|
||||
LuPhone,
|
||||
LuMapPin,
|
||||
LuMail,
|
||||
} from 'react-icons/lu';
|
||||
import Logo from '@/views/public/Logo'
|
||||
import { ROUTES_ENUM } from '@/routes/route.constant'
|
||||
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||||
|
|
@ -66,43 +62,43 @@ const PublicLayout = () => {
|
|||
resourceKey: 'App.Home',
|
||||
name: translate('::App.Home'),
|
||||
path: ROUTES_ENUM.public.home,
|
||||
icon: FaHome,
|
||||
icon: LuHouse,
|
||||
},
|
||||
{
|
||||
resourceKey: 'App.About',
|
||||
name: translate('::App.About'),
|
||||
path: ROUTES_ENUM.public.about,
|
||||
icon: FaInfoCircle,
|
||||
icon: LuInfo,
|
||||
},
|
||||
{
|
||||
resourceKey: 'App.Services',
|
||||
name: translate('::App.Services'),
|
||||
path: ROUTES_ENUM.public.services,
|
||||
icon: FaBriefcase,
|
||||
icon: LuBriefcase,
|
||||
},
|
||||
{
|
||||
resourceKey: 'Public.nav.products',
|
||||
name: translate('::App.Orders'),
|
||||
path: ROUTES_ENUM.public.products,
|
||||
icon: FaVectorSquare,
|
||||
icon: LuPackage,
|
||||
},
|
||||
{
|
||||
resourceKey: 'Public.nav.blog',
|
||||
name: translate('::App.BlogManagement'),
|
||||
path: ROUTES_ENUM.public.blog,
|
||||
icon: FaBookOpen,
|
||||
icon: LuBookOpen,
|
||||
},
|
||||
{
|
||||
resourceKey: 'App.Demos',
|
||||
name: translate('::App.Demos'),
|
||||
action: () => setIsDemoOpen(true),
|
||||
icon: FaPlayCircle,
|
||||
icon: LuMonitorPlay,
|
||||
},
|
||||
{
|
||||
resourceKey: 'Public.nav.contact',
|
||||
name: translate('::App.Contact'),
|
||||
path: ROUTES_ENUM.public.contact,
|
||||
icon: FaPhone,
|
||||
icon: LuPhone,
|
||||
},
|
||||
{
|
||||
resourceKey: 'Public.nav.giris',
|
||||
|
|
@ -111,15 +107,12 @@ const PublicLayout = () => {
|
|||
},
|
||||
]
|
||||
|
||||
const getNavItemClass = (resourceKey?: string) => {
|
||||
switch (resourceKey) {
|
||||
case 'Public.nav.giris':
|
||||
return 'bg-blue-600 rounded px-2 py-1'
|
||||
case 'Public.nav.basket':
|
||||
return 'bg-green-600 rounded px-2 py-1'
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
const isLoginLink = (resourceKey?: string) => resourceKey === 'Public.nav.giris'
|
||||
|
||||
const isActiveLink = (path?: string) => {
|
||||
if (!path) return false
|
||||
if (path === ROUTES_ENUM.public.home) return location.pathname === path
|
||||
return location.pathname.startsWith(path)
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -127,60 +120,137 @@ const PublicLayout = () => {
|
|||
<div className="flex flex-col min-h-screen">
|
||||
{/* HEADER */}
|
||||
<header
|
||||
className={`fixed w-full z-50 transition-all duration-300 ${
|
||||
className={`fixed w-full z-50 transition-all duration-500 ${
|
||||
scrolled
|
||||
? 'bg-gray-900/95 backdrop-blur-sm shadow-md py-2'
|
||||
: 'bg-gray-900/80 backdrop-blur-sm py-4'
|
||||
? 'bg-gray-950 shadow-lg shadow-black/30 py-2 border-b border-white/10'
|
||||
: 'bg-gray-950/80 backdrop-blur-sm py-4 border-b border-white/5'
|
||||
}`}
|
||||
>
|
||||
<div className="container mx-auto px-4 flex items-center justify-between">
|
||||
<div className="container mx-auto px-6 flex items-center justify-between">
|
||||
<Logo mode="dark" />
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<nav className="hidden md:flex items-center space-x-4">
|
||||
{navLinks.map((link) =>
|
||||
link.path ? (
|
||||
<nav className="hidden md:flex items-center gap-1">
|
||||
{navLinks
|
||||
.filter((l) => !isLoginLink(l.resourceKey))
|
||||
.map((link) => {
|
||||
const active = isActiveLink(link.path)
|
||||
const baseClass =
|
||||
'relative flex items-center gap-1.5 px-3 py-2 text-sm font-medium rounded-md transition-all duration-200 group'
|
||||
const activeClass = active
|
||||
? 'text-white'
|
||||
: 'text-gray-300 hover:text-white'
|
||||
return link.path ? (
|
||||
<Link
|
||||
key={link.path}
|
||||
to={link.path}
|
||||
className={`flex items-center gap-1 font-medium text-sm text-white hover:text-blue-400 transition-colors ${getNavItemClass(link.resourceKey)}`}
|
||||
className={`${baseClass} ${activeClass}`}
|
||||
>
|
||||
{link.icon && <link.icon size={18} />}
|
||||
{link.icon && (
|
||||
<link.icon
|
||||
size={22}
|
||||
strokeWidth={1.75}
|
||||
className={active ? 'text-blue-400' : 'text-gray-400 group-hover:text-blue-400 transition-colors'}
|
||||
/>
|
||||
)}
|
||||
{link.name}
|
||||
<span
|
||||
className={`absolute bottom-0 left-3 right-3 h-0.5 rounded-full bg-blue-500 transition-all duration-200 ${
|
||||
active ? 'opacity-100' : 'opacity-0 group-hover:opacity-60'
|
||||
}`}
|
||||
/>
|
||||
</Link>
|
||||
) : (
|
||||
<button
|
||||
key={link.name}
|
||||
onClick={link.action}
|
||||
className={`flex items-center gap-1 font-medium text-sm text-white hover:text-blue-400 transition-colors ${getNavItemClass(link.resourceKey)}`}
|
||||
className={`${baseClass} ${activeClass}`}
|
||||
>
|
||||
{link.icon && <link.icon size={18} />}
|
||||
{link.name}
|
||||
</button>
|
||||
),
|
||||
{link.icon && (
|
||||
<link.icon
|
||||
size={22}
|
||||
strokeWidth={1.75}
|
||||
className="text-gray-400 group-hover:text-blue-400 transition-colors"
|
||||
/>
|
||||
)}
|
||||
<LanguageSelector />
|
||||
{link.name}
|
||||
<span className="absolute bottom-0 left-3 right-3 h-0.5 rounded-full bg-blue-500 opacity-0 group-hover:opacity-60 transition-all duration-200" />
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</nav>
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<button className="md:hidden text-white" onClick={toggleMenu} aria-label="Toggle menu">
|
||||
{isOpen ? <FaTimes size={24} /> : <FaBars size={24} />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Navigation */}
|
||||
{isOpen && (
|
||||
<div className="md:hidden bg-gray-900/95 backdrop-blur-sm shadow-lg">
|
||||
<div className="container mx-auto px-4">
|
||||
<nav className="flex flex-col space-y-4 py-4">
|
||||
{navLinks.map((link) =>
|
||||
{/* Right side: Language + Login */}
|
||||
<div className="hidden md:flex items-center gap-3">
|
||||
<LanguageSelector />
|
||||
<div className="w-px h-5 bg-white/20" />
|
||||
{navLinks
|
||||
.filter((l) => isLoginLink(l.resourceKey))
|
||||
.map((link) =>
|
||||
link.path ? (
|
||||
<Link
|
||||
key={link.path}
|
||||
to={link.path}
|
||||
className={`flex items-center gap-1 font-medium text-white hover:text-blue-400 transition-colors ${getNavItemClass(link.resourceKey)}`}
|
||||
onClick={toggleMenu}
|
||||
className="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-semibold text-white bg-blue-600 hover:bg-blue-500 rounded-lg shadow-md shadow-blue-900/30 transition-all duration-200 hover:shadow-blue-700/40 hover:-translate-y-px"
|
||||
>
|
||||
{link.icon && <link.icon size={18} />}
|
||||
{link.name}
|
||||
</Link>
|
||||
) : null,
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<button
|
||||
className="md:hidden flex items-center justify-center w-9 h-9 text-white rounded-md hover:bg-white/10 transition-colors"
|
||||
onClick={toggleMenu}
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
{isOpen ? <LuX size={20} strokeWidth={2} /> : <LuMenu size={20} strokeWidth={2} />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Navigation */}
|
||||
<div
|
||||
className={`md:hidden overflow-hidden transition-all duration-300 ease-in-out ${
|
||||
isOpen ? 'max-h-screen opacity-100' : 'max-h-0 opacity-0'
|
||||
}`}
|
||||
>
|
||||
<div className="bg-gray-950/98 backdrop-blur-md border-t border-white/10">
|
||||
<div className="container mx-auto px-6 py-3">
|
||||
<nav className="flex flex-col gap-1">
|
||||
{navLinks.map((link) => {
|
||||
const active = isActiveLink(link.path)
|
||||
const isLogin = isLoginLink(link.resourceKey)
|
||||
if (isLogin) {
|
||||
return link.path ? (
|
||||
<Link
|
||||
key={link.path}
|
||||
to={link.path}
|
||||
onClick={toggleMenu}
|
||||
className="mt-2 flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-semibold text-white bg-blue-600 hover:bg-blue-500 rounded-lg transition-colors"
|
||||
>
|
||||
{link.name}
|
||||
</Link>
|
||||
) : null
|
||||
}
|
||||
return link.path ? (
|
||||
<Link
|
||||
key={link.path}
|
||||
to={link.path}
|
||||
onClick={toggleMenu}
|
||||
className={`flex items-center gap-2.5 px-3 py-2.5 text-sm font-medium rounded-md transition-colors ${
|
||||
active
|
||||
? 'bg-white/10 text-white'
|
||||
: 'text-gray-300 hover:bg-white/5 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
{link.icon && (
|
||||
<link.icon
|
||||
size={16}
|
||||
strokeWidth={1.75}
|
||||
className={active ? 'text-blue-400' : 'text-gray-400'}
|
||||
/>
|
||||
)}
|
||||
{link.name}
|
||||
</Link>
|
||||
) : (
|
||||
|
|
@ -190,18 +260,20 @@ const PublicLayout = () => {
|
|||
link.action?.()
|
||||
toggleMenu()
|
||||
}}
|
||||
className={`flex items-center gap-1 font-medium text-white hover:text-blue-400 transition-colors text-left ${getNavItemClass(link.resourceKey)}`}
|
||||
className="flex items-center gap-2.5 px-3 py-2.5 text-sm font-medium text-gray-300 hover:bg-white/5 hover:text-white rounded-md transition-colors text-left"
|
||||
>
|
||||
{link.icon && <link.icon size={18} />}
|
||||
{link.icon && <link.icon size={16} strokeWidth={1.75} className="text-gray-400" />}
|
||||
{link.name}
|
||||
</button>
|
||||
),
|
||||
)}
|
||||
)
|
||||
})}
|
||||
<div className="pt-2 pb-1 border-t border-white/10 mt-1">
|
||||
<LanguageSelector />
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="flex-grow">
|
||||
|
|
@ -373,11 +445,11 @@ const PublicLayout = () => {
|
|||
</h3>
|
||||
<ul className="space-y-3">
|
||||
<li className="flex items-start space-x-3">
|
||||
<FaMapPin size={20} className="text-gray-400 mt-1 flex-shrink-0" />
|
||||
<LuMapPin size={18} strokeWidth={1.75} className="text-gray-400 mt-1 flex-shrink-0" />
|
||||
<span className="text-gray-400">{translate('::Public.footer.address')}</span>
|
||||
</li>
|
||||
<li className="flex items-center space-x-3">
|
||||
<FaPhone size={20} className="text-gray-400 flex-shrink-0" />
|
||||
<LuPhone size={18} strokeWidth={1.75} className="text-gray-400 flex-shrink-0" />
|
||||
<a
|
||||
href="tel:+905447697638"
|
||||
className="text-gray-400 hover:text-white transition-colors"
|
||||
|
|
@ -386,7 +458,7 @@ const PublicLayout = () => {
|
|||
</a>
|
||||
</li>
|
||||
<li className="flex items-center space-x-3">
|
||||
<FaEnvelope size={20} className="text-gray-400 flex-shrink-0" />
|
||||
<LuMail size={18} strokeWidth={1.75} className="text-gray-400 flex-shrink-0" />
|
||||
<a
|
||||
href="mailto:destek@sozsoft.com"
|
||||
className="text-gray-400 hover:text-white transition-colors"
|
||||
|
|
|
|||
Loading…
Reference in a new issue