philipp-tailor / svelte_sidebar Goto Github PK

As user of the sidebar component, I want to easily use the sidebar when using query parameters and URL hashes in my application.

Currently, the sidebar will detect whether a navigation route is currently active in the application in SidebarLink.svelte with a straight equality comparison. This might not work well for applications which use query parameters and URL hashes in the application. Such applications could pass a cleaned activeUrl prop, but might prefer to customise the detection, which URL is active.
Users of the component could pass a new matchActiveUrl property.

src/Sidebar/* is thought of as an independent, re-usable module. To truly reach that, it must be consumable to 3rd parties as NPM package or Github package.

As a user, I want to be able to quickly orient myself in the navigation sidebar. As a user, icons help me to grasp the navigation structure faster than by reading text.

Extend route object in the routes property with a property that, when being passed a URL, will render the URLs SVG as icon before a route link's name in NavigationLink.svelte.

Hello,

I am testing the latest version of the package 0.1.0. When I run the application with the new package it throw an error saying that it cant resolve svelte-sidebar. I think it could be related with the new version of package.json, there is a similar issue in the following github issue link. Any idea why this could be and how could be fixed?

indentjs/objectorarray#3

Terminal response when I try to run my application.

vite v2.9.5 dev server running at:

Local: http://localhost:3000/
Network: use --host to expose

ready in 291ms.

X [ERROR] [plugin vite:dep-scan] Failed to resolve entry for package "svelte_sidebar". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "svelte_sidebar". The package may have incorrect main/module/exports specified in its package.json.

front-end/src/components/Sidenav.svelte?id=0:4:24:
4 │ import Sidebar from 'svelte_sidebar'

Thank you.

As far as I could test, the child routes are all open as default, is there any way that the child tree could show closed as default?
Thanks for the library.

Hi Mr. @philipp-tailor. I'm using sveltekit and did this...

import Sidebar from 'svelte_sidebar'

const props = {...}

<Sidebar {...props} />

...inside my __layout.svelte file. The sidebar is showing. But the problem is that when I put this Sidebar component (for example, at the top of my other elements and components), it just goes above all my other components; it doesn't get fixed at the side like what's shown in the playground site.

Currently, all JS chunks have a static name. This requires repeating users of the playground on https://sidebar.schneiders.space to reload without cache to receive the updated page – not optimal.

Change it so that the filenames contain hashes.