From 43564b831b8d72b7a25af8fc15f870c1fd933645 Mon Sep 17 00:00:00 2001 From: HACO <haco.tw@gmail.com> Date: Tue, 11 Jun 2024 15:03:44 +0800 Subject: [PATCH] fix: Navbar --- components/ApplicationInfo.tsx | 2 -- components/Nav.tsx | 31 ++++++++++++++++++++----------- components/nav/StartRegister.tsx | 11 ----------- 3 files changed, 20 insertions(+), 24 deletions(-) delete mode 100644 components/nav/StartRegister.tsx diff --git a/components/ApplicationInfo.tsx b/components/ApplicationInfo.tsx index 92c2f4c..6fa5052 100644 --- a/components/ApplicationInfo.tsx +++ b/components/ApplicationInfo.tsx @@ -1,5 +1,3 @@ -import StartRegister from "./nav/StartRegister"; - export default function ApplicationInfo() { return ( <> diff --git a/components/Nav.tsx b/components/Nav.tsx index 172de5c..fb8fe55 100644 --- a/components/Nav.tsx +++ b/components/Nav.tsx @@ -1,5 +1,4 @@ import { useState } from "react"; -import StartRegister from "./nav/StartRegister"; import Link from "next/link"; function NavItem({ href, @@ -13,7 +12,7 @@ function NavItem({ return ( <Link href={href} - className="text-white hover:text-[#F9A8D4] font-medium text-xl border-b-[1px] border-blue-50 py-4 lg:border-0" + className="text-white hover:opacity-80 font-medium text-lg border-b-[1px] border-blue-50 py-4 lg:border-0" onClick={() => setIsNavOpen(false)} scroll={!href.startsWith("/#")} > @@ -30,19 +29,29 @@ export default function Nav() { return ( <> <div className="fixed top-0 left-0 right-0 z-[999999999999999]" > - <nav className="bg-opacity-80 bg-gradient-to-b from-[#060A11] to-[#0C142020] py-3 px-6 lg:py-3 lg:px-10 flex items-center justify-between shadow-2xl transition-all h-[4rem]"> + <nav className="bg-opacity-80 bg-gradient-to-b from-[#060A11] to-[#0C142020] py-3 px-6 lg:py-2 lg:px-10 flex items-center justify-between shadow-2xl transition-all h-[4rem] lg:h-auto lg:bg-[linear-gradient(90deg,rgba(12,20,32,1)_0%,rgba(50,84,134,1)_60%,rgba(12,20,32,1)_100%)]"> <Link href="/" className="font-bold"> <img src="/2024/icon/logo.svg" className="h-10" alt="Logo" /> </Link> - <div className="hidden space-x-4 lg:flex"> - {navItems.map((item, index) => ( - <NavItem href={item.href} key={index} setIsNavOpen={setIsNavOpen}> - {item.text} - </NavItem> - ))} - </div> <div className="flex flex-row gap-4"> - <StartRegister></StartRegister> + <div className="hidden mr-3 space-x-4 text-right lg:flex"> + {navItems.map((item, index) => ( + <NavItem href={item.href} key={index} setIsNavOpen={setIsNavOpen}> + {item.text} + </NavItem> + ))} + </div> + <div className="flex-1 my-auto"> + <div className="flex mx-auto my-auto"> + <a + className="bg-gradient-to-b from-[#78C2FF] to-[#9C7DFF] rounded-full p-1 opacity-60 cursor-not-allowed" + // href="https://sitcon.kktix.cc/events/sitcon-camp2024" + target="_blank" + > + <p className="bg-white text-lg font-medium text-[#1E3D6C] px-4 py-1 rounded-full h-full">報名截止</p> + </a> + </div> + </div> <button onClick={() => setIsNavOpen(!isNavOpen)} className="text-white font-['Anicons_Regular'] text-xl transition-all lg:hidden" diff --git a/components/nav/StartRegister.tsx b/components/nav/StartRegister.tsx deleted file mode 100644 index 95559d3..0000000 --- a/components/nav/StartRegister.tsx +++ /dev/null @@ -1,11 +0,0 @@ -export default function StartRegister() { - return ( - <a - className="bg-gradient-to-b from-[#78C2FF] to-[#9C7DFF] rounded-full p-1 cursor-not-allowed" - // href="https://sitcon.kktix.cc/events/sitcon-camp2024" - target="_blank" - > - <p className="bg-white text-md font-bold text-[#1E3D6C] px-6 py-1 rounded-full h-full">報名截止</p> - </a> - ); -} \ No newline at end of file