Toggling the width of an element

[eduardonwa]

How could I possibly target the width of an element? I want to be able to toggle between 2 Tailwind classes, from w-24 to w-82 or a width that is fitting, what property can set me up for this? I've noticed just toggling the objects alpine doesn't get the result I want since im working on a sidebar and when I expand the content, I don't want to hide the icons that this sidebar has, im looking to:

1. Shrinking or expanding the width of the sidebar
2. Upon shrinking hide the text
3. Always have the icons visible

Im using an unorganized list, the text for each icon is inside a <span>. Here's some code where im able to hide all the elements inside this sidebar, like I said I just wish to hide/show the strings besides and also contract and expand the width :-)

            <div
                x-data="{show: false}" 
                class="w-24 fixed min-h-screen flex text-gray-500 bg-gray-900 justify-center items-center boldershadow">
                
                @include('_sidebar')

                <button
                    x-on:click="show = ! show"
                    class="absolute top-0 mt-10 transition ease-in-out hover:text-white"
                >
                    <svg
                        fill="currentColor"
                        xmlns="http://www.w3.org/2000/svg" 
                        height="24" 
                        viewBox="0 0 24 24" 
                        width="24"
                    >
                        <path d="M0 0h24v24H0V0z" fill="none"></path>
                        <path d="M4 18h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0-5h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zM3 7c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1z"></path>
                    </svg>
                </button>
            </div>

This is an example of how the <ul> is organized, in reality I have 5 ```

````:

<ul 
    x-show="show"
    class="menu mt-5"
>

    <li class="mb-10">
        <a href="#" class="flex transition ease-in-out hover:text-white">
            <svg
                fill="currentColor"
                xmlns="http://www.w3.org/2000/svg" 
                height="24" 
                viewBox="0 0 24 24" 
                width="24"
            >
                <path d="M0 0h24v24H0V0z" fill="none"></path>
                <path d="M15.5 14h-.79l-.28-.27c1.2-1.4 1.82-3.31 1.48-5.34-.47-2.78-2.79-5-5.59-5.34-4.23-.52-7.79 3.04-7.27 7.27.34 2.8 2.56 5.12 5.34 5.59 2.03.34 3.94-.28 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
            </svg>
            <span class="hidden text pl-2">Search</span> <!-- span element -->
        </a>
    </li>
</ul>

[KevinBatdorf]

Not sure I understand but maybe you want to just bind classes? <div :class="show ? 'w-24' : 'w-82">

[eduardonwa]

Where are you considering placing that line of code? I want to do this:

https://imgur.com/RW7HzJD

but the problem with that is that I am having 2 sidebar partials where one has icons without the span and another with icons and text. So in my HTML I ended up hacking it like this:

<div x-data="{ show: false }">
<x-sidebar-icons/> <!--only icons-->

@include('_sidebar') <!-- icons and text -->

<button x-on:click="show = ! show"> Toggle </button>
</div>

The end result should be very similar to Youtube's sidebar. As you can see it's not that clean there is a small overlap on the icons. Basically this approach just puts a partial on top of the other, the one where there only the icons exists.

[KevinBatdorf]

I'd have to see it really to be of much more help. Otherwise I'm just guessing. You probably want it here though:

<div x-data="{ show: false }" :class="show ? 'w-24' : 'w-82" class="other-classes">

[eduardonwa]

Appreciate the input, thanks, will keep on trying.
edit--
@KevinBatdorf if you have the time, check the repo that I just created.
https://github.com/eduardonwa/videotheque/blob/main/resources/views/components/master.blade.php