I am building a web app using next.js with react and semantic-ui-react for the styling, and I am trying to build a basic layout comprising of a fixed sidebar for navigation and the page content next to it. Initially I was trying to use the Sidebar component but could not get this to work. A user online suggested it's more for mobile usage, so I changed to using a Menu component with the vertical and fixed properties.
I now have a fixed menu but the main page content does not start beside it -- instead it starts behind the menu. The content is inside a container which has an auto margin working from the edge of the document/page, behind the menu.
Things I have tried:
Using dev-tools and adding padding-left to the content container fixes the issue but if I resize the page the issue returns -- it's not adaptive/responsive.
Using a grid -- I have added a grid to the components but it has made no difference.
Relevant code:
_app.js
<div>
<Head>
<title>Thoughts!</title>
</Head>
<Grid>
<Grid.Row>
<Grid.Column>
<FixedMenuLayout></FixedMenuLayout>
</Grid.Column>
<Grid.Column>
<Component {...props} />
</Grid.Column>
</Grid.Row>
</Grid>
</div>
FixedMenu.js
<Menu fixed='left' inverted vertical>
<Container>
<Menu.Item as='a' header>
<Image size='mini' src='/logo.png' style={{ marginRight: '1.5em' }} />
Project Name
</Menu.Item>
<Menu.Item as='a'>Home</Menu.Item>
<Dropdown item simple text='Dropdown'>
<Dropdown.Menu>
<Dropdown.Item>List Item</Dropdown.Item>
<Dropdown.Item>List Item</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Header>Header Item</Dropdown.Header>
<Dropdown.Item>
<i className='dropdown icon' />
<span className='text'>Submenu</span>
<Dropdown.Menu>
<Dropdown.Item>List Item</Dropdown.Item>
<Dropdown.Item>List Item</Dropdown.Item>
</Dropdown.Menu>
</Dropdown.Item>
<Dropdown.Item>List Item</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</Container>
</Menu>
How can I get the content to be next to the sidebar? (I.e. the page starts on the right of the sidebar, like it's own frame.)
As an aside I would also like to be able to have the sidebar fixed, open by default but collapsible with the content taking full-width.
Related
I am trying to create a frontend using ReactJS. The different components of the page are being created using tabler-react.
I am trying to create a navigation panel using the Nav component in tabler-react. The return function looks like this:
return (
<Nav >
<Nav.Item to='#' value="Item1" />
<Nav.Item to='#' value="Item2" />
<Nav.Item to='#' value="Item3" />
<Nav.Item to='#' value="Item4" />
</Nav>
);
It is by default displayed one after the other in a row, starting from the left-most side of the screen.
I wish to display the items in such a way that 'item1' and 'item2' are displayed in the left-most side and 'item3' and 'item4' get displayed at the right-most end. I am facing trouble doing this.
I searched for a solution and understand that a style property can be set to the tags which can do things like justifyContent, alignment etc. I tried setting such style properties to the individual tags inside , but it doesn't cause any change in the rendered page.
I am new to ReactJS and javascript in general. So I am not sure if this is a basic mistake I am doing. Any help is appreciated. Thanks.
This is quick fix
return (
<Nav >
<Nav.Item to='#' value="Item1" />
<Nav.Item to='#' value="Item2" />
<div style={{
marginLeft: 'auto'
}} />
<Nav.Item to='#' value="Item3" />
<Nav.Item to='#' value="Item4" />
</Nav>
);
There are numerous methods but I wouldn't recommend adding elements just for styling. A simple method is to select the element which should be the last element on the left with nth-child(n) and add margin-right: auto to it. You could do this with the next element if you wanted and apply margin-left: auto instead if you prefer.
HTML
<nav>
Link 1
Link 2
Link 3
Link 4
</nav>
CSS
nav {
display: flex;
}
nav a:nth-child(2) {
margin-right: auto;
}
I'm new to ReactJs now learning the react-bootstrap and trying to learn the NavBar. I made a CodeSandbox.
I really like the design like this:
The NavBar is set to fixed="top" so it's always visible when user scroll.
When I change the size of the window the NavBar get higher I try setting css like:
.NavBar {
max-height: 80px;
}
But Buttons and all components jump around wrapping making NavBar larger and not very good looking.
how can I resize the Components when window size change?
I see many pages uses different NavBar layouts and switch between them when window is resized. Is that done using css or should I create another React Component another NavBar and replace NavBar depending on window size?
I see many pages uses different NavBar layouts and switch between them
when window is resized. Is that done using css or should I create
another React Component another NavBar and replace NavBar depending on
window size?
In React-bootstrap (or any Bootstrap library), this functionality is already provided for you. This is generally the job of Navbar.Toggle & Navbar.Collapse. Basically, this enables you to switch from the desktop view - wherein all the Nav Items are displayed on the header versus on the mobile view wherein majority of the Nav Items are inside a Dropdown which is toggleable via the Navbar.Toggle (Hamburger) Button.
So in short, my suggestion is to leverage the already available functionality of React-bootstrap regarding toggling between the desktop view and mobile view.
return (
<>
<Navbar
expand="xl"
bg="dark"
variant="dark"
fixed="top"
collapseOnSelect
>
<Container fluid>
<Navbar.Brand href="#home" className="img-container">
<img alt="" src={logo1} />
</Navbar.Brand>
<Navbar.Toggle
aria-controls="responsive-navbar-nav"
onClick={toggle}
/>
<Navbar.Collapse id="basic-navbar-nav">
<Col>
<Nav.Item>
<Form inline>
<FormControl
type="text"
placeholder="Search Title, event, date"
className="mr-sm-2 m-1"
size="lg"
/>
<Button className="m-1" variant="outline-info" size="lg">
Search
</Button>
</Form>
</Nav.Item>
</Col>
<Col md="auto">
<Button className="m-1" variant="primary" size="lg">
Articles
</Button>
<Button className="m-1" variant="primary" size="lg">
Timeline
</Button>
<Button className="m-1" variant="primary" size="lg">
About
</Button>
</Col>
</Navbar.Collapse>
</Container>
</Navbar>
</>
);
In retrospect, you should also be able to assess that on mobile, the screen is too small so forcing in the Nav Items to be shown right away will block majority of the viewport - potentially causing UI/UX issues.
If you opt to disregard that and absolutely must place all of these items in the header even on mobile, you can always use media queries.
Example is on your image which I recommend you resize on small devices:
#media (max-width: 991px) {
.navbar .navbar-brand {
max-width: 280px;
}
}
You can refer here to the Bootstrap break points: https://getbootstrap.com/docs/4.5/layout/overview/#containers
Refer here for React-bootstrap Navbar documentation: https://react-bootstrap.github.io/components/navbar/#navbars
I'm trying to bold a single word within a React Material-UI <Typography> element (which also is within a Material-UI <Card>). I was just using html tags, and it works:
<Typography><b>First thing:</b> {answers[2]}</Typography>
But when I use them, they produce a visible re-sizing of the text on load.
I'm left nesting <Typography> tags, which forces me to apply a bunch of styling to make them appear normally:
<Typography style={{display:'inline-flex', alignItems: 'baseline'}}><Typography variant='h6' style={{marginRight:'3px'}}>Path:</Typography> {path}</Typography>
This seems like a janky solution. Am I missing something? Like another reason why the <b> tags are causing a load delay, or a built-in Material-UI solution?
Full code for the <Card>, as reference:
<Card className={classes.card}>
<CardActionArea>
<RenderImage imageAddress={myImage} widthAndHeight={[230, 180]} style={{marginLeft: '10%'}} />
<CardContent>
<Typography style={{display:'inline-flex', alignItems: 'baseline'}}><Typography variant='h6' style={{marginRight:'3px'}}>Path:</Typography> {path}</Typography>
<Typography><b>First thing:</b> {answers[2]}</Typography>
<Typography><b>Second thing:</b> {answers[0]}</Typography>
<Typography style={{marginBottom: 0}}><b>Third thing:</b> {answers[1]}</Typography>
</CardContent>
</CardActionArea>
</Card>
Have you tried with Box component?
You could do something like
<Typography component='div'>Normal text <Box fontWeight='fontWeightMedium' display='inline'>medium font weight text</Box> and some more normal text</Typography>
Note that component='div' prop on Typography wrapper is required as Box component cannot be nested under the Typography's default p.
Source Typography font weight
To fix the issue Mohamed mentioned, you can change the component Box renders as to span (displayInline will be unnecessary using this method):
<Typography>Normal text <Box component="span" fontWeight='fontWeightMedium'>medium font weight text</Box> and some more normal text</Typography>
You can also do something like this:
<Typography>normal text <strong>bold text</strong> normal text</Typography>
I'm using Next.js app which has a card component that has read more link. when the user clicks on read more link the card should expand, I have used "react-show-more" https://github.com/One-com/react-show-more. I need to add smooth expand to the card when press the read more link with CSS Transition rule but the CSS transition is not working. This is my card component. and you can find live demo here: https://codesandbox.io/s/confident-http-cfz7p?fontsize=14
return (
<CardOuter>
<CardIcon>
<img className="CardIcons" alt="cardIcon" src={Icon} />
</CardIcon>
<CardContent>
<h3>{Title}</h3>
<ShowMore
lines={5}
more={<Link className="link-right" Content="Read More" />}
less={<Link className="link-right-sl" Content="Show less" />}
anchorClass="showMore"
>
{Description}
</ShowMore>
</CardContent>
</CardOuter>
);
I found another npm that has smooth expand,
https://github.com/tinacious/react-animated-show-more
I am trying to make header & tab fixed while the main content is scrolled. Since those 2 header images & html tab is placed within page <content>. It scrolls. But how to make it fixed in its position?. Or is there any alternate solution to put the header out of page's content?. Here is my code
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="budgetspend.controller.App" xmlns:html="http://www.w3.org/1999/xhtml"
displayBlock="true">
<App id="BA_APP">
<pages>
<Page>
<content>
<Image class="logo" src="../images/logo_new.png"/>
<Image class="header" src="../images/header-bg.png"/>
<html:ul class="tab">
<html:li>
<html:a id="onBud" class="tablinks active">Budget Analyzer</html:a>
</html:li>
<html:li>
<html:a id="onSpend" class="tablinks">Spend Analyzer</html:a>
</html:li>
</html:ul>
<sap.ui.layout:VerticalLayout xmlns:sap.ui.layout="sap.ui.layout" id="budget_layt" class="lay_cont">
<sap.ui.layout:content> .............
NOTE : Header image & tab covers almost 130px. so I can't place it inside <headerContent> tag.
You can place the content part of the page (which is now a VerticalLayout) into a sap.m.ScrollContainer, which provides scrolling capabilities to its content. With this, you can scroll the content inside the container. You can set a custom height to the scroll container.
Have you tried to implement an sap.m.IconTabBar control instead of creating HTML elements in the XML view?