beyhan/next-dj
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Beyhan Oğur
2026-04-26 22:12:36 +03:00
commit e881f38e4e
278 changed files with 24095 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
components/Header.tsx Normal file
View File

@@ -0,0 +1,176 @@
"use client";
import Link from "next/link";
import { useSession, signOut } from "next-auth/react";
import { useState, useEffect } from "react";
export default function Header() {
const { data: session } = useSession();
const [isSticky, setIsSticky] = useState(false);
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
// Track open state for dropdowns by their ID or Label
const [openDropdowns, setOpenDropdowns] = useState<Record<string, boolean>>({});
useEffect(() => {
const handleScroll = () => {
if (window.scrollY > 10) {
setIsSticky(true);
} else {
setIsSticky(false);
}
};
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
}, []);
const toggleMobileMenu = () => {
setIsMobileMenuOpen(!isMobileMenuOpen);
};
const toggleDropdown = (key: string, e?: React.MouseEvent) => {
if (e) {
e.preventDefault();
e.stopPropagation();
}
setOpenDropdowns((prev) => ({
...prev,
[key]: !prev[key],
}));
};
return (
<header
className={`header-area style-two ${isSticky ? "sticky-on" : ""} ${isMobileMenuOpen ? "mobile-menu-open" : ""}`}
>
<div className="header-top">
<div className="container h-100 d-flex align-items-center justify-content-between">
{/* Left Side */}
<div className="left-side d-flex align-items-center gap-4 gap-lg-5">
<div className="d-flex align-items-center gap-2 text-white">
<i className="ti ti-mail-filled"></i>
<span className="d-none d-lg-block">info@example.com</span>
</div>
<div className="d-flex align-items-center gap-2 text-white">
<i className="ti ti-map-pin-filled"></i>
<span className="d-none d-lg-block">629 Elgin St.Celina,2202</span>
</div>
<div className="d-flex align-items-center gap-2 text-white">
<i className="ti ti-phone"></i>
<span className="d-none d-lg-block">(888).123.456.7894</span>
</div>
</div>
{/* Right Side */}
<div className="right-side">
<div className="social-nav d-flex align-items-center gap-3">
<a href="#"><i className="ti ti-brand-facebook"></i></a>
<a href="#"><i className="ti ti-brand-x"></i></a>
<a href="#"><i className="ti ti-brand-linkedin"></i></a>
<a href="#"><i className="ti ti-brand-instagram"></i></a>
</div>
</div>
</div>
</div>
<nav className="navbar navbar-expand-lg">
<div className="container">
{/* Navbar Brand */}
<Link className="navbar-brand" href="/">
<img src="/assets/img/core-img/logo.png" alt="" />
</Link>
{/* Navbar Toggler */}
<button
className="navbar-toggler"
type="button"
onClick={toggleMobileMenu}
aria-label="Toggle navigation"
>
<i className="ti ti-category"></i>
</button>
{/* Navbar Nav */}
<div className={`collapse navbar-collapse justify-content-between ${isMobileMenuOpen ? "show" : ""}`} id="softoraNav">
<ul className="navbar-nav navbar-nav-scroll">
<li className="softora-dd">
<Link href="/">Home</Link>
</li>
{/* Features Dropdown Example based on Template */}
<li className="softora-dd">
<a href="#" onClick={(e) => toggleDropdown('features', e)}>
Features <i className="ti ti-caret-down-filled"></i>
</a>
{/* Mobile Toggler */}
<div className="dropdown-toggler d-lg-none" onClick={(e) => toggleDropdown('features', e)}>
<i className="ti ti-caret-down-filled"></i>
</div>
<ul
className={`softora-dd-menu ${openDropdowns['features'] ? 'menu-open' : ''}`}
>
<li><Link href="#services">Services</Link></li>
<li><Link href="/auth/register">Register</Link></li>
<li><Link href="/auth/login">Login</Link></li>
<li><Link href="/auth/forgot-password">Reset Password</Link></li>
</ul>
</li>
<li className="softora-dd">
<a href="#" onClick={(e) => toggleDropdown('utils', e)}>
Yardımcılar <i className="ti ti-caret-down-filled"></i>
</a>
{/* Mobile Toggler */}
<div className="dropdown-toggler d-lg-none" onClick={(e) => toggleDropdown('utils', e)}>
<i className="ti ti-caret-down-filled"></i>
</div>
<ul
className={`softora-dd-menu ${openDropdowns['utils'] ? 'menu-open' : ''}`}
>
<li><Link href="/assistants/converters/jsontotype">Json To Type</Link></li>
<li><Link href="/auth/login">Login</Link></li>
<li><Link href="/auth/forgot-password">Reset Password</Link></li>
</ul>
</li>
{session ? (
<>
<li className="softora-dd">
<Link href="/dashboard">Dashboard</Link>
</li>
<li className="softora-dd">
<Link href="/profile">Profile</Link>
</li>
</>
) : null}
</ul>
<div className="d-flex align-items-center mt-4 mt-lg-0">
{/* Search Button */}
<div className="header-search-btn" id="searchButton">
<button className="btn">
<i className="ti ti-search"></i>
</button>
</div>
{/* Button */}
{session ? (
<button
onClick={() => signOut({ callbackUrl: "/auth/login" })}
className="btn btn-primary"
>
Logout <i className="ti ti-logout"></i>
</button>
) : (
<Link href="/auth/register" className="btn btn-primary">
Get Started <i className="ti ti-arrow-up-right"></i>
</Link>
)}
</div>
</div>
</div>
</nav>
</header>
);
}