@atlaskit/navigation-system 0.182.0 → 1.0.0

package/examples/constellation/side-nav-items/link-menu-item.tsx

@@ -1,161 +0,0 @@
-import React, { useState } from 'react';
-
-import Button, { IconButton } from '@atlaskit/button/new';
-import AddIcon from '@atlaskit/icon/core/add';
-import HomeIcon from '@atlaskit/icon/core/home';
-import MoreIcon from '@atlaskit/icon/core/show-more-horizontal';
-import Lozenge from '@atlaskit/lozenge';
-import { SideNavContent } from '@atlaskit/navigation-system/layout/side-nav';
-import { ContainerAvatar } from '@atlaskit/navigation-system/side-nav-items/container-avatar';
-import {
-	COLLAPSE_ELEM_BEFORE,
-	LinkMenuItem,
-} from '@atlaskit/navigation-system/side-nav-items/link-menu-item';
-import { MenuList } from '@atlaskit/navigation-system/side-nav-items/menu-list';
-import { Inline } from '@atlaskit/primitives/compiled';
-import { JiraIcon } from '@atlaskit/temp-nav-app-icons/jira';
-
-import MoneyIcon from '../../images/money.svg';
-
-import { MockSideNav } from './common/mock-side-nav';
-
-function AddAction() {
-	return (
-		<IconButton
-			spacing="compact"
-			appearance="subtle"
-			label="Add"
-			icon={(iconProps) => <AddIcon {...iconProps} size="small" />}
-		/>
-	);
-}
-
-function MoreAction() {
-	return (
-		<IconButton
-			spacing="compact"
-			appearance="subtle"
-			label="More"
-			icon={(iconProps) => <MoreIcon {...iconProps} size="small" />}
-		/>
-	);
-}
-
-const linkMenuItemHref = '#example-href';
-
-export function LinkMenuItemExample() {
-	const [showSelectedStateExample, setShowSelectedStateExample] = useState(false);
-	return (
-		<>
-			<Inline space="space.600">
-				<MockSideNav>
-					<SideNavContent>
-						<MenuList>
-							<LinkMenuItem
-								href={linkMenuItemHref}
-								elemBefore={<HomeIcon label="" color="currentColor" spacing="spacious" />}
-							>
-								Link menu item (icon)
-							</LinkMenuItem>
-							<LinkMenuItem
-								href={linkMenuItemHref}
-								elemBefore={<ContainerAvatar src={MoneyIcon} />}
-							>
-								Link menu item (ContainerAvatar)
-							</LinkMenuItem>
-							<LinkMenuItem href={linkMenuItemHref} elemBefore={<JiraIcon label="" />}>
-								Link menu item (app tile)
-							</LinkMenuItem>
-							<LinkMenuItem href={linkMenuItemHref}>Link menu item (spacer)</LinkMenuItem>
-							<LinkMenuItem href={linkMenuItemHref} elemBefore={COLLAPSE_ELEM_BEFORE}>
-								Link menu item (no elemBefore)
-							</LinkMenuItem>
-						</MenuList>
-					</SideNavContent>
-				</MockSideNav>
-
-				<MockSideNav>
-					<SideNavContent>
-						<MenuList>
-							<LinkMenuItem
-								href={linkMenuItemHref}
-								elemBefore={<HomeIcon label="" color="currentColor" spacing="spacious" />}
-								description="With description underneath"
-							>
-								Link menu item
-							</LinkMenuItem>
-							<LinkMenuItem
-								href={linkMenuItemHref}
-								elemBefore={<HomeIcon label="" color="currentColor" spacing="spacious" />}
-								actions={
-									<>
-										<AddAction />
-										<MoreAction />
-									</>
-								}
-							>
-								Link menu item (actions)
-							</LinkMenuItem>
-							<LinkMenuItem
-								href={linkMenuItemHref}
-								elemBefore={<HomeIcon label="" color="currentColor" spacing="spacious" />}
-								actionsOnHover={
-									<>
-										<AddAction />
-										<MoreAction />
-									</>
-								}
-							>
-								Link menu item (actionsOnHover)
-							</LinkMenuItem>
-							<LinkMenuItem
-								href={linkMenuItemHref}
-								elemBefore={<HomeIcon label="" color="currentColor" spacing="spacious" />}
-								actions={<MoreAction />}
-								actionsOnHover={<AddAction />}
-							>
-								Link menu item (actions & actionsOnHover)
-							</LinkMenuItem>
-							<LinkMenuItem
-								href={linkMenuItemHref}
-								elemBefore={<HomeIcon label="" color="currentColor" spacing="spacious" />}
-								elemAfter={<Lozenge>New</Lozenge>}
-							>
-								Link menu item (elemAfter)
-							</LinkMenuItem>
-							<LinkMenuItem
-								href={linkMenuItemHref}
-								elemBefore={<HomeIcon label="" color="currentColor" spacing="spacious" />}
-								elemAfter={<Lozenge>New</Lozenge>}
-								actions={<MoreAction />}
-								actionsOnHover={<AddAction />}
-							>
-								Link menu item (elemAfter, actions & actionsOnHover)
-							</LinkMenuItem>
-						</MenuList>
-					</SideNavContent>
-				</MockSideNav>
-			</Inline>
-			<Button onClick={() => setShowSelectedStateExample(!showSelectedStateExample)}>
-				{showSelectedStateExample ? 'Hide' : 'Show'} selected state example
-			</Button>
-			{showSelectedStateExample && (
-				<MockSideNav>
-					<SideNavContent>
-						<MenuList>
-							<LinkMenuItem
-								href={linkMenuItemHref}
-								elemBefore={<HomeIcon label="" color="currentColor" spacing="spacious" />}
-								isSelected
-							>
-								Link menu item (selected state)
-							</LinkMenuItem>
-						</MenuList>
-					</SideNavContent>
-				</MockSideNav>
-			)}
-		</>
-	);
-}
-
-export default LinkMenuItemExample;

package/examples/constellation/side-nav-items/menu-divider.tsx

@@ -1,114 +0,0 @@
-import React from 'react';
-
-import { IconButton } from '@atlaskit/button/new';
-import Heading from '@atlaskit/heading';
-import AlignTextLeftIcon from '@atlaskit/icon/core/align-text-left';
-import BoardIcon from '@atlaskit/icon/core/board';
-import ClockIcon from '@atlaskit/icon/core/clock';
-import FilterIcon from '@atlaskit/icon/core/filter';
-import SearchIcon from '@atlaskit/icon/core/search';
-import { SideNavContent } from '@atlaskit/navigation-system/layout/side-nav';
-import { ContainerAvatar } from '@atlaskit/navigation-system/side-nav-items/container-avatar';
-import {
-	FlyoutMenuItem,
-	FlyoutMenuItemContent,
-	FlyoutMenuItemTrigger,
-} from '@atlaskit/navigation-system/side-nav-items/flyout-menu-item';
-import { LinkMenuItem } from '@atlaskit/navigation-system/side-nav-items/link-menu-item';
-import { MenuList } from '@atlaskit/navigation-system/side-nav-items/menu-list';
-import {
-	Divider,
-	MenuSection,
-	MenuSectionHeading,
-} from '@atlaskit/navigation-system/side-nav-items/menu-section';
-import { Box, Inline } from '@atlaskit/primitives/compiled';
-import Textfield from '@atlaskit/textfield';
-
-import CDProjectIcon from '../../images/cd.svg';
-
-import { MockSideNav } from './common/mock-side-nav';
-
-const exampleHref = '#example-href';
-
-export const MenuDividerExample = () => (
-	<MockSideNav>
-		<SideNavContent>
-			<MenuList>
-				<FlyoutMenuItem>
-					<FlyoutMenuItemTrigger elemBefore={<ClockIcon label="" color="currentColor" />}>
-						Flyout menu item (icon)
-					</FlyoutMenuItemTrigger>
-					<FlyoutMenuItemContent>
-						<Box paddingInlineStart="space.075" paddingBlock="space.100">
-							<Heading size="xsmall" as="span">
-								Recent
-							</Heading>
-						</Box>
-						<Box paddingInline="space.050" paddingBlock="space.075">
-							<Inline space="space.100">
-								<Textfield
-									isCompact
-									elemBeforeInput={
-										<Box
-											paddingInlineStart="space.075"
-											paddingInlineEnd="space.025"
-											paddingBlockStart="space.025"
-										>
-											<SearchIcon label="" spacing="spacious" color="currentColor" />
-										</Box>
-									}
-									placeholder="Search recent items"
-								/>
-								<IconButton icon={FilterIcon} label="" />
-							</Inline>
-						</Box>
-						<MenuSection>
-							<MenuSectionHeading>This week</MenuSectionHeading>
-							<MenuList>
-								<LinkMenuItem
-									href={exampleHref}
-									elemBefore={<BoardIcon label="" spacing="spacious" color="currentColor" />}
-									description="5 days ago"
-								>
-									My Kanban Project
-								</LinkMenuItem>
-								<LinkMenuItem
-									href={exampleHref}
-									elemBefore={<ContainerAvatar src={CDProjectIcon} />}
-									description="6 days ago"
-								>
-									Business projects
-								</LinkMenuItem>
-							</MenuList>
-						</MenuSection>
-
-						<MenuSection>
-							<MenuSectionHeading>This month</MenuSectionHeading>
-							<MenuList>
-								<LinkMenuItem
-									href={exampleHref}
-									elemBefore={<BoardIcon label="" spacing="spacious" color="currentColor" />}
-									description="5 days ago"
-								>
-									KO Board
-								</LinkMenuItem>
-							</MenuList>
-						</MenuSection>
-
-						<Divider />
-						<MenuList>
-							<LinkMenuItem
-								href={exampleHref}
-								elemBefore={<AlignTextLeftIcon label="" color="currentColor" />}
-							>
-								View all recent items
-							</LinkMenuItem>
-						</MenuList>
-					</FlyoutMenuItemContent>
-				</FlyoutMenuItem>
-			</MenuList>
-		</SideNavContent>
-	</MockSideNav>
-);
-
-export default MenuDividerExample;

package/examples/constellation/side-nav-items/menu-section.tsx

@@ -1,177 +0,0 @@
-import React from 'react';
-
-import { IconButton } from '@atlaskit/button/new';
-import RoadmapsPlanIcon from '@atlaskit/icon-lab/core/roadmaps-plan';
-import AddIcon from '@atlaskit/icon/core/add';
-import AlignTextLeftIcon from '@atlaskit/icon/core/align-text-left';
-import AngleBracketsIcon from '@atlaskit/icon/core/angle-brackets';
-import ChartBarIcon from '@atlaskit/icon/core/chart-bar';
-import InboxIcon from '@atlaskit/icon/core/inbox';
-import MoreIcon from '@atlaskit/icon/core/show-more-horizontal';
-import { SideNavContent } from '@atlaskit/navigation-system/layout/side-nav';
-import { ContainerAvatar } from '@atlaskit/navigation-system/side-nav-items/container-avatar';
-import {
-	ExpandableMenuItem,
-	ExpandableMenuItemContent,
-	ExpandableMenuItemTrigger,
-} from '@atlaskit/navigation-system/side-nav-items/expandable-menu-item';
-import { LinkMenuItem } from '@atlaskit/navigation-system/side-nav-items/link-menu-item';
-import { MenuList } from '@atlaskit/navigation-system/side-nav-items/menu-list';
-import {
-	MenuSection,
-	MenuSectionHeading,
-} from '@atlaskit/navigation-system/side-nav-items/menu-section';
-import { Inline } from '@atlaskit/primitives/compiled';
-
-import CDIcon from '../../images/cd.svg';
-import KoalaIcon from '../../images/koala.svg';
-import MoneyIcon from '../../images/money.svg';
-
-import { MockSideNav } from './common/mock-side-nav';
-
-const exampleHref = '#example-href';
-
-function AddAction() {
-	return (
-		<IconButton
-			spacing="compact"
-			appearance="subtle"
-			label="Add"
-			icon={(iconProps) => <AddIcon {...iconProps} size="small" />}
-		/>
-	);
-}
-
-function MoreAction() {
-	return (
-		<IconButton
-			spacing="compact"
-			appearance="subtle"
-			label="More"
-			icon={(iconProps) => <MoreIcon {...iconProps} size="small" />}
-		/>
-	);
-}
-
-export function MenuSectionExample() {
-	return (
-		<Inline space="space.600">
-			<MockSideNav>
-				<SideNavContent>
-					<MenuList>
-						<ExpandableMenuItem isDefaultExpanded>
-							<ExpandableMenuItemTrigger
-								actions={
-									<>
-										<AddAction />
-										<MoreAction />
-									</>
-								}
-							>
-								Projects
-							</ExpandableMenuItemTrigger>
-							<ExpandableMenuItemContent>
-								<MenuSection isMenuListItem>
-									<MenuSectionHeading>Starred</MenuSectionHeading>
-									<MenuList>
-										<LinkMenuItem href={exampleHref} elemBefore={<ContainerAvatar src={CDIcon} />}>
-											Mobile app
-										</LinkMenuItem>
-										<LinkMenuItem
-											href={exampleHref}
-											elemBefore={<ContainerAvatar src={KoalaIcon} />}
-										>
-											Online store updates
-										</LinkMenuItem>
-										<LinkMenuItem
-											href={exampleHref}
-											elemBefore={<ContainerAvatar src={MoneyIcon} />}
-										>
-											Finance project
-										</LinkMenuItem>
-										<LinkMenuItem
-											href={exampleHref}
-											elemBefore={
-												<AlignTextLeftIcon label="" color="currentColor" spacing="spacious" />
-											}
-										>
-											View all projects
-										</LinkMenuItem>
-									</MenuList>
-								</MenuSection>
-							</ExpandableMenuItemContent>
-						</ExpandableMenuItem>
-
-						<LinkMenuItem
-							href={exampleHref}
-							elemBefore={<RoadmapsPlanIcon label="" color="currentColor" spacing="spacious" />}
-						>
-							Plans
-						</LinkMenuItem>
-
-						<LinkMenuItem
-							href={exampleHref}
-							elemBefore={<AngleBracketsIcon label="" color="currentColor" spacing="spacious" />}
-						>
-							Code
-						</LinkMenuItem>
-					</MenuList>
-				</SideNavContent>
-			</MockSideNav>
-
-			<MockSideNav>
-				<SideNavContent>
-					<MenuList>
-						<ExpandableMenuItem isDefaultExpanded>
-							<ExpandableMenuItemTrigger>Exp default menu item (level 0)</ExpandableMenuItemTrigger>
-							<ExpandableMenuItemContent>
-								<MenuSection isMenuListItem>
-									<MenuSectionHeading>Menus section heading (Level 1)</MenuSectionHeading>
-									<MenuList>
-										<ExpandableMenuItem>
-											<ExpandableMenuItemTrigger elemBefore={<InboxIcon label="" />}>
-												Exp default menu item (level 1)
-											</ExpandableMenuItemTrigger>
-											<ExpandableMenuItemContent>
-												<ExpandableMenuItem>
-													<ExpandableMenuItemTrigger elemBefore={<ChartBarIcon label="" />}>
-														Exp default menu item (level 2)
-													</ExpandableMenuItemTrigger>
-													<ExpandableMenuItemContent>
-														<LinkMenuItem href={exampleHref}>
-															Expandable menu item content
-														</LinkMenuItem>
-													</ExpandableMenuItemContent>
-												</ExpandableMenuItem>
-											</ExpandableMenuItemContent>
-										</ExpandableMenuItem>
-
-										<ExpandableMenuItem isDefaultExpanded>
-											<ExpandableMenuItemTrigger elemBefore={<InboxIcon label="" />}>
-												Exp default menu item (level 1)
-											</ExpandableMenuItemTrigger>
-											<ExpandableMenuItemContent>
-												<ExpandableMenuItem>
-													<ExpandableMenuItemTrigger elemBefore={<ChartBarIcon label="" />}>
-														Exp default menu item (level 2)
-													</ExpandableMenuItemTrigger>
-													<ExpandableMenuItemContent>
-														<LinkMenuItem href={exampleHref}>
-															Expandable menu item content
-														</LinkMenuItem>
-													</ExpandableMenuItemContent>
-												</ExpandableMenuItem>
-											</ExpandableMenuItemContent>
-										</ExpandableMenuItem>
-									</MenuList>
-								</MenuSection>
-							</ExpandableMenuItemContent>
-						</ExpandableMenuItem>
-					</MenuList>
-				</SideNavContent>
-			</MockSideNav>
-		</Inline>
-	);
-}
-
-export default MenuSectionExample;

package/examples/constellation/side-nav-items/right-to-left.tsx

@@ -1,144 +0,0 @@
-import React from 'react';
-
-import { IconButton } from '@atlaskit/button/new';
-import AddIcon from '@atlaskit/icon/core/add';
-import ChartBarIcon from '@atlaskit/icon/core/chart-bar';
-import ClockIcon from '@atlaskit/icon/core/clock';
-import HomeIcon from '@atlaskit/icon/core/home';
-import InboxIcon from '@atlaskit/icon/core/inbox';
-import MoreIcon from '@atlaskit/icon/core/show-more-horizontal';
-import Lozenge from '@atlaskit/lozenge';
-import { SideNavContent } from '@atlaskit/navigation-system/layout/side-nav';
-import {
-	ExpandableMenuItem,
-	ExpandableMenuItemContent,
-	ExpandableMenuItemTrigger,
-} from '@atlaskit/navigation-system/side-nav-items/expandable-menu-item';
-import {
-	FlyoutMenuItem,
-	FlyoutMenuItemTrigger,
-} from '@atlaskit/navigation-system/side-nav-items/flyout-menu-item';
-import { LinkMenuItem } from '@atlaskit/navigation-system/side-nav-items/link-menu-item';
-import { MenuList } from '@atlaskit/navigation-system/side-nav-items/menu-list';
-import {
-	MenuSection,
-	MenuSectionHeading,
-} from '@atlaskit/navigation-system/side-nav-items/menu-section';
-
-import { MockSideNav } from './common/mock-side-nav';
-
-function AddAction() {
-	return (
-		<IconButton
-			spacing="compact"
-			appearance="subtle"
-			label="Add"
-			icon={(iconProps) => <AddIcon {...iconProps} size="small" />}
-		/>
-	);
-}
-
-function MoreAction() {
-	return (
-		<IconButton
-			spacing="compact"
-			appearance="subtle"
-			label="More"
-			icon={(iconProps) => <MoreIcon {...iconProps} size="small" />}
-		/>
-	);
-}
-
-const exampleHref = '#example-href';
-
-export function RightToLeftExample() {
-	return (
-		<div dir="rtl">
-			<MockSideNav>
-				<SideNavContent>
-					<MenuList>
-						<LinkMenuItem
-							href={exampleHref}
-							elemBefore={<HomeIcon label="" color="currentColor" spacing="spacious" />}
-							elemAfter={<Lozenge>New</Lozenge>}
-						>
-							Link menu item (elemAfter)
-						</LinkMenuItem>
-						<LinkMenuItem
-							href={exampleHref}
-							elemBefore={<HomeIcon label="" color="currentColor" spacing="spacious" />}
-							actions={<MoreAction />}
-							actionsOnHover={<AddAction />}
-						>
-							Link menu item (actions & actionsOnHover)
-						</LinkMenuItem>
-
-						<LinkMenuItem
-							href={exampleHref}
-							elemBefore={<HomeIcon label="" color="currentColor" spacing="spacious" />}
-							elemAfter={<Lozenge>New</Lozenge>}
-							actions={<MoreAction />}
-							actionsOnHover={<AddAction />}
-						>
-							Link menu item (elemAfter, actions & actionsOnHover)
-						</LinkMenuItem>
-
-						<ExpandableMenuItem isDefaultExpanded>
-							<ExpandableMenuItemTrigger>Exp default menu item (level 0)</ExpandableMenuItemTrigger>
-							<ExpandableMenuItemContent>
-								<MenuSection isMenuListItem>
-									<MenuSectionHeading>Menus section heading (Level 1)</MenuSectionHeading>
-									<MenuList>
-										<ExpandableMenuItem>
-											<ExpandableMenuItemTrigger elemBefore={<InboxIcon label="" />}>
-												Exp default menu item (level 1)
-											</ExpandableMenuItemTrigger>
-											<ExpandableMenuItemContent>
-												<ExpandableMenuItem>
-													<ExpandableMenuItemTrigger elemBefore={<ChartBarIcon label="" />}>
-														Exp default menu item (level 2)
-													</ExpandableMenuItemTrigger>
-													<ExpandableMenuItemContent>
-														<LinkMenuItem href={exampleHref}>
-															Expandable menu item content
-														</LinkMenuItem>
-													</ExpandableMenuItemContent>
-												</ExpandableMenuItem>
-											</ExpandableMenuItemContent>
-										</ExpandableMenuItem>
-
-										<ExpandableMenuItem isDefaultExpanded>
-											<ExpandableMenuItemTrigger elemBefore={<InboxIcon label="" />}>
-												Exp default menu item (level 1)
-											</ExpandableMenuItemTrigger>
-											<ExpandableMenuItemContent>
-												<ExpandableMenuItem>
-													<ExpandableMenuItemTrigger elemBefore={<ChartBarIcon label="" />}>
-														Exp default menu item (level 2)
-													</ExpandableMenuItemTrigger>
-													<ExpandableMenuItemContent>
-														<LinkMenuItem href={exampleHref}>
-															Expandable menu item content
-														</LinkMenuItem>
-													</ExpandableMenuItemContent>
-												</ExpandableMenuItem>
-											</ExpandableMenuItemContent>
-										</ExpandableMenuItem>
-									</MenuList>
-								</MenuSection>
-							</ExpandableMenuItemContent>
-						</ExpandableMenuItem>
-
-						<FlyoutMenuItem>
-							<FlyoutMenuItemTrigger elemBefore={<ClockIcon label="" color="currentColor" />}>
-								Flyout menu item (icon)
-							</FlyoutMenuItemTrigger>
-						</FlyoutMenuItem>
-					</MenuList>
-				</SideNavContent>
-			</MockSideNav>
-		</div>
-	);
-}
-
-export default RightToLeftExample;

package/examples/constellation/side-nav-items/top-level-spacer.tsx

@@ -1,82 +0,0 @@
-import React from 'react';
-
-import AngleBracketsIcon from '@atlaskit/icon/core/angle-brackets';
-import LinkExternalIcon from '@atlaskit/icon/core/link-external';
-import PagesIcon from '@atlaskit/icon/core/pages';
-import MoreIcon from '@atlaskit/icon/core/show-more-horizontal';
-import Lozenge from '@atlaskit/lozenge';
-import { SideNavContent } from '@atlaskit/navigation-system/layout/side-nav';
-import { ButtonMenuItem } from '@atlaskit/navigation-system/side-nav-items/button-menu-item';
-import { LinkMenuItem } from '@atlaskit/navigation-system/side-nav-items/link-menu-item';
-import { MenuList } from '@atlaskit/navigation-system/side-nav-items/menu-list';
-import { TopLevelSpacer } from '@atlaskit/navigation-system/side-nav-items/top-level-spacer';
-import { ConfluenceIcon } from '@atlaskit/temp-nav-app-icons/confluence';
-import { GoalsIcon } from '@atlaskit/temp-nav-app-icons/goals';
-import { JiraIcon } from '@atlaskit/temp-nav-app-icons/jira';
-import { TeamsIcon } from '@atlaskit/temp-nav-app-icons/teams';
-
-import { MockSideNav } from './common/mock-side-nav';
-
-const exampleHref = '#example-href';
-
-export function TopLevelSpacerExample() {
-	return (
-		<MockSideNav>
-			<SideNavContent>
-				<MenuList>
-					<LinkMenuItem
-						href={exampleHref}
-						elemBefore={<AngleBracketsIcon label="" color="currentColor" spacing="spacious" />}
-					>
-						Code
-					</LinkMenuItem>
-
-					<LinkMenuItem
-						href={exampleHref}
-						elemBefore={<PagesIcon label="" color="currentColor" spacing="spacious" />}
-						elemAfter={<Lozenge>Try</Lozenge>}
-					>
-						Templates
-					</LinkMenuItem>
-
-					<TopLevelSpacer />
-
-					<LinkMenuItem
-						href={exampleHref}
-						elemBefore={<JiraIcon label="" />}
-						elemAfter={<LinkExternalIcon label="" size="small" color="currentColor" />}
-					>
-						Jira
-					</LinkMenuItem>
-					<LinkMenuItem
-						href={exampleHref}
-						elemBefore={<ConfluenceIcon label="" />}
-						elemAfter={<LinkExternalIcon label="" size="small" color="currentColor" />}
-					>
-						Confluence
-					</LinkMenuItem>
-					<LinkMenuItem
-						href={exampleHref}
-						elemBefore={<TeamsIcon label="" />}
-						elemAfter={<LinkExternalIcon label="" size="small" color="currentColor" />}
-					>
-						Goals
-					</LinkMenuItem>
-					<LinkMenuItem
-						href={exampleHref}
-						elemBefore={<GoalsIcon label="" />}
-						elemAfter={<LinkExternalIcon label="" size="small" color="currentColor" />}
-					>
-						Teams
-					</LinkMenuItem>
-
-					<TopLevelSpacer />
-
-					<ButtonMenuItem elemBefore={<MoreIcon label="" />}>More</ButtonMenuItem>
-				</MenuList>
-			</SideNavContent>
-		</MockSideNav>
-	);
-}
-
-export default TopLevelSpacerExample;