mantinedev / mantine

A fully featured React components library
https://mantine.dev
MIT License
26.78k stars 1.9k forks source link

Navbar fixed property not working #882

Closed Squirrelcoding closed 2 years ago

Squirrelcoding commented 2 years ago

What package has an issue

@mantine/core

Describe the bug

I have this code:


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

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

rtivital commented 2 years ago

When using Navbar in AppShell, it is required to set fixed on AppShell, not Navbar – https://codesandbox.io/s/cranky-colden-gqz1oc