I am trying to fix menu-card as position : fixed for screen. But it sets at top of the center-grid not for screen.
This is the Link of my codes https://stackblitz.com/edit/nextjs-tdbx6i?file=pages%2Findex.js
index.js
import Head from 'next/head';
import styles from '../styles/Home.module.css';
import React, { useState } from 'react';
export default function Home() {
const [open, setOpen] = useState(false);
const contentMenuOpenHandler = () => {
document
.getElementById('contentMenu')
.classList.add(styles.open_content_menu);
console.log('hiiiiii');
};
const contentMenuCloseHandler = () => {
document
.getElementById('contentMenu')
.classList.remove(styles.open_content_menu);
};
return (
<>
<div className={styles.main}>
<div className={styles.left_grid}>hi1</div>
<div className={styles.center_grid}>
<div>
<p>
{' '}
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id quo
iusto officia deserunt aliquam numquam optio at eum eos. Nemo
beatae possimus ipsum quam distinctio odio minus maiores
quibusdam. Quaerat sint dolorum impedit repellat corrupti libero
aperiam natus assumenda, voluptatem sequi accusamus minima ut
provident ipsam exercitationem dolorem id, officiis possimus
repudiandae nam eius dicta recusandae. Facere consectetur labore
suscipit, dolorum, sequi placeat impedit animi eum fugiat,
assumenda voluptatum corrupti. A expedita earum nam voluptatem in
dolor laborum ducimus, inventore temporibus obcaecati ipsum harum
ex reiciendis! Hic, ex deserunt reiciendis fugit laborum nulla
nobis consequuntur molestias. Autem quisquam a odio dolorum ab
magnam unde, re
</p>
<div
id="contentMenuBtn"
className={styles.content_menu_btn_grid_wrapper}
item
xs={12}
>
<div className={styles.content_menu_btn}>
<button className={styles.btn} onClick={contentMenuOpenHandler}>
<svg className={styles.svg} viewBox="0 0 24 24">
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM8 19h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1s.45 1 1 1zm0-6h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1s.45 1 1 1zM7 6c0 .55.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1z" />
</svg>
</button>
</div>
</div>
<p>
pudiandae itaque delectus commodi. Molestias numquam sunt velit
corrupti animi dignissimos, necessitatibus deserunt repellat
veniam voluptates magnam eius veritatis ab quis inventore tempora.
Rerum ullam velit, natus, praesentium beatae aliquam mollitia enim
corrupti commodi accusamus deserunt soluta perferendis tempora
iure laborum quaerat culpa voluptatem veritatis impedit tempore
fugit atque iste? Quos neque possimus nihil illo recusandae?
Laborum animi unde aspernatur, veritatis incidunt magni eos
facilis non iste aut iure atque explicabo! Dolorem, maxime ea.
Vel, magnam ad, similique tempore tempora aspernatur, alias culpa
quas saepe excepturi deleniti reprehenderit in deserunt omnis nemo
rem exercitationem eveniet possimus repellat minus expedita? Iure
unde minus nostrum ducimus quidem? Reprehenderit, numquam aperiam!
Voluptatum, ab pariatur? Maxime, dolores eveniet! Quam sapiente
placeat labore ipsam, doloribus facilis eveniet obcaecati
praesentium cumque consectetur, temporibus magnam! Molestias
veritatis id magni, eius sint totam culpa non ex ad fugiat fugit
nam ullam, neque ipsam maxime est unde voluptates repudiandae
aperiam qui! Eum quasi nemo beatae saepe labore reiciendis, enim
sit iusto ipsum. Enim atque laborum, quisquam quia odit mollitia?
Dignissimos corporis tempora quasi numquam, cumque non vero odit
consequatur nisi dicta inventore exercitationem quam rerum
voluptas eius voluptatem quos. Sunt est rem provident
reprehenderit nemo ullam illum, tenetur aspernatur rerum. Porro
accusantium veritatis consequatur explicabo temporibus. Ullam,
expedita! Ratione possimus recusandae consectetur porro libero
quaerat. Doloribus suscipit itaque, obcaecati quibusdam omnis
explicabo libero ab cupiditate voluptates tenetur quis blanditiis
consequatur sit dicta placeat voluptas, veritatis error
consectetur sed ratione quidem reiciendis? Recusandae perferendis,
expedita hic quod placeat quo tempore aspernatur itaque, aperiam
quis ad a natus vero libero, maiores possimus. Ullam libero
similique asperiores dignissimos quaerat nobis temporibus quam
distinctio sapiente perspiciatis, officiis, excepturi, pariatur
illum cupiditate inventore necessitatibus voluptates deserunt
magnam quas ipsa unde. Exercitationem, vitae suscipit itaque
perferendis obcaecati nisi iusto incidunt eum fugiat odio dolore.
Reiciendis consequatur in, praesentium vero beatae iure ratione
assumenda distinctio reprehenderit voluptate. Rerum deserunt
tempore facilis sapiente totam magni, quam tenetur, sed
repudiandae atque labore. Tempore voluptas debitis quam quis
pariatur nam, dolor libero voluptatum impedit doloribus,
temporibus soluta eum, atque sunt fugit voluptatibus similique
sint assumenda asperiores eos. Architecto ut provident ad! Non
reprehenderit quo inventore vero, reiciendis deserunt
necessitatibus voluptatibus id magnam, eum ratione eligendi illo
natus eos voluptatem optio hic ex aut. Modi adipisci facilis,
labore quasi minus recusandae nam dignissimos inventore maxime.
Consequatur assumenda illum et temporibus accusantium sint impedit
ullam deleniti praesentium hic sunt velit tempore asperiores, id
corrupti vero ab veritatis eum aliquid inventore sequi
necessitatibus dolor ad? Placeat quia natus architecto ut dolorum
fugiat atque pariatur itaque, velit dolor recusandae sunt. A nulla
tempore numquam deserunt libero dicta nisi deleniti quam? Esse
repudiandae, quisquam soluta itaque quo molestias placeat? Porro
ducimus, tenetur mollitia numquam consectetur impedit nulla
incidunt nostrum fugit neque illo enim possimus culpa corporis
iure accusantium dicta earum exercitationem obcaecati molestias
cupiditate saepe. Quod enim atque iste facere repellendus
quibusdam nihil ipsam ea modi. Error molestias corrupti quibusdam
consequuntur sapiente enim consectetur deserunt quas reiciendis
nisi pariatur, dolor assumenda nesciunt, dolores, excepturi
obcaecati officiis. Quo provident, a delectus quia maxime
accusantium amet minima, nobis quas necessitatibus voluptas magnam
ipsum tenetur porro, est quod labore veniam! Voluptatum quo
tenetur quisquam dolorem nemo possimus expedita quidem? Accusamus
impedit eum facilis accusantium, molestiae assumenda explicabo
corrupti nobis doloribus nisi sequi sint eaque aspernatur ab cum
numquam saepe nam tempore illum dolores ea labore, fuga facere.
Sed inventore error amet incidunt, quibusdam qui provident,
nesciunt sint omnis ipsa porro ab temporibus impedit! Hic iste
voluptatem quisquam? Deleniti magni quaerat, ipsam dolor deserunt
modi dicta at repellat. Minima sed, rerum ipsa autem quo sit,
placeat eaque amet, adipisci omnis quam ullam exercitationem
asperiores! Eveniet vel beatae reprehenderit consequuntur
accusamus officiis optio ut non facilis animi aliquam odio tempora
minima, perferendis incidunt maiores magni quae quas laboriosam
quo iste veritatis aperiam, vero in. Vitae error perspiciatis
quidem accusamus enim reprehenderit quod voluptatem delectus! Qui
amet quia perferendis sed dolore id exercitationem saepe veritatis
sequi. Cum, iusto laudantium quod minima odio dolorum praesentium
aliquid unde voluptatem expedita architecto impedit modi
inventore. Voluptatem deleniti non ipsum. Corporis, totam eos
doloribus nihil molestias libero, dicta sit debitis numquam atque
ipsum placeat ullam labore incidunt assumenda iste aspernatur
necessitatibus voluptatum iure qui hic, tempora officiis vitae!
Quis hic itaque sit nihil consectetur facere, quo, cum blanditiis
provident illo, totam sunt? Quidem itaque incidunt iure voluptate
quia? Animi magnam architecto, consectetur
</p>
<p>
laboriosam quas voluptatum accusamus placeat necessitatibus
voluptatem ipsam tempore assumenda aliquid sequi quisquam
voluptatibus, amet excepturi reprehenderit ea iusto provident! Ea
beatae enim modi nobis quibusdam soluta culpa suscipit dolor
perspiciatis exercitationem fugit necessitatibus consequatur
repellendus quidem, perferendis ullam quasi, aut tempore! Natus
accusantium atque ipsum reprehenderit? Et atque iste, cum esse
quia assumenda, explicabo dolore asperiores enim possimus
laudantium molestias eveniet a impedit facilis earum
exercitationem blanditiis obcaecati consequuntur deleniti, laborum
nesciunt inventore voluptates? Vel ullam vitae aliquid sapiente
quas ea ipsam in eaque, aut culpa dolor autem ad architecto, harum
eum ex accusantium earum officiis itaque? Ullam, provident porro
maxime cum, quos consequuntur officiis architecto laborum ut vel,
itaque impedit sit sunt atque natus reiciendis accusantium
molestiae esse numquam. Voluptas, magni! Beatae commodi adipisci
repudiandae eveniet illum saepe nobis aspernatur id accusamus,
tenetur similique voluptatibus enim dolorum, iure nam ipsam
officia sed. Dicta rerum nesciunt saepe illo consequatur. Eveniet
voluptas necessitatibus hic deleniti reprehenderit quidem quod
quisquam modi! Nihil ipsum fuga hic labore provident? Accusantium,
rem.{' '}
</p>
<div id="contentMenu" className={styles.menu_card_warapper}>
<div className={styles.close_btn_block}>
<button
className={styles.close_btn}
onClick={contentMenuCloseHandler}
>
Close
</button>
</div>
<div>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
</div>
</div>
</div>
</div>
<div className={styles.right_grid}>hi3</div>
</div>
</>
);
}
home.module.scss
.main {
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
width: 100%;
flex-direction: row;
background-color: rgb(104, 104, 23);
}
.center_grid {
max-width: 56%;
flex-basis: 56%;
width: 56%;
position: absolute;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%);
left: 50%;
background-color: green;
}
.left_grid {
position: fixed;
width: 22%;
left: 0;
background-color: blue;
max-width: 22%;
flex-basis: 22%;
flex-grow: 0;
height: 100vh;
}
.right_grid {
position: fixed;
width: 22%;
right: 0;
background-color: blue;
max-width: 22%;
flex-basis: 22%;
flex-grow: 0;
height: 100vh;
}
.content_menu_btn_grid_wrapper {
position: sticky;
top: 60vh;
right: 0;
z-index: 1;
}
.content_menu_btn {
width: 100%;
height: 60px;
display: flex;
justify-content: flex-end;
align-items: center;
margin-top: 1rem;
margin-bottom: -3.5rem;
}
.btn {
background-color: pink;
border: none;
cursor: pointer;
margin: 0;
width: fit-content;
display: flex;
justify-content: center;
align-items: center;
padding: 0.8rem;
border-radius: 50%;
box-shadow: 0 3px 10px rgba(#000, 0.3);
margin-top: 4rem;
margin-right: 1rem;
}
.svg {
width: 30px;
height: 30px;
fill: white;
}
.open_content_menu {
display: block !important;
}
.menu_card_warapper {
position: fixed;
top: 0;
z-index: 1001;
display: none;
width: 100%;
left: 0;
background-color: #ffffff;
overflow: hidden;
border: 10px black solid;
}
.close_btn_block {
background-color: yellow;
}
I need, when I click Menu-button the menu-card should open and it should fix center of the screen. When I scroll it should not move. and When I close the curse should be in initial stage not on the top of the center-grid
What is the issue in my codes? Anyone give me the solutions please.
Thanks
