Implementing a Dynamic Sidebar in React

I'm trying to create a unique file separator styled menu in react, but my CSS skills are limited. I've come across several similar menu components, but they all take up the entire page.

The challenging part for me is designing the shape of the component. It's not just a simple rectangle - there's a button involved that complicates things. I'm unsure how to handle that aspect.

Here is an example of what I'm aiming for:

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

When the user clicks on "Filter Menu", it should smoothly slide into view:

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

javascripthtmlcssreactjs

Answer №1

Here is a way you can do it:

.menu-container {
  display: inline-block;
  position: fixed;
  top: 30%;
  left: 0;
}
.menu-body {
  display: inline-block;
  height: 200px;
  width: 100px;
  border: 1px solid black;
}
.activate-button {
  display: inline-block;
  height: 50px;
  width: 20px;
  border: 1px solid black;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
  vertical-align: top;
}
<div>
  <div class="menu-container">
    <div class="menu-body">
      
    </div>
    <div class="activate-button">
      
    </div>
  </div>
<div>

Answer №2

This question pertains specifically to CSS and HTML solutions alone. If starting from scratch, consider the following approaches:

  • Create a two-column table with the button in the second column

Alternatively,

  • Utilize Div containers and customize their styles accordingly

Additionally, It is common practice to utilize frameworks like bootstrap or ant.design for more efficient development. These frameworks offer pre-built table components that include features such as filtering (especially with ant.design) and can incorporate other components like modals for filter selection popups.

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

Is it possible to substitute a one-line jQuery.load() with a fetch() function that achieves the same result?

I am currently working on a page where I utilize a single line of jQuery code: $('#id').load('/url'); This line allows me to load a fragment into a specific place in the DOM. However, I am now considering reducing my reliance on jQuer ...

javascriptjqueryajaxfetchone-liner

Please ensure that the table is empty before reloading data into it

I am facing an issue while binding data from the database. The data is being bound every 5 seconds, however, it does not clear the previous data and keeps accumulating. Instead of displaying just 3 rows when there are 3 in the database, it adds 3 rows ev ...

javascriptasp.netajaxdatatables

Leveraging the replace feature within Selenium IDE

After extracting information from a webpage, I found a string that read "price: $30.00" which I saved as "x." What I really needed was just the numbers - "30.00". I attempted to use x.replace(), but unfortunately it didn't work out. If anyone could as ...

javascriptselenium-webdriver

The arrangement of <source> tags within the <audio> element can cause issues with browser compatibility

I'm having a slight issue with the audio files on my webpage. I've set up both MP3 and Ogg Vorbis files using FFmpeg to ensure compatibility with modern browsers. However, I've noticed that Safari only plays the audio when the MP3 file is li ...

htmlaudio

Telegram: verification key mismatch detected

I am currently facing an issue with implementing a Telegram PHP example using JavaScript. The hashes do not match, even after running the example's php code which also resulted in failure with identical hashes. I have tried adjusting my bot settings b ...

javascriptnode.jsauthorizationtelegram

Struggling with a problem while trying to open MUI Controlled Accordions in a loop

Seeking assistance with synchronizing two sets of accordion lists. When one accordion in set 1 is opened, I want the corresponding accordion in set 2 to open automatically and vice versa. The state is already being maintained to keep the accordions open by ...

reactjsmaterial-ui

Generate a dynamic text-box and drop-down list using HTML and JavaScript

My current project involves generating dynamic text-boxes based on the selection from a drop-down list and input field. https://i.sstatic.net/CMtW9.png When a user chooses 'Option 1' from the drop-down list and enters input such as 'grass& ...

javascripthtmlvue.js

React will not adjust the height of the main component when the length of the child component changes

Having an issue with the height of my website. Although my component has height: 100vh; defined, there is a scenario where the child component extends beyond the viewport but the height remains unchanged, causing the component to fall below the white back ...

reactjsmaterial-ui

Separate a single large table into two smaller tables based on the information found in the third column of every row

Looking for a Greasemonkey script that can split a single table on a page into two separate tables based on a specific column. For example, if we have the following table: <table> <tr> <td>Jill</td> <td>Smith</td ...

javascriptjqueryhtmlhtml-tablegreasemonkey

Change the color of an HTML input box dynamically in JavaScript if the inserted value falls within a specified range

Hi there, I'm currently facing a challenge where I need to verify if the value entered by the user into an input box on my PHP page falls within a specific range. If the value is not within this range, I want to either change the text color in the inp ...

javascriptphpvariablesrange

Retrieve JSON data for the initial request and showcase it on the homepage

After recently diving into Vue.js for the first time, I encountered a need to serialize Django objects. views.py def articles(request): model = News.objects.all() # obtaining a list of News objects modelSerialize = serializers.serial ...

javascriptpythondjangovue.js

Differences between Next.js Image and regular img tag regarding image quality

I am currently using Next.js and have noticed that my images appear slightly blurry when utilizing Next/Image. Below is a snippet of my code: <img src={url} width={articleWidth} /> <Image className="text-center" src={url} ...

htmlcssimagenext.js

The console is not displaying the data from the useForm

I am working on a project to create a Gmail clone. I have implemented the useForm library for data validation. However, when I input data into the form and try to print it to the console, nothing is being displayed. const onSubmit = (data) => { ...

javascripthtmlcssreactjsredux

Issues with setting headers after they have been sent - Can you explain why?

How am I setting a header after it has been sent to the client? Here is the code snippet: When a form is submitted, a post ajax request is triggered which returns a JSON object to the client. I have commented out most of the code to troubleshoot, and cur ...

javascriptnode.jshttpexpressfetch

What is the best approach to get a successful response from an asynchronous method in Express?

Still grappling with the concept of Node's non-blocking nature. The code below executes as expected, but I'm curious if there's a more efficient way to achieve the same result. The route is taking 3 parameters (zipcode, type, rad) and using ...

javascriptnode.jsexpressasync-await

When a form is submitted in JQuery, it creates a fresh form on the

My current setup involves a JQuery script that sends user input to a PHP script within the same file. The PHP script processes this input and displays the results successfully. However, I have encountered a peculiar issue where upon submission, the JQuery ...

javascriptphpjqueryformsuser-input

Utilize jQuery script to add CSS styling to an AngularJS expression

I'm experiencing some confusion with a jQuery script I have. It is designed to change the text color to red if it detects a negative number in an HTML table. console.log("reading Script"); $('td:nth-child(3)').each(function() { ...

javascriptjqueryangularjs

Issue with implementing custom fonts using @font-face

I've added custom @font-face styling to my CSS using a downloaded font, but it doesn't seem to be working. Below is my CSS code: @font-face { font-family: "Quicksand"; src: url("fonts/Quicksand/Quicksand-Light.otf") format("opentype"); } The f ...

htmlcssfont-face

Storing table rows in an array using Javascript

I've encountered a situation where I have a PHP script generating a string of table rows that is then returned via an AJAX request. This generated string consists of all the content enclosed within the tbody tags (<tr>1</tr><tr>2< ...

javascriptphpjqueryajax

What is the correct way to integrate material-ui into a project?

Adding material-ui to my React project has been a challenge for me. After executing the command npm install material-ui -S, I attempted to implement an example from the documentation. <div> <RaisedButton onClick={this.handleTouchT ...

reactjsmaterial-ui