Davron/ignum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upheader complated

Browse Source
This commit is contained in:
nabijonovdavronbek619@gmail.com
2026-03-01 14:18:12 +05:00
parent 9d406d0998
commit 4737c091be
7 changed files with 48 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
components/layout/navbar.tsx
View File

@@ -35,7 +35,16 @@ export function Navbar() {
<nav
className={`fixed top-0 left-0 right-0 z-50 border-b border-gray-400/50 ${scrolled && "bg-black"} transition`}
>
{!scrolled && <UpHeader />}
<div
className={`overflow-hidden transition-all duration-500 ease-in-out ${
scrolled
? "max-h-0 opacity-0 -translate-y-2"
: "max-h-20 opacity-100 translate-y-0"
}`}
style={{ transform: scrolled ? "translateY(-8px)" : "translateY(0)" }}
>
<UpHeader />
</div>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center h-20">
{/* Logo */}

41
components/layout/upHeader.tsx
View File

@@ -1,4 +1,5 @@
import { Mail, Phone, Send } from "lucide-react";
import { Download, Mail, Phone, Send } from "lucide-react";
import { useTranslations } from "next-intl";
const downloadCatalog = () => {
const link = document.createElement("a");
@@ -10,25 +11,39 @@ const downloadCatalog = () => {
};
export default function UpHeader() {
const t = useTranslations();
return (
<div className="w-full border-b border-gray-400/50">
<div className="max-w-7xl mx-auto py-2 px-4 sm:px-6 lg:px-8 flex justify-between items-center">
<div className="flex items-center gap-4">
<a>
<Mail />
</a>
<a>
<Phone />
</a>
<a>
<Send />
</a>
<div className="flex items-center gap-2">
<p className="text-white font-medium">{t("navbar.connect")}:</p>
<div className="flex items-center gap-3">
<a
href="mailto:support@fireforce.com"
className="p-1 rounded-sm text-white hover:text-white hover:border-red-700 hover:bg-red-700 transition"
>
<Mail size={20} />
</a>
<a
href="tel:+998773722121"
className="p-1 rounded-sm text-white hover:text-white hover:border-red-700 hover:bg-red-700 transition"
>
<Phone size={20} />
</a>
<a
href="https://t.me/ignum_tech"
className="p-1 rounded-sm text-white hover:text-white hover:border-red-700 hover:bg-red-700 transition"
>
<Send size={20} />
</a>
</div>
</div>
<button
onClick={downloadCatalog}
className="py-1 px-4 hover:bg-red-700 hover:cursor-pointer hover:border-red-700 text-white font-medium border border-white rounded-md transition"
className="py-1 px-4 flex items-center gap-2 hover:bg-red-700 hover:cursor-pointer hover:border-red-700 text-white font-medium border border-white rounded-md transition"
>
Download Catalog
<Download size={18} />
{t("navbar.catalog")}
</button>
</div>
</div>