Svelte Sidebar

Install

pnpm i @isoftdata/svelte-sidebar

Breaking changes

2.0.0

• Require Svelte 5
• Slots -> Snippets
• Events -> Callbacks
• Consolidate logoImageUrl and collapsedLogoImageUrl props into a single logo prop.

Props

| Name | Type | Description | Default Value | |------|------|-------------|---------------| | items | SidebarItemType[] | Array of sidebar items | [] | | recentActivity | Activity[] | Array of recent activities | [] | | configurationItem | Omit<SidebarItemType, 'type'> \| undefined | Configuration item, excluding 'type' | undefined | | contactUsItem | Omit<SidebarItemType, 'type'> \| undefined | Contact Us item, excluding 'type' | undefined | | userAccountItem | UserAccountSidebarItem \| undefined | User account item | undefined | | alwaysShowCategoryHeading | boolean | Flag to always show category heading | false | | signOutText | string | Text for the sign out option | 'Sign Out' | | expanded | boolean | Flag to expand or collapse the sidebar | true | | expandedText | string | Text for the expanded sidebar | 'Expand Sidebar' | | collapseSidebarText | string | Text for the collapsed sidebar | 'Collapse Sidebar' | | avatarImgClass | string | CSS class for the avatar image | '' | | activeState | Object | Object containing the active route and its parameters | { route: string, parameters: Record<string, string or undefined> } | | buildRoute | BuildRouteFn | Function to build the route | | | logo | Logo | The logo(s) to display above the sidebar. Can either be a string for a single logo, or an object containing multiple logos to show conditionally. | undefined |

Logo Type

The logo type lets you specify separate logos for when the sidebar is collapsed or expanded, including separate logos for dark/light mode. Or you can just specify one logo URL as a string.

type Logo = string | {
		collapsed: string
		expanded: string
		dark?: {
			collapsed: string
			expanded: string
		}
	}

Snippets

• default - Essentially the remaining horizontal viewport space to the right of the sidebar. This is where the main views for your app will appear.
• header - Full width horizontal bar shown at the very top of the page.
• top - Just above the list of sidebar items, immediately following the logo image.

Callbacks

• logout - Fired when the logout button is clicked.

Example

<script lang="ts">
	import Sidebar from '@isoftdata/svelte-sidebar'

	let sidebarExpanded: boolean
</script>

<Sidebar
	{activeState}
	buildRoute={asr.makePath}
	items={states}
	logo="./images/presage_white.svg"
	configurationItem={{ name: i18next.t('sidebar.configuration', 'Configuration'), icon: 'gear', route: 'app.configuration', parameters: {} }}
	userAccountItem={{
		route: 'app.configuration.user',
		parameters: {},
		userName: $session.userName,
		email: $session.user.workEmail,
		firstName: $session.user.firstName,
		lastName: $session.user.lastName,
	}}
	bind:expanded={sidebarExpanded}
	recentActivity={[]}
	logout={() => asr.go('login')}
>
	<uiView
		id="main-app"
		role="main"
		class="pl-0 pr-0"
	/>
</Sidebar>