Conceal a Drawer Beneath a Curved Header Using Material UI and Custom CSS Sty

I am facing a challenge with my menu that needs to be concealed behind an arch design.

https://i.sstatic.net/CwdjJ.png

The objective is for the menu to appear hidden behind the black area, while still being visible over the blue arch in the background (although not clearly visible in this image).

My current setup involves using material ui, and the styling for the appBar and arch ('&:after') is defined as follows:

appBar: {
   backgroundColor: '#000',
   transition: theme.transitions.create(['margin', 'width'], {
     easing: theme.transitions.easing.sharp,
     duration: theme.transitions.duration.leavingScreen,
   }),
   alignItems: 'center',
   '&:after': {
     content: '""',
     height: '50px',
     width: '110%',
     background: '#fff',
     borderTopLeftRadius: '50% 40%',
     borderTopRightRadius: '50% 40%',
     backgroundColor: '#00587E',
     boxShadow: 'inset 0 2px 2px #FFFFFF5C',
  },
},

If needed, below is the code snippet pertaining to the menu:

menu: {
   width: drawerWidth,
   flexShrink: 0,
   backgroundColor: '#FFFFFF',
   boxShadow: '0px 3px 6px #FFFAFA61',
},
drawerPaper: {
   top: '48px',
   width: drawerWidth,
   height: 232,
},
drawerHeader: {
   display: 'flex',
   alignItems: 'left',
   ...theme.mixins.toolbar,
   justifyContent: 'flex-start',
},

For further reference, here is the link to the CodeSandBox:

https://codesandbox.io/s/header-with-menu-b6nz5?file=/src/Header/Header.tsx

Any assistance on how to properly hide the menu would be greatly appreciated.

cssreactjsmaterial-ui

Answer №1

To ensure that the overflowing drawer is hidden, you can nest the Drawer component within the blue container (the one with arches). This would require removing the pseudo element on appbar and converting the blue container into a React Element.

Refer to the code comments below for more clarity:

<div className={classes.blueContainer}>
  <Drawer/>
</div>

blueContainer: {
  top: "42px",
  overflow: "hidden", // hide the overflowing drawer
  transform: "scale(1)", // as the drawer has position fixed, this becomes its new containing element
  width: "100%",
  height: "240px", // prevents further overflow of the drawer
  zIndex: 10, // ensure that the blue container has a higher stack context than appbar
  position: "fixed",
  borderTopLeftRadius: "48% 9%",
  borderTopRightRadius: "48% 9%",
  "&:before": {
    // utilize a pseudo element for background due to the blue container's height
    content: '""',
    display: "block",
    boxShadow: "inset 0 2px 2px #FFFFFF5C",
    backgroundColor: "#00587E",
    borderTopLeftRadius: "50% 40%",
    borderTopRightRadius: "50% 40%",
    top: "110px",
    height: "60px"
  }
}

https://codesandbox.io/s/header-with-menu-forked-o9zx0?file=/src/Header/styles.ts:924-940

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Nothingness within a component (React Redux)

Encountering an issue with the state in my component. I am attempting to retrieve the status from my reducer, but the state appears to be empty and returns as undefined Below is my actionCreator export function checkLogin() { return function(dispatch){ ...

javascriptreactjsredux

How can I adjust the brightness, contrast, saturation, and hue in HTML5?

Is there a way to adjust the brightness without turning the image grey? I've been attempting to do so, but only managed to change it to greyscale. My objective is to increase and decrease the brightness of the image. Here is the current code: HTML ...

javascriptcsshtmlcanvas

View a List of Uploaded Documents with Antd

Currently, I am faced with an issue while working on a project involving antd 4. The problem lies within the antd Upload list component. The issue arises when a user uploads documents and then attempts to edit them. Upon editing, the uploaded files do not ...

reactjsantd

Error in TypeScript: Objects can only specify properties that are known, and 'state' is not found in type 'Partial<Path>'

As I strive to pass props through a React Router Link, my goal is to include all the user props. The code below is causing an error, particularly where state: {...employee} is highlighted. Although I am relatively new to TypeScript, I am actively working ...

reactjstypescripttypesreact-router

What steps can I take to fix the problem of Expo Go crashing on my Android device?

For the past 3 days, the Expo Go Android app version 2.28.4 has been crashing every time I try to start it. This issue is preventing me from testing my Expo apps on physical devices, as they work fine on simulators. Even the app that I published on Expo ...

javascriptandroidreactjsreact-nativeexpo

Tips for aligning social media icons above an image on a webpage

Image I am seeking advice on how to position three social media icons on top of each picture, aligned to the left but in line with the image. Below is the code snippet I have been working on: body { background-color: #1a1a1a; } #downloadbutton{ width: ...

htmlcss

The vertical lines separating the buttons are not evenly centered

I need help to center a vertical line between my buttons in the middle of the header. Currently, the line goes up and my disconnect button is not aligned properly. Can you assist me in creating a responsive design? Thank you. https://i.sstatic.net/XIeiQ4E ...

htmlcssangular

How can you automatically show the current time upon entering a page using React Native?

Is there a way to automatically display the current time when a user enters the page? I currently have code that only shows the current time when the TouchableOpacity is pressed, but I want it to update automatically as soon as the user arrives on the Ne ...

javascriptreactjsreact-native

The getServerSideProps function consistently returns an empty object as props

Upon testing the code below, I encountered either a null object or undefined result in the console. import React from 'react' function Main({ data }) { console.log(data); return ( <div></div> ) } export async funct ...

reactjsnext.jsserver-side-rendering

Using React: Is it possible to dynamically set the className using a function instead of hardcoding

I need to dynamically assign a className to a table row based on a specific value. Is there a way to do this for more than two different classNames? <tr className={() => {return this.getTableRowClassName(license.expiresAt)}} key={license ...

reactjs

A software piece producing a JSX element that generates a single function

Is it possible to create a JSX element or component that returns a single function as its child? For instance: interface ComponentChildrenProps { someProp: string; } const Component: React.FC<ComponentProps> = ({ children }): JSX.Element => { ...

reactjstypescript

Issue encountered while utilizing a MUI select component to display the correct element

I'm facing a challenge in a small "learning" project I'm currently working on. Just to give some background, I'm using React with Typescript. The goal is to implement a select element that, upon choosing an option, will display the corresp ...

reactjsselectmaterial-ui

Display the contents of a <div> tag from one HTML file onto another HTML file

Recently I embarked on learning HTML and came across a peculiar doubt. My goal is to create a section div on the first page that changes dynamically based on the menu item clicked, rather than redirecting to another HTML page. I've experimented with s ...

javascriptjqueryhtmlcss

Positioning div at the top of the body section

Presently, I have this specific designhttps://i.sstatic.net/U4IT4.png The issue I am facing is with the alignment of the jumbotron (boostrap v5). It is currently centered, but I would like it to be positioned at the very top of the body. I have experiment ...

htmlcssfrontendbootstrap-5

Issue with React Testing Library not reflecting changes in input field state

Recently delving into RLT, I encountered a strange issue while attempting to write a unit test for an input box. The RTL does not seem to update the state for the input value correctly. Below is the code snippet I used for testing: import { fireEvent, scre ...

reactjsnext.jsjestjsreact-testing-library

Having trouble rendering a model using OBJLoader in React Three Fiber

I'm having issues with rendering an .obj file in my React project using the OBJLoader and useLoader() hook from React Three Fiber. Despite ensuring that my file path is correct and wrapping the Model component in Suspense tags, I am still encountering ...

javascriptreactjsthree.js3dreact-three-fiber

Steps for placing a menu link at the far right edge of the menu

I'm looking to customize my NAVBAR by adding a Donate Link Menu on the right side, next to the search icon. Can anyone help with this simple task? Thank you in advance! Here is the link to the website: www.clihelp.org Below is the menu code for my N ...

htmlcss

How can I align text to the center and set the text color at the same

Looking to place text in the center of a colored box? Although attempting to center the text, you may find that it remains towards the top rather than in the middle of the box. How can you shift the text down so it aligns with the middle of the backgroun ...

htmlcss

The DIV refuses to center-align

I am struggling to center a div element. I have tried using margins (margin: 0 auto) and left/right CSS attributes (left: 50%, right: 50%), but the result is not as expected. Can anyone point out where the problem might be? EDIT: The issue I'm facin ...

htmlcssalignment

Position the content below a Bootstrap row with the columns above being offset

Having trouble aligning content below a row of anchors/divs that require an offset-md-1. The challenge is making sure the content below aligns with the row above, which has the offset and remains responsive. Adjusting margins on paragraphs causes overflow ...

htmlcsstwitter-bootstrapbootstrap-4