import React, { useState } from
'react'
import { TitleBar, Toolbar, ToolbarNav, ToolbarNavItem } from
'react-desktop/macOs'
;
export
default
function
App() {
const [currentSelection, setCurrentSelection] = useState(1)
return
(
<div style={{
display:
'block'
, width: 700, paddingLeft: 30
}}>
<h4>React-Desktop macOS ToolbarNav Component</h4>
<TitleBar>
<Toolbar>
<ToolbarNav>
<ToolbarNavItem
title=
"1st ITEM"
icon={(
<svg x=
"0px"
y=
"0px"
width=
"25px"
height=
"25px"
viewBox=
"0 0 25 25"
>
<circle cx=
"12.5"
cy=
"12.5"
r=
"12.5"
/>
</svg>
)}
selected={currentSelection === 1}
onClick={() => setCurrentSelection({ selected: 1 })}
/>
<ToolbarNavItem
title=
"2nd ITEM"
icon={ (
<svg x=
"0px"
y=
"0px"
width=
"25px"
height=
"23.8px"
viewBox=
"0 0 25 23.8"
>
<polygon points=
"12.5,0 16.4,7.8 25,9.1 18.8,15.2 20.2,23.8
12.5,19.7 4.8,23.8 6.2,15.2 0,9.1 8.6,7.8 "
/>
</svg>
)}
selected={currentSelection === 2}
onClick={() => setCurrentSelection({ selected: 2 })}
/>
</ToolbarNav>
</Toolbar>
</TitleBar>
</div>
);
}