React Semantic UI Grid and Div components can be toggled by using a button to decrease

My goal is to create a menu that initially displays with a certain width, but when a button is clicked, it will decrease the width to 50px and only show the icon.

I'm struggling to figure out how to adjust the width of my div and integrate this functionality into a semantic grid layout.

Here is the code snippet:

function Menu() {
  const [open, setOpen] = useState(true); 
  const handleClick = e => {
    e.preventDefault();
    setOpen(!open);
  };
  return (
    <Grid style={{background: '#eee'}}>

    <Grid.Column computer={2} tablet={4} mobile={5} style={{background: '#000', padding:'0', height:'100vh'}}>
    
    <div style={{background:'#000', width:'100%', height:'100%'}}>
        
    </div>
    </Grid.Column>
    <Grid.Column width={14} style={{background: '#eee', padding:'0'}}>
          <Button icon onClick={handleClick}>
            <Icon name="align justify" />
          </Button>
    </Grid.Column>
   </Grid>
  );
}

CSS Styles:

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#root,
.App,
.ui.grid{
  height: 100vh !important;
  margin: 0 !important;
  padding:0 !important;
}

View the live code example here.

cssreactjssemantic-ui

Answer №1

To adjust the width of a div based on the state change triggered by button click, check out this demo link

App.js

import React, { useState } from "react";
import { Grid, Button, Icon } from "semantic-ui-react";
import "./style.css";

function Menu() {
  const [open, setOpen] = useState(true); // setting up a new state variable "open"

  const handleClick = e => {
    e.preventDefault();
    setOpen(!open);
  };

  return (
    <Grid style={{ background: "#eee" }}>
      <Grid.Column
        computer={2}
        tablet={4}
        mobile={5}
        style={{
          background: "#000",
          padding: "0",
          height: "100vh"
        }}
      >
        <div
          style={{
            background: "red",
            width: open ? "100%" : "calc(100% - 50px)",
            height: "100vh"
          }}
        />
      </Grid.Column>
      <Grid.Column
        computer={14}
        tablet={12}
        mobile={11}
        style={{ background: "#eee", padding: "0" }}
      >
        <Button icon onClick={handleClick}>
          <Icon name="align justify" />
        </Button>
      </Grid.Column>
    </Grid>
  );
}
export default Menu;

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

Unable to Control Default Values in MUI's Autocomplete Multiple Input with React Hook Form (TypeError: Cannot read property 'filter' of undefined)

My goal is to utilize the Material-UI Autocomplete as multiple input in conjunction with react-hook-form, dynamically controlling the default values of the Autocomplete (pre-filling the component when editing data based on saved database information). The ...

reactjsautocompletematerial-uireact-hook-form

The concept of a "shouldForwardProp" function within a MUI

const CustomStyledComponent = styled('div', { // Determines which props should be passed on to the DOM element shouldForwardProp: (prop) => prop !== 'color' && prop !== 'variant' && prop !== 'sx ...

reactjsmaterial-uijsx

What is causing the input tag and button tag to appear on separate lines instead of together?

Here is my HTML and CSS code: <!DOCTYPE html> <html> <head> <title>assignment1</title> <meta charset="utf-8"> <meta name = "description" content="assignment"> <meta name = "keywords" content="php, assignm ...

htmlcss

Unique property in css without a specified value

I have a challenge in creating a custom CSS property to disable an element without using the disabled keyword. This is the code I came up with, but unfortunately, it did not achieve the desired result: <style> .admin { color: green; enable: ...

css

Facing issues with ReactCSSTransitionGroup as transitionAppear feature is not functioning

I'm having trouble with the appearance and disappearance of notifications. The transitionAppear property doesn't seem to be working as expected. I'm adding the notification popup item to the onBlur event. The animation for the leave event wo ...

javascriptreactjsanimationjsxreactcsstransitiongroup

Troubleshooting Strategies for Resolving Expand/Collapse Issues and Drawer Opening in React JS with MUI

I'm facing two issues with the code that I'm struggling to resolve. The first problem revolves around the sidebar menu. It opens successfully but fails to close. Ideally, it should close either by clicking outside or on a link. While passing val ...

reactjsmaterial-uitsx

Changing states in next.js is not accomplished by using setState

Struggling to update the page number using setCurrentPage(page) - clicking the button doesn't trigger any state change. Tried various methods without success. Manually modified the number in useState(1) and confirmed that the page did switch. import ...

javascriptreactjsnext.js

What is the method for accessing extra parameters in the signIn() callback function in [...nextauth]?

As per the Next Auth documentation, it is possible to pass extra parameters to the /authorize endpoint using the third argument of signIn(). The examples provided are: signIn("identity-server4", null, { prompt: "login" }) // always ask ...

javascriptreactjsnext.jsjwtnext-auth

Adjusting the width of MuiInputBase-root: a step-by-step guide

I'm currently working on customizing a text input field, but I'm facing an issue with adjusting its width. Specifically, I need to modify the width of the class "MuiInputBase-root MuiInput-root MuiInputBase formControl MuiInput-formControl" as it ...

reactjsmaterial-ui

Designing php/mysql data in a container

After successfully converting an ordered list output into a div output, I now face the challenge of stacking arrays on top of each other (and side by side with the two divs) like they would in an ordered list. Here is the original code snippet: <?php ...

phphtmlcssarrays

Creating a stunning HTML 5 panorama with GigaPixel resolution

Interested in creating a gigapixel panorama using HTML 5 and Javascript. I found inspiration from this example - Seeking advice on where to begin or any useful APIs to explore. Appreciate the help! ...

javascriptjqueryhtmlcss

The positioning of the parent element shifts as a result of the CSS

What causes a vertical position change in buttons with content floated left or right? Take this example http://jsfiddle.net/8ff6dhou/ <button>aaa</button> <button><div style="float:left">bbb</div></button> <button> ...

css

Arrays passed as query parameters to Next.js router.query may result in the value being

When trying to pass objects from an array to another page using router.query, individual objects like router.query.title work as expected. However, when attempting to pass arrays such as router.query.reviews, it returns something like reviews: ['&apos ...

javascriptreactjsnext.js

Allowing domain access when using axios and express

I have a server.js file where I use Express and run it with node: const express = require("express"); const app = express(), DEFAULT_PORT = 5000 app.set("port", process.env.PORT || DEFAULT_PORT); app.get("/whatever", function (req, r ...

javascriptnode.jsreactjsexpress

What steps can be taken to resolve the link prefetch warning in a Next.js application?

I am currently working on a Next.js application using version 13.4, and I've encountered a warning in the console: After preloading the resource at <URL>, it was not used within a few seconds of the window's load event. Please ensure that i ...

cssreactjsgoogle-chromenext.js

The size of the search input and textarea in HTML decreases when viewed on an iPad device

Currently utilizing Bootstrap 3 and AngularJs for this project. Implementing the following markup for the input field with type 'search': <input type="search" class="form-control" id='roomSearch' placeholder="Search" ng-model=&apo ...

htmlcssangularjstwitter-bootstrap

Issue with jQuery dropdown navigation bar

I am interested in creating a drop-down menu using jquery (here's the corresponding jsFiddle). HTML: <ul id="mainmenu"> <li><a href="http://myszki/">Aktualności</a></li> <li class="parent item13"><a href=" ...

jquerycss

The WebsocketServer.js in my React project is throwing a SyntaxError when it comes to

I have set up a React project using webpack-dev-server, and here is the content of my package.json file: { "name": "testproject", "version": "1.0.0", "description": "", "main": & ...

reactjs

Prevent horizontal scrolling on mobile devices

To prevent vertical scrolling on mobile devices, I attempted using the CSS code: body {overflow-x:hidden} This successfully disables vertical scrolling in regular browsers. However, if there is an element wider than the screen on mobile, it still allows ...

jqueryhtmlcss

Refresh the react-table when an event occurs

I'm utilizing React and the react-table framework to display and list my data respectively. One issue I am facing is that after creating a new object in my database, I have trouble refreshing the table without navigating away from the view. My query ...

node.jsreactjsreact-table