mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs(UIShell): add example for persisted hamburger menu

Browse source
This commit is contained in:
josefaidt 2020-11-18 08:53:55 -06:00
commit a417cee481
3 changed files with 71 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

6
docs/src/pages/components/UIShell.svx
View file

@ -36,4 +36,8 @@ components: ["Header",
### Header with utilities
<FileSource src="/framed/UIShell/HeaderUtilities" />
<FileSource src="/framed/UIShell/HeaderUtilities" />
### Header with persisted hamburger menu
<FileSource src="/framed/UIShell/PersistedHamburgerMenu" />

7
docs/src/pages/framed/UIShell/HeaderNav.svelte
View file

@ -19,12 +19,7 @@
let isSideNavOpen = false;
</script>
<Header
persistentHamburgerMenu="{true}"
company="IBM"
platformName="Carbon Svelte"
bind:isSideNavOpen
>
<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
<div slot="skip-to-content">
<SkipToContent />
</div>

65
docs/src/pages/framed/UIShell/PersistedHamburgerMenu.svelte Normal file
View file

@ -0,0 +1,65 @@
<script>
import {
Header,
HeaderNav,
HeaderNavItem,
HeaderNavMenu,
SideNav,
SideNavItems,
SideNavMenu,
SideNavMenuItem,
SideNavLink,
SkipToContent,
Content,
Grid,
Row,
Column,
} from "carbon-components-svelte";
let isSideNavOpen = false;
</script>
<Header
persistentHamburgerMenu="{true}"
company="IBM"
platformName="Carbon Svelte"
bind:isSideNavOpen
>
<div slot="skip-to-content">
<SkipToContent />
</div>
<HeaderNav>
<HeaderNavItem href="/" text="Link 1" />
<HeaderNavItem href="/" text="Link 2" />
<HeaderNavItem href="/" text="Link 3" />
<HeaderNavMenu text="Menu">
<HeaderNavItem href="/" text="Link 1" />
<HeaderNavItem href="/" text="Link 2" />
<HeaderNavItem href="/" text="Link 3" />
</HeaderNavMenu>
</HeaderNav>
</Header>
<SideNav bind:isOpen="{isSideNavOpen}">
<SideNavItems>
<SideNavLink text="Link 1" />
<SideNavLink text="Link 2" />
<SideNavLink text="Link 3" />
<SideNavMenu text="Menu">
<SideNavMenuItem href="/" text="Link 1" />
<SideNavMenuItem href="/" text="Link 2" />
<SideNavMenuItem href="/" text="Link 3" />
</SideNavMenu>
</SideNavItems>
</SideNav>
<Content>
<Grid>
<Row>
<Column>
<h1>Welcome</h1>
</Column>
</Row>
</Grid>
</Content>