From b3126588dc274e41a0a488c52e8f1962f1999510 Mon Sep 17 00:00:00 2001
From: Adam Harvey <adam.harvey@dxc.com>
Date: Fri, 19 Feb 2021 16:02:08 -0500
Subject: [PATCH] Add note about sidebar

---
 plugins/cost-insights/README.md | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/plugins/cost-insights/README.md b/plugins/cost-insights/README.md
index 86adb8673f..4d7ef9701a 100644
--- a/plugins/cost-insights/README.md
+++ b/plugins/cost-insights/README.md
@@ -56,6 +56,38 @@ export const apis = [
 export { plugin as CostInsights } from '@backstage/plugin-cost-insights';
 ```
 
+5. Add Cost Insights to your app Sidebar.
+
+To expose the plugin to your users, you can integrate the `cost-insights` route anyway that suits your application, but most commonly it is added to the Sidebar.
+
+```ts
+// packages/app/src/sidebar.tsx
++ import MoneyIcon from '@material-ui/icons/MonetizationOn';
+
+ ...
+
+ export const AppSidebar = () => (
+   <Sidebar>
+     <SidebarLogo />
+     <SidebarSearch />
+     <SidebarDivider />
+     {/* Global nav, not org-specific */}
+     <SidebarItem icon={HomeIcon} to="./" 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" />
++    <SidebarItem icon={MoneyIcon} to="cost-insights" text="Cost Insights" />
+     {/* End global nav */}
+     <SidebarDivider />
+     <SidebarSpace />
+     <SidebarDivider />
+     <SidebarSettings />
+   </Sidebar>
+ );
+```
+
 ## Configuration
 
 Cost Insights has only two required configuration fields: a map of cloud `products` for showing cost breakdowns and `engineerCost` - the average yearly cost of an engineer including benefits. Products must be defined as keys on the `products` field.