make header and menu fixed instead of absolute to prevent movement on scroll

This commit is contained in:
Dhravya 2024-06-12 23:42:55 -05:00
parent 5569aa278c
commit a20163d7ea
3 changed files with 3 additions and 3 deletions

View file

@ -71,7 +71,7 @@ const CodeBar = React.memo(
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="size-6"
className="size-4"
>
<path
strokeLinecap="round"

View file

@ -9,7 +9,7 @@ import DynamicIsland from "./dynamicisland";
function Header() {
return (
<div>
<div className="absolute left-0 w-full flex items-center justify-between z-10">
<div className="fixed left-0 w-full flex items-center justify-between z-10">
<Link className="px-5" href="/home">
<Image
src={Logo}

View file

@ -23,7 +23,7 @@ function Menu() {
];
return (
<div className="absolute h-screen pb-[25vh] w-full p-4 flex items-end justify-end lg:justify-start lg:items-center top-0 left-0 pointer-events-none">
<div className="fixed h-screen pb-[25vh] w-full p-4 flex items-end justify-end lg:justify-start lg:items-center top-0 left-0 pointer-events-none">
<div className="">
<div className="pointer-events-auto group flex w-14 text-foreground-menu text-[15px] font-medium flex-col items-start gap-6 overflow-hidden rounded-[28px] bg-secondary px-3 py-4 duration-200 hover:w-40">
{menuItems.map((item) => (