import React , { useContext , PropsWithChildren } from 'react' ; import { Link , makeStyles } from '@material-ui/core' ; import HomeIcon from '@material-ui/icons/Home' ; import ExtensionIcon from '@material-ui/icons/Extension' ; import MapIcon from '@material-ui/icons/MyLocation' ; import LibraryBooks from '@material-ui/icons/LibraryBooks' ; import CreateComponentIcon from '@material-ui/icons/AddCircleOutline' ; import LogoFull from './LogoFull' ; import LogoIcon from './LogoIcon' ; import { Sidebar , SidebarPage , sidebarConfig , SidebarContext , SidebarItem , SidebarDivider , SidebarSpace , } from '@backstage/core-components' ; import { NavLink } from 'react-router-dom' ; import { Settings as SidebarSettings } from '@backstage/plugin-user-settings' ; import { SidebarSearch } from '@backstage/plugin-search' ; const useSidebarLogoStyles = makeStyles ( { root : { width : sidebarConfig . drawerWidthClosed , height : 3 * sidebarConfig . logoHeight , display : 'flex' , flexFlow : 'row nowrap' , alignItems : 'center' , marginBottom : - 14 , } , link : { width : sidebarConfig . drawerWidthClosed , marginLeft : 24 , } , } ) ; const SidebarLogo = ( ) => { const classes = useSidebarLogoStyles ( ) ; const { isOpen } = useContext ( SidebarContext ) ; return ( < div className = { classes . root } > < Link component = { NavLink } to = "/" underline = "none" className = { classes . link } > { isOpen ? < LogoFull / > : < LogoIcon />} < /Link> < /div>); } ; export const Root = ( { children } ) => ( < SidebarPage > < Sidebar > < SidebarLogo /> < SidebarSearch / > < SidebarDivider /> { } < SidebarItem icon = { HomeIcon } to = "/catalog" text = "Home" / > < SidebarItem icon = { ExtensionIcon } to = "api-docs" text = "APIs" / > < SidebarItem icon = { LibraryBooks } to = "docs" text = "Docs" / > < SidebarItem icon = { CreateComponentIcon } to = "create" text = "Create..." / > { } < SidebarDivider / > < SidebarItem icon = { MapIcon } to = "tech-radar" text = "Tech Radar" / > < SidebarSpace /> < SidebarDivider / > < SidebarSettings /> < /Sidebar> { children } < /SidebarPage>);