search

Tarekun / optimus-bo-ui

React UI library developed and used at Optimus, Bologna, Italy
0 stars 0 forks source link

Navbar transparent look #14

Closed Tarekun closed 5 months ago

Tarekun commented 5 months ago

I want to support navbars that can be configured to be transparent instead of a solid color. Other than just be transparent i'd like them to make the conent underneath blurry, so not only tweaking the alpha of the rgb. Example provided by ChatGPT:

function NavBar() {
  return (
    <AppBar position="fixed" sx={{
      backgroundColor: 'rgba(255, 255, 255, 0.8)', // Adjust color and transparency
      backdropFilter: 'blur(10px)', // Adjust blur intensity
      boxShadow: 'none' // Optional: remove shadow for a flatter appearance
    }}>
      <Toolbar>
        <Typography variant="h6">
          My Website
        </Typography>
        {/* Other navbar items */}
      </Toolbar>
    </AppBar>
  );
}

AC