I developed a side bar that holds my socials , this sidebar should be fixed , and the only scrollable part of my website should be the main section but the sidebar should stay fixed , on desktop view it sems to be good as it the sidebar is at the end of the page and does not move and the main part of my website is the one that scrolls, however when i am on mobile, the sidebar is very weird.
So this is how it is supposed to look like
](https://i.sstatic.net/yk77WED0.png)
and i have managed to do it on my website here
but this is what it looks like o mobile view
To implement the sidebar, here is what i have done in my Next.js app,
export default function RootLayout({ children }) {
return (
<html lang="en" className="h-full">
<body className={`${firacode.className} flex h-full`}>
<div className="h-full">
<Sidebar/>
</div>
<div>
<ActiveSectionContextProvider>
<Header/>
{children}
<Footer/>
</ActiveSectionContextProvider>
</div>
</body>
</html>
);
}
and here is my sidebar component
export default function Sidebar() {
return (
<div className="h-full p-5 flex flex-col justify-between items-center">
<div>
<Link href='/#home'>
<p className="hidden md:block text-5xl text-white mt-[1.5rem]">R</p>
</Link>
</div>
<div className="flex flex-col items-center">
<div className="flex flex-col gap-y-10 mb-10">
<Link href="">
<FiGithub className="transition-colors duration-300 ease-in-out hover:text-green-500 cursor-pointer text-white h-6 w-6"/>
</Link>
<Link href="">
<FaLinkedinIn className="transition-colors duration-300 ease-in-out hover:text-green-500 cursor-pointer text-white h-6 w-6" />
</Link>
<Link href="">
<SiLeetcode className="transition-colors duration-300 ease-in-out hover:text-green-500 cursor-pointer text-white h-6 w-6" />
</Link>
</div>
<div className="h-[8rem] w-1 rounded-full bg-white"></div>
</div>
</div>
)
}