import { AppShell, Navbar } from "@mantine/core";
export default function App() {
return (
<AppShell
navbar={
<Navbar fixed position={{ top: 0, left: 0 }} width={{ base: 200 }}>
Navbar
</Navbar>
}
>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu
consequat ac felis donec. Non quam lacus suspendisse faucibus interdum
posuere. Est placerat in egestas erat imperdiet sed euismod. Arcu
vitae elementum curabitur vitae nunc. Quisque non tellus orci ac. Nibh
nisl condimentum id venenatis a condimentum vitae. Duis at consectetur
lorem donec massa sapien. Suspendisse interdum consectetur libero id
faucibus nisl tincidunt eget. Morbi tincidunt augue interdum velit
euismod. Pretium fusce id velit ut tortor pretium viverra suspendisse
potenti. Pellentesque diam volutpat commodo sed egestas. Pharetra et
ultrices neque ornare aenean euismod elementum nisi quis. Justo nec
ultrices dui sapien eget. Nulla facilisi etiam dignissim diam quis
enim lobortis scelerisque fermentum. Feugiat pretium nibh ipsum
consequat nisl vel. Leo a diam sollicitudin tempor id. Quisque egestas
diam in arcu cursus euismod quis viverra nibh. Non consectetur a erat
nam. Massa placerat duis ultricies lacus. Habitasse platea dictumst
quisque sagittis purus sit amet. Aliquam nulla facilisi cras fermentum
odio eu feugiat pretium nibh. Egestas diam in arcu cursus euismod.
Feugiat in ante metus dictum at. Integer eget aliquet nibh praesent
tristique magna. Pharetra massa massa ultricies mi quis. Nisl vel
pretium lectus quam id. Dolor magna eget est lorem. Purus faucibus
ornare suspendisse sed nisi lacus sed. Feugiat vivamus at augue eget
arcu. Cursus metus aliquam eleifend mi in nulla posuere sollicitudin.
Massa id neque aliquam vestibulum morbi blandit cursus risus at.
Vehicula ipsum a arcu cursus vitae. Donec massa sapien faucibus et
molestie. Aliquet lectus proin nibh nisl condimentum id venenatis.
Cras tincidunt lobortis feugiat vivamus at augue. Est sit amet
facilisis magna etiam. Netus et malesuada fames ac turpis egestas.
Ultrices sagittis orci a scelerisque purus. Tempus urna et pharetra
pharetra massa. Sapien faucibus et molestie ac feugiat sed lectus.
Lacinia quis vel eros donec ac odio tempor. Dictumst quisque sagittis
purus sit amet volutpat. Risus at ultrices mi tempus imperdiet.
Elementum eu facilisis sed odio morbi quis commodo. Ante metus dictum
at tempor commodo ullamcorper a lacus vestibulum. Sed lectus
vestibulum mattis ullamcorper velit sed ullamcorper. Quam adipiscing
vitae proin sagittis nisl rhoncus mattis rhoncus. Nam aliquam sem et
tortor consequat id porta. Vel eros donec ac odio tempor orci dapibus
ultrices. Massa tempor nec feugiat nisl pretium fusce id velit ut.
Aliquet lectus proin nibh nisl condimentum. Morbi tincidunt ornare
massa eget egestas purus viverra accumsan. Et leo duis ut diam quam
nulla porttitor. Cras tincidunt lobortis feugiat vivamus at augue.
Viverra suspendisse potenti nullam ac tortor vitae purus. Dolor sed
viverra ipsum nunc. Dui vivamus arcu felis bibendum ut tristique et
egestas. Odio facilisis mauris sit amet massa vitae tortor. Egestas
erat imperdiet sed euismod. Auctor eu augue ut lectus arcu bibendum.
Et ultrices neque ornare aenean. Urna condimentum mattis pellentesque
id nibh. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras
fermentum odio. Pharetra convallis posuere morbi leo. Gravida arcu ac
tortor dignissim convallis aenean et tortor. Duis at tellus at urna
condimentum mattis. Lectus proin nibh nisl condimentum id venenatis a.
Neque egestas congue quisque egestas diam in arcu. Mauris nunc congue
nisi vitae suscipit tellus mauris a diam. Urna neque viverra justo
nec. Turpis massa tincidunt dui ut. Ornare massa eget egestas purus
viverra. Maecenas sed enim ut sem viverra aliquet eget sit amet.
Adipiscing elit duis tristique sollicitudin. Metus aliquam eleifend mi
in nulla. Faucibus a pellentesque sit amet porttitor eget dolor.
Laoreet non curabitur gravida arcu ac tortor dignissim convallis.
Blandit cursus risus at ultrices mi tempus imperdiet nulla. Malesuada
bibendum arcu vitae elementum. Nunc sed velit dignissim sodales ut.
Aliquam sem et tortor consequat id porta nibh. A cras semper auctor
neque vitae tempus quam pellentesque. Interdum varius sit amet mattis
vulputate enim. Aliquam nulla facilisi cras fermentum odio. Ac tortor
dignissim convallis aenean et tortor at risus viverra. Condimentum
vitae sapien pellentesque habitant morbi tristique senectus et. Mauris
rhoncus aenean vel elit. Egestas purus viverra accumsan in nisl nisi
scelerisque. In nulla posuere sollicitudin aliquam ultrices sagittis.
Tincidunt praesent semper feugiat nibh sed. Tristique magna sit amet
purus gravida quis. Et egestas quis ipsum suspendisse ultrices gravida
dictum fusce ut. Mauris sit amet massa vitae tortor condimentum. Enim
praesent elementum facilisis leo vel fringilla est ullamcorper. Arcu
ac tortor dignissim convallis aenean et. Urna nunc id cursus metus.
Justo nec ultrices dui sapien. Egestas diam in arcu cursus. Ligula
ullamcorper malesuada proin libero nunc consequat interdum varius sit.
Faucibus scelerisque eleifend donec pretium. A diam maecenas sed enim
ut sem viverra aliquet eget. Commodo viverra maecenas accumsan lacus
vel. Et leo duis ut diam quam. Tortor condimentum lacinia quis vel
eros donec ac. Enim praesent elementum facilisis leo vel fringilla.
Laoreet non curabitur gravida arcu ac tortor dignissim. Hendrerit
gravida rutrum quisque non tellus orci ac. Aliquet risus feugiat in
ante metus dictum. Feugiat scelerisque varius morbi enim nunc. Nunc
vel risus commodo viverra. Pretium lectus quam id leo. Pellentesque
nec nam aliquam sem et tortor consequat id. Leo vel fringilla est
ullamcorper. Aliquam ut porttitor leo a diam sollicitudin tempor.
Massa tincidunt dui ut ornare lectus. Non sodales neque sodales ut
etiam. Ultricies mi eget mauris pharetra et. In tellus integer feugiat
scelerisque varius morbi enim nunc faucibus. Quam adipiscing vitae
proin sagittis nisl rhoncus mattis rhoncus. Lacus vel facilisis
volutpat est velit egestas dui id ornare. Magna ac placerat vestibulum
lectus. Sit amet massa vitae tortor condimentum lacinia quis. Feugiat
vivamus at augue eget. At ultrices mi tempus imperdiet nulla. Tortor
condimentum lacinia quis vel eros. Morbi leo urna molestie at. Neque
volutpat ac tincidunt vitae semper quis lectus nulla at. Sit amet
justo donec enim diam vulputate ut. Aliquam ultrices sagittis orci a
scelerisque purus semper eget duis. Risus nullam eget felis eget nunc
lobortis. Ultricies lacus sed turpis tincidunt id aliquet. Massa
ultricies mi quis hendrerit. Posuere morbi leo urna molestie. Justo
laoreet sit amet cursus sit amet. Mauris in aliquam sem fringilla ut.
Aenean sed adipiscing diam donec adipiscing tristique risus. Eget
aliquet nibh praesent tristique magna. Mauris pharetra et ultrices
neque ornare aenean euismod elementum nisi. Pellentesque habitant
morbi tristique senectus et netus et malesuada. Ac turpis egestas
maecenas pharetra.
</p>
</div>
</AppShell>
);
}
The navbar on the right side of the page is supposed to stick as you scroll down, but it doesn't. I don't know exactly what's going on here as I just got started using this library today, and some help would be appreciated! My goal is to make the navbar stick to the side of the page. According to the docs, all you have to do is add the fixed prop to the Navbar component, I did that in the code above and it didn't work!
In which browser did the problem occur
Brave
If possible, please include a link to a codesandbox with the reproduced problem
What package has an issue
@mantine/core
Describe the bug
I have this code:
The navbar on the right side of the page is supposed to stick as you scroll down, but it doesn't. I don't know exactly what's going on here as I just got started using this library today, and some help would be appreciated! My goal is to make the navbar stick to the side of the page. According to the docs, all you have to do is add the
fixed
prop to theNavbar
component, I did that in the code above and it didn't work!In which browser did the problem occur
Brave
If possible, please include a link to a codesandbox with the reproduced problem
https://codesandbox.io/s/crazy-leftpad-0gp2tv?file=/src/App.tsx:0-8273
Do you know how to fix the issue
No
Are you willing to participate in fixing this issue and create a pull request with the fix
No
Possible fix
Some problem with the code most likely