SideMenu

The SideMenu component is used to group navigation items together in a left drawer. It is typically used in a header, with its internal content defined by the children of the component.

Component

Storybook

Storybook - Side Menu Documentation

Figma Demo

Guidelines

Variations

The side menu has a consistent layout across breakpoints with some specific size and content exceptions:

  • Max, Desktop, and Tablet Breakpoints: The side menu has a fixed width of 384px. It contains a link to the user profile, a set of MenuLinks, and the Provi admin button where applicable.
  • Mobile Breakpoint: The main category navigation appears in the side menu in a section below the profile area (since the category navigation disappears from the header at smaller screen sizes). At this breakpoint, the side menu will fill the full width of the screen, including margins.

Component Specs

API

  • clickOutsideCallback: () => void | Default: undefined
    Function to be called when the drawer is clicked outside.

  • closeBtnClick: () => void | Default: undefined
    Function to be called when the close button is clicked.

  • hidden: boolean | Default: true
    Whether the drawer is hidden or not.

  • id: string | Default: 'side-menu-left-nav'
    Id for the component.

  • triggerClick: () => void | Default: undefined
    Function to be called when the trigger is clicked.

  • testId: string | Default: undefined
    Test id for the component.

Example

<script>
	import { SideMenu } from '@getprovi/craft-svelte';
</script>

<SideMenu bind:hidden id="custom-id" testId="test-side-menu-drawer" triggerClick="{()" ="">
	console.log('track open click')} clickOutsideCallback={() => console.log('track outside close
	click')} closeBtnClick={() => console.log('clicked close button')} >
	<slot />
</SideMenu>

Types

interface Props extends ComponentProps<Drawer> {}