How to disable showing menu links when click a parent link in slim mode?

[efecancorbacioglu]

Hi!

I'm trying to create a sidenav for my project. I want to enable users to change slim mode with a button and I don't want to show sub-menu items if sidenav in slim mode. I am currently using "sidenav-4" as a guide but I haven't found a api or way to disable opening sub-menus in slim mode. Is there anyway to do that?

Also, I have some images and I want to change their apperance according to slim mode status. What type of ref that I should give them and how should I use this refs with in classes?

Lastly, I am using a data named "isSlim" to check slim mode and changing it's value when user clicks the "slim mode button" but I am not sure about it is a good idea. I am using 'data-te-sidenav-slim="false"' to hide an element in slim mode but I couldn't find a way adding extra css classes like giving padding or etc. I have also tried to give classes to elements on their attributes like '[&[data-te-sidenav-slim-collapsed='false']]:data-[te-sidenav-slim='false']:py-3' but I couldn't manage to make it work.

[juujisai]

Hello!

1. Unfortunately, the click on the category will always open the sub menu, we do not have an option to turn it off. You can try add some styles to make the category and full name not visible when in slim mode (class hidden)

2. As of the styling and images, we do not add any classes / attributes while toggling the sidenav to slim and back at this moment - we will have to add this. For now you can add one yourself while toggling the slim mode - for example adding data-slim="true" and then styling based on this ( data-[slim="true"]:py-3).

3. In our slim example (https://tw-elements.com/docs/standard/navigation/sidenav/#slim) we are using instance.toggleSlim() method to toggle the slim mode. We provide some events that are emitted when sidenav slim is expanded and collapsed - maybe it could be better to use them to check the sidenav mode? Set some value when they are emitted
   

Added new issue: #2226

[juujisai]

Did you try adding tailwind styles that would make use of the data-slim=false attribute? For example hidden data-[slim="false"]:block

[efecancorbacioglu]

Yes, I tried. I have successfully overridden the CSS properties given inline to the navbar, menu list, and links using the data-slim attribute I created. However, my main issue is with the .content element. I am trying to apply classes based on the value of the data-slim attribute, but it doesn't seem to work. For example, even though I try to apply md:pl-[120px] if the data-slim value is true and md:pl-[270px] if it's false, content element does not recognize these classes, and it continues to use the padding property given inline (even when set as important). Additionally, when I try to provide these CSS properties as styles, it uses sum of my value and it's value. Why my custom classes doesn't work on .content element?

[iprzybysz]

Hi, where the data-slim attribute is added - I suppose it is on the nav element. If I'm right you should use group state to style this element based on the parent state - in this case, your data-slim attribute. You have an example of using this state in our Slim sidenav snippet in documentation.

<span
  class="group-[&[data-te-sidenav-slim-collapsed='true']]:data-[te-sidenav-slim='false']:hidden"
  data-te-sidenav-slim="false"
  >Link 1</span>

[efecancorbacioglu]

Hello, I'm having trouble using the group feature because the content-panel element is outside of the nav element. Additionally, when I applied Tailwind classes to the content panel, I couldn't override the automatically generated padding value in content panel (the given classes by me were not detected). I solved the issue by providing the CSS properties in SCSS. Now, I need help with another issue.

Is there a way to close the open submenu when a link in the submenu or another link is clicked? While the accordion feature allows me to close one collapse menu when another is opened, I need something more to close all submenus when a submenu link is clicked.

Thanks,

[iprzybysz]

I think you have to try out with Collapse methods. For example, select all instances and trigger hide method when link is clicked. Check out Collapse Methods API documentation.