uneven yacht
Hello, i am trying to work and learn the AppShell and wanted to ask if it is possible for the navbar to not be fully hidden. Im trying to have a navbar with only icons when it is collapsed and when oponed to show also the labels. something like picture 1 when collaped and picture 2 when open.
is that possible with only appshell? or only navbars?
plucky void
Yes, it is possible. We had it implemented and it was a big pain. Ended up removing that functionality.
Our approach was to include a isCollapsed state inside the appshell component.
The state would change the style. (hide text and reduce the width)
Think about the wanted behaviour before implementing. It feels like there are a million different behaviours.
uneven yacht
so we can use the isCollapsed to make dont hide, but to have a smaller navbar?
uneven yacht
or is it better to use the collapse and if true it renders a navbar and false the appshell?
ebon quest
we used local storage to store the value if navbar is collapsed. This value affects the width of navbar, and this is how labels are shown or hidden.
uneven yacht
is that still available or was it completely removed?
ebon quest
this is close to using isCollapsed state like Ben suggested, but it is based on useLocalStorage hook from Mantine
uneven yacht
aaah, i see. Can you send me the link for that hook?
i was working on this code, i dont know how to make it work -.-''
deep sky
we do it with a state element, toggled either through clicking on a navlink, or by toggling a caret in the header. That state element controls the width of the navbar itself and display properties for whether we should be rendering just icons, or icons with text. Then we collapse the whole thing on navigation.
uneven yacht
and is the state then the use-local-storage?
deep sky
ours is held in local state, but we also have a config file that's read in for user preferences
uneven yacht
sorry for the questions, but im new to programming and im trying to learn
deep sky
if you're going to be manipulating the value in multiple locations, you can place it into a context, or you can create a section in redux to handle that value (since I see you have redux in your snippet there). You can also hold it in local-storage if you want it stored in the browser, or even in a cookie if you want it to reapply when the user returns to your site
uneven yacht
one last question, regarding the props transitionTimingFunction, Can i use all the transitions in this or am i limited?
ebon quest
i was working on this code, i dont know how to make it work -.-''
I believe that you used desktopOpened to control whether navbar is thin or wide. If so, you can have something like this in your navbar prop in AppShell:
width: desktopOpened ? 300 : 60
I am not sure if it is the best practice, but it works for me
uneven yacht
I believe that you used `desktopOpened` to control whether navbar is thin or wid...
that worked for me too, thank you so much for the help @ebon quest🤗
