Expandable navlist: expanded false

[ITSYV]

When using an expandable navlist, the list is automatically opened.
You can close it by using the "expanded" prop (not documented at this moment).

The prop is set to true by default. When trying to close it for a specific item you have to use expanded="" as in the code @if ($expanded) is used.
Maybe an idea to switch the prop to "closed = false" instead of "expanded" so we can just use "closed" on the navbar element?

[jeffchown]

@ITSYV Can you provide a copyable code example?

[ITSYV]

@jeffchown This is the code I'm working on now:

<flux:navlist.group expandable expanded="" heading="Group 1" >

<flux:navlist.group expandable expanded heading="Group 2">
<flux:navlist.item>item 2001</flux:navlist.item>

<flux:navlist.group expandable heading="Group 3">
<flux:navlist.item>item 3201</flux:navlist.item>
<flux:navlist.item>item 3202</flux:navlist.item>
</flux:navlist.group>

</flux:navlist.group>

<flux:navlist.group expandable expanded="" heading="Group 4" >
<flux:navlist.item >item 4001</flux:navlist.item>
<flux:navlist.item >item 4002</flux:navlist.item>
</flux:navlist.group>

<flux:navlist.item >item 1000</flux:navlist.item>
</flux:navlist.group>

[jeffchown]

@ITSYV For anyone to be able to help, the code sample needs to be without any dependencies (e.g. your $item, selectItem(), etc.
People can't cut & paste your code and run it.
Some people provide one-file Volt components for easier collaboration.

[ITSYV]

@jeffchown editted

[jeffchown]

See #626 (comment)

[ITSYV]

@jeffchown what does this have to do with Livewire? It's a prop on a blade element from Flux?

[jeffchown]

@ITSYV You're correct. My answer applies to your other issue.

Re: flux:navlist.group expanded attribute, I agree - probably better if it operates in a fashion consistent with a flux:accordion.item where it is closed by default and initially opened only if the expanded attribute is passed e.g.

 <flux:navlist.group heading="Account" expandable expanded>
     <flux:navlist.item href="#">Profile</flux:navlist.item>
     <flux:navlist.item href="#">Settings</flux:navlist.item>
     <flux:navlist.item href="#">Billing</flux:navlist.item>
</flux:navlist.group>