[Storybook]: Update TopBar CustomTheme story (#93)

## What does this change?

Use the custom theme as will be used in the newsletters tool
(guardian/newsletters-nx#621) as our custom
theme story, as the example there is a detailed example on how to do
theming

Author: coldlink

src/components/topbar/TopBar.stories.tsx

@@ -140,10 +140,32 @@ export const CustomTheme = {
 		<TopBar
 			theme={{
 				'background-color': baseColors.cyan[200],
+				'border-top': `${semanticSizing.border.default} solid ${semanticColors.border.strong}`,
+				'border-right': `${semanticSizing.border.default} solid ${semanticColors.border.strong}`,
+				'border-bottom': `${semanticSizing.border.default} solid ${semanticColors.border.weak}`,
+				'border-left': `${semanticSizing.border.default} solid ${semanticColors.border.strong}`,
+
+				collapsedNavMenu: {
+					button: {
+						color: semanticColors.text['stronger-inverse'],
+						active: { 'background-color': baseColors.cyan[100] },
+						hovered: { 'background-color': baseColors.cyan[100] },
+					},
+					popover: {
+						'background-color': baseColors.cyan[200],
+					},
+				},
 				ToolName: {
 					color: semanticColors.text['stronger-inverse'],
 				},
 				Navigation: {
+					shared: {
+						_menuOpen: {
+							selected: {
+								'background-color': baseColors.cyan[100],
+							},
+						},
+					},
 					selected: {
 						color: semanticColors.text['stronger-inverse'],
 						'border-bottom': `${semanticSizing.border['extra-wide']} solid ${semanticColors.border['selected-inverse']}`,