import { useState } from
"react"
;
import
"rsuite/dist/rsuite.min.css"
;
import { Nav, Sidenav } from
"rsuite/"
;
import Home from
"@rsuite/icons/legacy/Home"
import FileCodeO from
"@rsuite/icons/legacy/FileCodeO"
import File from
"@rsuite/icons/legacy/File"
import { Code } from
"@rsuite/icons"
;
export
default
function
App() {
const [expand, setExpand] = useState(
true
);
const [activeKey, setActiveKey] = useState(
"1"
);
return
(
<center>
<div>
<h2>GeeksforGeeks</h2>
<h4 style={{ color:
"green"
}}>
React Suite SideNav Props
</h4>
<div style={{ marginTop: 20, width: 240 }}>
<Sidenav appearance=
"inverse"
expanded={expand}
defaultOpenKeys={[
"3"
,
"4"
]}>
<Sidenav.Body>
<Nav activeKey={activeKey} onSelect={setActiveKey}>
<Nav.Item eventKey=
"1"
icon={<Home />}>
Home
</Nav.Item>
<Nav.Menu placement=
"rightStart"
eventKey=
"3"
title=
"Main Content"
icon={<File />}>
<Nav.Item eventKey=
"3-1"
>Articles</Nav.Item>
<Nav.Item eventKey=
"3-2"
>Courses</Nav.Item>
<Nav.Item eventKey=
"3-3"
>Jobs</Nav.Item>
</Nav.Menu>
<Nav.Menu placement=
"rightStart"
eventKey=
"4"
title=
"Practice"
icon={<Code />}>
<Nav.Item eventKey=
"4-1"
>POTD</Nav.Item>
<Nav.Item eventKey=
"4-2"
>Company problems</Nav.Item>
</Nav.Menu>
<Nav.Menu placement=
"rightStart"
eventKey=
"5"
title=
"Data Structures"
icon={<FileCodeO />}>
<Nav.Item eventKey=
"4-1"
>Arrays</Nav.Item>
<Nav.Item eventKey=
"4-2"
>Linked List</Nav.Item>
<Nav.Item eventKey=
"4-3"
>Stacks</Nav.Item>
</Nav.Menu>
</Nav>
</Sidenav.Body>
<Sidenav.Toggle
expanded={expand}
onToggle={(expanded) => setExpand(expanded)}
/>
</Sidenav>
</div>
</div>
</center>
);
}