I'm looking to develop a simple note-taking app, but I'm struggling to figure out how to place a burger menu on the right side of a flexbox. Below are my JS and CSS files:
JavaScript / HTML
<div className={styles.wrapper}>
<main className={styles.content}>
<div className={styles.templatelist}>
<div className={styles.template}>
<h2>Daily Meeting Minutes</h2>
<div className={styles.properties}>
<p>Sections: 5</p>
<p>Questions: 5</p>
<p>Tables: 5</p>
</div>
</div>
</div>
</main>
</div>
I've attempted to create a new div and position it using top and left properties, but I haven't been successful.
CSS
.wrapper {
display: flex;
margin-top: 2rem;
}
.content {
display: flex;
flex-direction: column;
margin: auto;
width: 50%;
height: 100%;
}
.templatelist {
margin-top: 2rem;
display: flex;
flex-direction: column;
}
.template {
width: 100%;
height: 6rem;
border-radius: 1rem;
padding: 1rem;
background: rgba(255, 255, 255, 0);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(13.3px);
-webkit-backdrop-filter: blur(13.3px);
border: 1px solid rgba(255,153,0, .5);
}
.properties {
display: flex;
flex-direction: row;
margin-top: 1rem;
gap: 2rem;
}