I'm currently working on a website that features a sidebar for smaller screens. While the sidebar functions properly, I would like to keep the background page fixed in place when the sidebar is active so it does not scroll.
In my code, I have utilized the _app.tsx file to implement a sticky navigation bar (which includes the menu button for the sidebar) and the content section (with a sticky footer for each page).
To control the visibility of the sidebar, I have used a State handler and attempted adding overflow-hidden to the content area based on suggestions found in various discussions on this topic - unfortunately, without success.
The snippet from my _app.tsx file appears as follows:
import Footer from '@/components/footer';
import Navbar from '@/components/navbar';
import '@/styles/globals.css';
import type { AppProps } from 'next/app';
import { Inter } from 'next/font/google';
import { useState } from 'react';
const inter = Inter({ subsets: ['latin'] });
export default function App({ Component, pageProps }: AppProps) {
const [active, setActive] = useState(false);
const [showSearch, setShowSearch] = useState(false);
const [searchText, setSearchText] = useState('');
const handleClick = () => {
setActive(!active);
};
const sideClick = () => {
setActive(false);
};
const searchClick = () => {
setShowSearch(!showSearch);
};
const clearSearch = () => {
setSearchText('');
};
return (
<div className="flex flex-col h-screen">
<div className="fixed top-0 z-50 w-full">
<Navbar
active={active}
handleClick={handleClick}
sideClick={sideClick}
showSearch={showSearch}
searchClick={searchClick}
searchText={searchText}
clearSearch={clearSearch}
/>
</div>
<div className={`${active ? 'overflow-hidden' : 'block'}`}>
<div className="max-w-[1372px] mt-[42px] md:mt-[48px] grow mx-auto justify-center">
<Component {...pageProps} />
</div>
<div className="w-full">
<Footer />
</div>
</div>
</div>
);
}
Applying overflow-hidden disables scrolling but causes the page to jump back to the top.
I have also experimented with changing the position of the content to fixed, which results in the same issue of jumping to the top.
Does anyone have any ideas on how I can achieve the desired effect of keeping the background stationary when the sidebar is open?