feat: allow to disable transition of link groups

README.md

@@ -82,6 +82,8 @@ const props = {...}
 | `onLinkClick` | no | `null` | Function that is executed when the user selects a navigation link. Prevents the regular navigation event. Therefore useful in applications with client side routing. | function receiving the event | `(event) => alert(event.target.href)` |
 | `theme` | no | see `defaultTheme` in `src/components/`<wbr>`Sidebar/`<wbr>`Sidebar.svelte` | Allows to customize the most important styles. | object, as described below | `{ backgroundColor_nav: '###ccc' }` |
 | `open` | no | true | Allows to customize whether the navigation sidebar is open or horizontally minimized. | boolean | `true`. To collapse the sidebar by default on smaller viewports, the result of an expression like `window.innerWidth < 720px` could be passed. |
+| `transitionEnabled` | no | `true` | Whether the route's content will transition in when being displayed. The default is `true`. `False` is less playful, and always used when `prefers-reduced-motion` is enabled. | `boolean` |
+
 
 [The playground](https://sidebar.schneiders.space) allows to play around with every property. It shows the sidebar on the left, and the component usage on the right. It's therefore the quickest way to find out how to use the component, and to see whether it covers your needs.
 
@@ -105,7 +107,7 @@ Following the description of a route object's attributes:
 | -------------- | -------- | -------- | ----------- | ---------- |
 | ´name´ | yes | - | The name under which the navigation link will be shown in the navigation hierarchy | `string` |
 | ´route´ | yes | - | The navigation links' URL | `string` |
-| `disabled` | no | `false` | Whether the link can be opened by the user. The default is `false`. `True` can make sense, e.g. if the user is not authorized to access a part of the application. If the route has child routes, the navigation link group can not be uncollapsed by the user. | `boolean` |
+| `disabled` | no | `false` | Whether the link is selectable by the user. The default is `false`. `True` can make sense, e.g. if the user is not authorized to access a part of the application. If the route has child routes, the navigation link group can not be uncollapsed by the user. | `boolean` |
 | `collapseTree` | no | `false` | Allows to customize whether child routes are shown or vertically collapsed by default. | boolean |
 | `childRoutes` | no | `[]` | An array of more route objects. As every route object can have child routes, there's theoretically no limit to the depth of the navigation hierarchy. | `array` |
 

src/components/Sidebar/NavigationLinkGroup.svelte

@@ -1,7 +1,7 @@
 <script>
 	import { createEventDispatcher, onDestroy } from 'svelte'
 	import { scale } from 'svelte/transition'
-	import { activeUrl } from './SidebarStore'
+	import { activeUrl, transitionDurationInMs } from './SidebarStore'
 	import NavigationLink from './NavigationLink.svelte'
 
 	export let routes = []
@@ -15,9 +15,6 @@
 
 	let activeSubRoute = null
 
-	const animate = !window.matchMedia('(prefers-reduced-motion: reduce)')
-		.matches
-
 	const dispatch = createEventDispatcher()
 
 	const toggleGroup = () => (groupOpen = !groupOpen)
@@ -51,12 +48,12 @@
 	 * will change too, which is why the existing active subroute is reset.
 	 * The new active subroute is determined in `handleActiveChange`.
 	 */
-	const unsubscribe = activeUrl.subscribe((value) => {
+	const unsubscribeFromActiveSubRoute = activeUrl.subscribe(() => {
 		activeSubRoute = null
 	})
 
 	// The active unsubscribe is required due the usage of a callback function.
-	onDestroy(unsubscribe)
+	onDestroy(unsubscribeFromActiveSubRoute)
 </script>
 
 <!-- A groups heading is differentiated by having a name and a route -->
@@ -95,7 +92,7 @@
 <ul
 	id={`${route ? route : 'root'}-group`}
 	hidden={!groupOpen || disabled}
-	in:scale={{ duration: animate ? 250 : 0 }}
+	in:scale={{ duration: $transitionDurationInMs }}
 >
 	{#each routes as route (route.route)}
 		<li class:group={route.childRoutes}>

src/components/Sidebar/Sidebar.svelte

@@ -3,6 +3,7 @@
 	import {
 		activeUrl as storeActiveUrl,
 		onLinkClick as storeOnLinkClick,
+		transitionEnabled as storeTransitionEnabled,
 	} from './SidebarStore'
 	import NavigationLinkGroup from './NavigationLinkGroup.svelte'
 
@@ -23,12 +24,17 @@
 	export let onLinkClick = null
 	export let theme = {}
 	export let open = true
+	export let transitionEnabled = true
 	export let collapseTree = false
 
 	// Initialise the shared store with the values passed to `Sidebar` as props.
 	beforeUpdate(() => {
 		storeActiveUrl.set(activeUrl)
 		storeOnLinkClick.set(onLinkClick)
+		storeTransitionEnabled.set(
+			transitionEnabled &&
+				!window.matchMedia('(prefers-reduced-motion: reduce)').matches
+		)
 	})
 
 	$: combinedTheme = { ...defaultTheme, ...theme }

src/components/Sidebar/SidebarStore.js

@@ -1,10 +1,16 @@
-import { writable } from 'svelte/store'
+import { writable, derived } from 'svelte/store'
 
 /*
- * The store allows to avoid passing `activeUrl` and `onLinkClick`
- * as prop to every `NavigationLinkGroup` & `NavigationLink`.
+ * The store allows to avoid unnecessary prop-drilling.
  */
 
 export const activeUrl = writable(null)
 
 export const onLinkClick = writable(null)
+
+export const transitionEnabled = writable(true)
+
+export const transitionDurationInMs = derived(
+	transitionEnabled,
+	($transitionEnabled) => ($transitionEnabled ? 250 : 0)
+)