Feat/dimentorin landing page (#49)
* feat(dimentorin): slicing landing page menu mentoring * feat(dimentorin): slicing landing page detail mentor * feat(dimentorin): slicing modal booking mentor * feat(dimentorin): slicing landing - resources page * feat(dimentorin): slicing landing - articles page * feat(dimentorin): slicing landing - detail articles page
This commit is contained in:
@@ -2,8 +2,8 @@ import { CloseOutlined, MenuOutlined } from "@ant-design/icons";
|
||||
import { Button } from "@imphnen-frontend-service/ui/atoms";
|
||||
import { cn, For, Show } from "@imphnen-frontend-service/utils";
|
||||
import { motion, useMotionValueEvent, useScroll, Variants } from "framer-motion";
|
||||
import { FC, useState } from "react";
|
||||
import { Link, useLocation } from "react-router-dom";
|
||||
import { FC, useMemo, useState } from "react";
|
||||
import { Link, NavLink, useLocation } from "react-router-dom";
|
||||
|
||||
const MENUS: { label: string; href: string }[] = [
|
||||
{ label: "Home", href: "/" },
|
||||
@@ -30,8 +30,15 @@ export const Header: FC = () => {
|
||||
else setShow(true)
|
||||
})
|
||||
|
||||
const isActive = useMemo(() => {
|
||||
return (path: string) => {
|
||||
if (path === '/' && location.pathname !== '/') return false
|
||||
return location.pathname.includes(path)
|
||||
}
|
||||
}, [location.pathname]);
|
||||
|
||||
return (
|
||||
<div className="w-full px-8 pt-8 top-0 z-50 md:px-[60px] md:pt-[60px] lg:px-20 sticky overflow-hidden">
|
||||
<div className={cn("w-full px-8 pt-8 top-0 z-50 md:px-[60px] md:pt-[60px] lg:px-20 sticky", !show && "overflow-hidden")}>
|
||||
<motion.header
|
||||
className="bg-white shadow-lg rounded-lg h-12 flex justify-between w-full max-w-7xl xl:mx-auto md:h-[60px] lg:h-[71px]"
|
||||
aria-roledescription="nav"
|
||||
@@ -63,18 +70,22 @@ export const Header: FC = () => {
|
||||
variant="text"
|
||||
className={cn(
|
||||
"px-10 py-1.5 text-neutral-300 hover:text-neutral-400 lg:px-2.5 lg:py-2",
|
||||
location.pathname === menu.href && "text-primary-500 hover:text-primary-500"
|
||||
isActive(menu.href) && "text-primary-500 hover:text-primary-500"
|
||||
)}
|
||||
>
|
||||
<Link to={menu.href}>{menu.label}</Link>
|
||||
<NavLink to={menu.href}>{menu.label}</NavLink>
|
||||
</Button>
|
||||
)}
|
||||
</For>
|
||||
<Button type="button" className="px-12 py-1 md:hidden">Login</Button>
|
||||
<Link to="/auth/login">
|
||||
<Button type="button" className="px-12 py-1 lg:hidden">Login</Button>
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
<div>
|
||||
<Button type="button" className="px-5 py-2 hidden lg:block">Login</Button>
|
||||
<Link to="/auth/login">
|
||||
<Button type="button" className="px-5 py-2 hidden lg:block">Login</Button>
|
||||
</Link>
|
||||
<Button
|
||||
type="button"
|
||||
variant="text"
|
||||
|
||||
Reference in New Issue
Block a user