const { page, ...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; min-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 routes = { home: { path: "hack.near/widget/dev.social", icon: "bi bi-house", }, discover: { path: "efiz.near/widget/Things.index", icon: "bi bi-globe", }, tree: { path: "efiz.near/widget/Tree", icon: "bi bi-tree", }, search: { path: "chaotictempest.near/widget/Search", icon: "bi bi-search", }, create: { path: "create.near/widget/home", icon: "bi bi-plus-circle", }, events: { path: "itexpert120-contra.near/widget/Events", icon: "bi bi-calendar", }, edit: { path: "every.near/widget/editor", icon: "bi bi-pencil", }, hashtag: { path: "efiz.near/widget/every.hashtag", icon: "bi bi-hash", }, social: { path: "mob.near/widget/N", icon: "bi bi-people", }, map: { path: "hack.near/widget/Map.tutorial", icon: "bi bi-map", }, marketplace: { path: "mintbase.near/widget/nft-marketplace", icon: "bi bi-cart", }, blocks: { path: "devs.near/widget/Module.Feed.demo", icon: "bi bi-boxes", }, voyager: { path: "efiz.near/widget/voyager.index", icon: "bi bi-rocket", }, video: { path: "efiz.near/widget/App.index", icon: "bi bi-camera-video", }, files: { path: "hyperfiles.near/widget/app", icon: "bi bi-files", }, graph: { path: "efiz.near/widget/SocialGraph", icon: "bi bi-stars", }, plugins: { path: "embeds.near/widget/Plugin.Index", icon: "bi bi-plug", }, build: { path: "buildhub.near/widget/Feed", icon: "bi bi-hammer", }, }; const defaultRoute = routes["home"]; const [activeRoute, setActiveRoute] = useState(routes[page] ?? defaultRoute); const handleItemClick = (item) => { setActiveRoute(item); }; return ( <Container> <Sidebar> <ButtonGroup style={{ maxHeight: "calc(100% - 50px)", overflow: "scroll" }} > {(Object.keys(routes) || []).map((k) => { const route = routes[k]; return ( <Button key={k} onClick={() => handleItemClick(route)}> <i className={route.icon}></i> </Button> ); })} </ButtonGroup> <ButtonGroup style={{ marginTop: "8px" }}> <Button onClick={() => handleItemClick({ path: "mob.near/widget/WidgetSource", props: { src: activeRoute.path }, }) } > <i className={"bi bi-code"}></i> </Button> <Button onClick={() => handleItemClick({ path: "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="every.near/widget/thing" props={{ path: activeRoute.path, ...(passProps || {}), // do we want to do this? ...(activeRoute.props || {}), }} /> </Content> </Container> );