const { route, ...passProps } = props; const Container = styled.div` display: flex; height: 100vh; `; const Sidebar = styled.div` width: 64px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 20px 0; border: 2px outset #333; background-color: #f5f5f5; `; const ButtonGroup = styled.div` display: flex; flex-direction: column; align-items: center; gap: 8px; `; const Button = styled.button` width: 48px; height: 48px; border: 2px outset #333; background-color: #f5f5f5; cursor: pointer; color: #333; text-decoration: none; &:active { border-style: inset; background-color: #d5d5d5; color: #000; } &:hover { background-color: #e5e5e5; color: #111; } `; const Content = styled.div` width: 100%; height: 100%; overflow: scroll; `; const defaultRoute = "efiz.near/widget/Things.index"; const [selectedItem, setSelectedItem] = useState(route || defaultRoute); const handleItemClick = (item) => { setSelectedItem(item); }; const routes = [ { path: "efiz.near/widget/Tree", icon: "bi bi-house", }, { path: "efiz.near/widget/Things.index", icon: "bi bi-globe", }, { path: "chaotictempest.near/widget/Search", icon: "bi bi-search", }, { path: "create.near/widget/home", icon: "bi bi-hammer", }, { path: "itexpert120-contra.near/widget/Events", icon: "bi bi-calendar", }, { path: "mob.near/widget/N", icon: "bi bi-people", }, { path: "hack.near/widget/Map.tutorial", icon: "bi bi-map", }, { path: "mintbase.near/widget/nft-marketplace", icon: "bi bi-cart", }, { path: "devs.near/widget/Module.Feed.demo", icon: "bi bi-boxes", }, { path: "efiz.near/widget/voyager.index", icon: "bi bi-rocket", }, { path: "efiz.near/widget/App.index", icon: "bi bi-camera-video", }, { path: "hyperfiles.near/widget/app", icon: "bi bi-files", }, ]; return ( <Container> <Sidebar> <ButtonGroup> {routes.map((route) => ( <Button onClick={() => handleItemClick(route.path)}> <i className={route.icon}></i> </Button> ))} </ButtonGroup> <ButtonGroup> <Button onClick={() => handleItemClick(`mob.near/widget/WidgetSource?src=${selectedItem}`) } > <i className={"bi bi-code"}></i> </Button> <Button onClick={() => handleItemClick("mob.near/widget/NotificationFeed")} > <i className={"bi bi-bell"}></i> </Button> <Widget src={"mob.near/widget/ProfileImage"} props={{ accountId: account.accountId, className: "d-inline-block", imageClassName: "rounded-circle w-100 h-100", style: { width: "42px", height: "42px" }, }} /> </ButtonGroup> </Sidebar> <Content> <Widget src={selectedItem} props={passProps} /> </Content> </Container> );