I am using the react-site-nav package in a react application with typescript. I am having trouble styling the navbar.
I want the navbar to have a logo on the left end and a button on the right end, and the links to pages should be in the middle. I can't figure out how to add a logo to the left end of the package navbar.
I used flexbox and kept the items in a row, but when I put the SiteNav element in a flexbox div that has padding, the drop-down menu of ContentGroup gets displaced by the padding. I don't know how to offset the padding for the ContentGroup. Changing the style of the content group by subtracting the padding is what I think could be my solution.
Any help would be appreciated, thanks!
[link to navbar package] (https://www.npmjs.com/package/react-site-nav)
<SiteNav>
// add an image that is at the start of the navbar
<ContentGroup title="About" height="200">
Some text 1
</ContentGroup>
<ContentGroup title="Contact" height="200">
Some text 2
</ContentGroup>
// add a button that is at the end of the navbar
</SiteNav>
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 a react project which has top appbar with responsive drawer on left side. This appbar is responsive with FormControl items in it. On open the left nav drawer pushes the content to fit responsive and in the top appbar, FormControl wraps down, changing height of the top appbar. Am able to capture this change in height for all items in the side nav, except for the menu button on top left and IconButton inside of it.
I want to capture the accurate aapbar height to push the content below of it, which is not happening for click on Menu and inside IconButton button.
I used react ref for this, still does not give me accurate dimensions.
Attaching working example:
https://xzbot.csb.app/
If you reduce the window and click on menu button, as the drawer expands, second languages item wraps down and increases the height of appbar.
Any suggestions how can I get proper height of the top appbar much appreciated.
Thanks,
Gautam
I'm trying to better understand how Material-UI works, and I was confused why I need to use the Toolbar component twice to get my scrolling toolbar to render properly as in this example code.
If I don't include the second Toolbar after the ElevationScroll, the menu I want to place below the app bar is rendered underneath the app bar. If I include it, my menu is pushed down and renders nicely. This works great, but I don't understand why I need to include an extra in my jsx in order to get things to look right, like in this simplified example:
function SettingsMenu() {
return (
<ElevationScroll>
<AppBar>
<Toolbar>
<Typography>
Settings
</Typography>
</Toolbar>
</AppBar>
</ElevationScroll>
<Toolbar/>
<MyMenu/>
);
}
I've checked in Google Devtools to figure out why this is happening, the second toolbar is rendered as a div with nearly identical css styles but with no child elements. When I delete it manually in Devtools, the menu gets pushed back up behind the app bar as before. Thanks for any help!
It's because AppBar have positon: fixed; which means it wont take space on the screen so you but another Toolbar which will be underneath the AppBar to push the content down and take the same space the Toolbar should take.
How to nest border layout panel inside the Ext.container.Container and container.Container is rendered to a div ?
The main reason for this type of rendering is that, to show a logo at the top of the page.
NOTE: viewport renders in whole browser. so, it cannot be used to display the logo at the top of the page.
Please help.
Do not confuse border layout with Viewport container. Viewport can't be rendered to a div but an ordinary container can be, and you can use border layout with any kind of container, including Panels. Just try it out.