I am new in react so sorry if the question sounds silly!
I am trying to make a sidebar menu with vertical tabs like the picture below but i can't find anything on how to make the side-tabs open this way (vertically) .
More specifically I want i sidebar like this when it is closed closed sidebar
and then when i open it to expand each tab vertically with info
sidebar example
sidebar example clicking on other tab
Thank you
Related
I would like to completely hide the react navigation bottom tab navbar when my keyboard appears.
I've already added tabBarHideOnKeyboard: true to my Tab.Navigator, but the issue is that a one of the tabs sticks out when the navbar hides.
I am looking for a split view in react js , i am using chakra ui for my layouts and i am not able to achive it .
Left Pane is Menu which has a fixed height (no scrolling needed)
Right Pane is the page which gets loaded every-time user selects an option in left menu.
Right pane should be scrollable.
You should give a try on the Choc-UI Layouts for achieving this:
https://choc-ui.com/docs/application-shells/sidebar-layouts
Or here too:
https://chakra-templates.dev/navigation/sidebar
On the links you will get previews of components that have a side bar on left side getting th full height of the viewport, also a sidebar and a container for your app content or other components.
This section is independent of the sidebar and navbar showed on the previews. You can access the code with the show code option on each previo (top-right location)
Try removing the navbar and modifying the width of sidebar, and you will get a split version of the layouts as you are reaching for.
I have gone through few other answers but no solution yet. Whats the problem is, I have added expansion panel in footer. So when I scroll down the webpage and click on expansion icon on footer it move downwards and again we need to scroll down to see the whole content. Any help would be much appriciated.
My overall goal is something like this for the main overarching layout component:
Live example of my goal: https://app.mobalytics.gg/
Where there is a persistent 'sticky' top bar and side bar at all stages of the application. And then from that point on I use my router to modify the white portion of the screenshot with whatever component / functionality I want the user to experience.
However I am unfortunately struggling to get this to work at all. Various attempts have resulted in navbar overlapping the sidebar and then others the sidebar overlapping the navbar, some attempts crushed the sidebar to basically be only as long as the navbar. Tried using grids and then that crushed the "white portion" when I added components through the router and a few other non-solutions sadly...
How would someone achieve this with semantic-ui-react?
Other answers I've looked at and tried to no success sadly:
1: Separating Top Nav bar and Side nav bar
2: Sidebar + Fixed Top Menu in Semantic-UI React
3: semantic-ui-react fixed sidebar and navbar: can't get sidebar and content to scroll nicely
i want to create slide menu inside tad dashboard.Please check this code how to implement slide menus.
Sample code for tabs
Please suggest me how to do. Slide menu in above code.
Thanks.