Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

SidebarDropdownWrapper add events #644

Closed
hectordufau opened this issue Apr 5, 2023 · 8 comments · May be fixed by #1031
Closed

SidebarDropdownWrapper add events #644

hectordufau opened this issue Apr 5, 2023 · 8 comments · May be fixed by #1031
Labels
enhancement New feature or request

Comments

@hectordufau
Copy link

SidebarDropdownWrapper doesn't have any events to add.
I want manage SidebarDropdownWrapper openings, closing others by on:click

	const closeSidebar = (newsidebar: SidebarDropdownWrapper) => {
		sidebar.$set({isOpen:false});
		sidebar = newsidebar;
	}
</script>

<div class="accordion-container">
	<Sidebar asideClass="bg-green-50 w-64">
		<SidebarWrapper divClass="overflow-y-auto py-4 px-3 bg-green-50 rounded dark:bg-green-800">
			<SidebarGroup borderClass="pt-4 mt-4 border-t border-green-50 dark:border-green-800">
				{#each menus as menu, i}
					{#if menu.idperfil == idperfil || menu.idperfil == 0}
						{#if menu.submenus.length > 0}
							<SidebarDropdownWrapper
								label={menu.title}
								{btnClass}
								bind:this={sidebarlist[i]}
								on:click={() => closeSidebar(sidebarlist[i])}
							>

SidebarDropdownWrapper has a on:click event, but it doesn't run.
@hectordufau hectordufau added the enhancement New feature or request label Apr 5, 2023
@shinokada
Copy link
Collaborator

It is because it is not exported.
The SidebarDropdownWrapper has on:click to handle open/close the dropdown.
Are you trying to close another sidebar within a sidebar?

@hectordufau
Copy link
Author

I tried using on:click for closing another previous Sidebar Dropdown opened. CloseSidebar function try to do it, sending as variable a sidebar dropdown clicked, closing previous and changing previous by current.

However, on:click doesn't run or called.

Maybe a new funcionality could be by this way: when user click on a sidebar dropdown menu, its ID is saved on component store and after click on another, previous ID is closed (isOpen = false), all those enabled by parameter like SidebarDropdownWrapper closeOpened = true/false

@shinokada
Copy link
Collaborator

May I clarify that you want to close other SidebarDropdownWrapper that are not related to the current URL?

If it is so, it is doable by adding some code.

@hectordufau
Copy link
Author

hectordufau commented Apr 18, 2023 •
edited

@shinokada it is exactly that I want. I've tried to do something, but without success. Maybe need add code on component directly.

Would you like to help?

@shinokada
Copy link
Collaborator

I will see if I can add that function in the future version.

@hectordufau
Copy link
Author

Maybe only enabling SidebarDropdownWrapper "on:click" it is enough.

<SidebarDropdownWrapper label={menu.title} {btnClass} bind:this={sidebarlist[i]} on:click={() => closeSidebar(sidebarlist[i])}>

const closeSidebar = (newsidebar: SidebarDropdownWrapper) => {
    sidebar.$set({isOpen:false});
    sidebar = newsidebar;
}

@shinokada
Copy link
Collaborator

I think the latest update solve this issue. You need to add your logic to containPath:

<script>
  import { page } from '$app/stores';
  import { Sidebar, SidebarGroup, SidebarItem, SidebarWrapper, SidebarDropdownWrapper, SidebarDropdownItem } from 'flowbite-svelte';
  let spanClass = 'flex-1 ml-3 whitespace-nowrap';
  $: activeUrl = $page.url.pathname
  $: containPath = ()=>{
    // add your logic here
    true
  }
</script>

<Sidebar>
  <SidebarWrapper>
    <SidebarGroup>
      <SidebarItem label="Dashboard" active={activeUrl === '/dashboard'} />
      <SidebarDropdownWrapper label="E-commerce" isOpen={containPath}>
        <SidebarDropdownItem label="Products" href='/components/products' active={activeUrl === '/components/products'} />
        <SidebarDropdownItem label="Sidebar" href='/docs/components/sidebar' active={activeUrl === '/docs/components/sidebar'}/>
      </SidebarDropdownWrapper>
      <SidebarDropdownWrapper label="Items">
        <SidebarDropdownItem label="Item 1" href='/components/item1' active={activeUrl === '/components/item'} />
        <SidebarDropdownItem label="Item 2" href='/components/item2' active={activeUrl === '/components/billing'} />
      </SidebarDropdownWrapper>
    </SidebarGroup>
  </SidebarWrapper>
</Sidebar>

From docs

@jjaracz jjaracz mentioned this issue Sep 3, 2023
Open
8 tasks
@shinokada
Copy link
Collaborator

I close the issue for now since we do not have events on SidebarWrapper any more.
Please feel free to open a new issue.
Thank you for your contribution.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix sidebar dropdown jjaracz/flowbite-svelte
2 participants
@shinokada @hectordufau