@isoftdata/svelte-sidebar

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>