import ResponsiveNav from
'@rsuite/responsive-nav'
;
import React, { useState } from
'react'
import Slider from
'@mui/material/Slider'
;
import
'rsuite/dist/rsuite.min.css'
;
import Button from
'@mui/material/Button'
;
const items = [
{ label:
'Item A'
},
{ label:
'Item B'
},
{ label:
'Item C'
},
{ label:
'Item D'
},
{ label:
'Item E'
},
{ label:
'Item F'
},
{ label:
'Item G'
},
{ label:
'Item H'
},
{ label:
'Item I'
},
{ label:
'Item J'
},
{ label:
'Item K'
},
{ label:
'Item L'
},
{ label:
'Item M'
},
{ label:
'Item N'
}
];
export
default
function
App() {
const [width, setWidth] = React.useState(500);
const Increase = (event) => {
setWidth(width + 100)
}
const Decrease = (event) => {
setWidth(width - 100)
}
return
(
<div>
<h1 style={{ color:
'green'
}}>
GeeksforGeeks</h1>
<h3>React Suite Nav Responsive</h3>
<div style={{ width, border:
'1px solid #ddd'
,
padding: 10 }}>
<ResponsiveNav appearance=
"tabs"
>
{items.map(item => (
<ResponsiveNav.Item >
{item.label}
</ResponsiveNav.Item>
))}
</ResponsiveNav>
</div>
<hr />
<button onClick={Increase} style={{
background:
'green'
, color:
'white'
,
padding:
'2%'
}}>
Increase</button>
<button onClick={Decrease} style={{
background:
'red'
, color:
'white'
,
padding:
'2%'
}}>
Decrease</button>
</div>
);
}