I want to create a double sidebar in react that is a sidebar that looks something like this
in which the icons are part of sidebar 1 and options keep changing like invoice dashboard etc keep changing in sidebar 2
currently I am using the react sidebar pro library(https://www.npmjs.com/package/react-pro-sidebar) but it only provides multilevel vertical nesting thus i am able to acheive something like this
so how do I create this double sidebar
Related
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 started playing a bit with Shopify Polaris, in particular, the Frame layout:
https://polaris.shopify.com/components/structure/frame
What is not clear to me is that in the example provided by Shopify the sidebar, when an item is clicked, always toggles the toggleIsLoading method, and then it eventually always renders the actualPageMarkup component.
However, I would like to have a sidebar menu containing n different items. For each of them, I would like to render a particular component associated with the selection. How can I achieve this?
Ideally, I would like to always display the sidebar and the header, no matter what the component is.
I understand this question is not strictly related to Shopify Polaris or Next.js, however, I consider myself a newbie in both React and Next.js.
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 am using material select component in my react application. Can i specify the layout of menu items to next to each other and wrap to new line ? Desired componnent should look like this:
In my react app, there's a repeated UI pattern of using a collapsible panel (like an according), where there are several panels/boxes with a title bar. Clicking on the title bar expands/collapses the panel's contents.
Is a Higher Order Components method suitable for such a use case? Something like a withAccordion(Component)?