Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Responsive design #137

Merged
merged 2 commits into from
Jun 28, 2024
Merged

Responsive design #137

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
32ffc00
Update Header.component.tsx
w3bdesign Jun 28, 2024
6cbf8f7
Delay
w3bdesign Jun 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 9 additions & 6 deletions src/components/Layout/Header.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,21 +19,20 @@ const Header = () => {
const pathname = usePathname();

return (
<header className="z-[999] relative">
<header className="z-[999] relative w-full overflow-x-hidden">
<MotionDiv
className="w-full max-w-[390px] md:max-w-[36rem] bg-slate-800 bg-opacity-80 fixed top-0 left-1/2 h-[4.5rem] shadow rounded-none shadow-lg shadow-black/[0.03] backdrop-blur-[0.5rem] sm:top-6 sm:h-[3.25rem] md:w-[36rem] sm:rounded-full mr-6 md:mr-0"
initial={{ y: -100, x: "-50%", opacity: 0 }}
className="w-screen max-w-full bg-slate-800 bg-opacity-80 fixed top-0 left-0 h-[4.5rem] shadow rounded-none shadow-lg shadow-black/[0.03] backdrop-blur-[0.5rem] sm:top-6 sm:h-[3.25rem] sm:w-[36rem] sm:left-1/2 sm:-translate-x-1/2 sm:rounded-full"
initial={{ y: -100, opacity: 0 }}
animate={{
y: 0,
x: "-50%",
opacity: 1,
transition: {
y: { duration: 0.6, ease: "easeOut" },
opacity: { duration: 0.6, ease: "easeOut" },
},
}}
/>
<nav className="flex fixed top-[0.65rem] left-1/2 h-12 -translate-x-1/2 py-2 sm:top-[1.7rem] sm:h-[initial] sm:py-0 w-full max-w-[370px] justify-end md:justify-between items-center">
<nav className="flex fixed top-[0.65rem] left-0 h-12 py-2 sm:top-[1.7rem] sm:h-[initial] sm:py-0 w-full justify-end md:justify-between items-center px-4 sm:px-0 sm:left-1/2 sm:-translate-x-1/2 sm:max-w-[36rem]">
<MotionUl
className="hidden md:flex md:w-[22rem] flex-wrap items-center justify-center gap-y-1 text-[0.9rem] font-medium text-slate-200 sm:w-[initial] sm:flex-nowrap sm:gap-5"
variants={{
Expand Down Expand Up @@ -87,7 +86,11 @@ const Header = () => {
</MotionLi>
))}
</MotionUl>
<div id="hamburger-div" data-cy="hamburger-div" className="md:hidden">
<div
id="hamburger-div"
data-cy="hamburger-div"
className="md:hidden w-full flex justify-end"
>
<MobileMenu links={LINKS} />
</div>
</nav>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Layout/MobileMenu.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ const MobileMenu = ({ links }: IMobileMenuProps) => {
type: "spring",
stiffness: 300,
damping: 24,
delay: i * 0.05,
delay: i * 0.15,
},
}),
};
Expand Down