I'm experimentating react bootstrap.
With the component Navbar.Collapse, to expand a NavDropdown upwards, i found this property drop="up"
<Navbar>
<Navbar.Toggle aria-controls="basic-navbar-nav"/>
<Navbar.Collapse id="responsive-navbar-nav">
<Nav>
<NavDropdown drop="up"
title="Changer la police"
id="basic-nav-nav"
onSelect={changeFont} >
<NavDropdown.Item
className={font.name}
eventKey={font.name}>
{font.name}
</NavDropdown.Item>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Navbar>
But i didn't find the equivalent for Navbar.Toggle, to as well expand upwards instead of downwards.
Thank you
I found a solution,
I added this code to the css :
.CustomFooter .navbar-collapse {
position: fixed;
bottom: 100px;
}
/* 1000px because this is the point where toggle disappears */
#media (min-width: 1000px) {
.CustomFooter .navbar-collapse {
position: relative;
bottom: 0px;
}
}
So it's get the impression of collapsing upwards
Related
I'm trying to add the Next Image component to my project.
And I have a problem, the image disappears when I add layout='responsive'.
code:
<Box>
<Link href='/' >
<Image src='/images/logoDark.svg'
alt='navbar-logo'
width={260}
height={56}
layout='responsive'
/>
</Link>
</Box>
Is there a solution? or any other way to optimize images?
Based on what is found here (https://github.com/vercel/next.js/issues/19314), it seems layout='responsive' has no intrinsic size. So you will have to add a width to the containing element.
You need to wrap the next/image into a container with display:block, so that the image will be displayed.
set height and width for the parent of the Image component :
<Box width={263} height={56}>
<Link href='/' >
<Image src='/images/logoDark.svg'
alt='navbar-logo'
width={260}
height={56}
layout='responsive'
/>
</Link>
</Box>
ensure the parent element uses display: block in their stylesheet like Box component or div
Component
<div className="photo">
<Image
width={300}
height={300}
src="https:/images.unsplash.com/photo-1501432377862-3d0432b87a14?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80"
alt="photo"
layout="raw"
/>
</div>
<style jsx>{`
#media (max-width: 768px) {
.photo {
margin: 0 auto;
justify-content: center;
display: flex;
width: 200px;
height: 200px;
}
}
`}</style>
next.config.js
experimental: {
images: {
layoutRaw: true,
},
},
This worked for me, the image doesn't disappear and is responsive,
I am new to React JS. Anyhow, I able to create the following Web App of my own.
My code works as I needed but with a small issue. The header shrinks and expands in a rugged manner (with a small vibration). The process does not happen smoothly. I suppose you can notice it in the gif image I provided above too. I need to make that transition smooth. How can I modify my code to achieve my aim?
This is the function I use to shrink the header upon scroll the page for 50 pixels down.
const [headerShrinked, setHeaderShrinked] = useState(false);
useEffect(() => {
function resizeHeaderOnScroll() {
const distanceY = window.pageYOffset || document.documentElement.scrollTop;
const shrinkOn = 50;
if (distanceY > shrinkOn) {
setHeaderShrinked(true);
} else {
setHeaderShrinked(false);
}
}
window.addEventListener("scroll", resizeHeaderOnScroll);
}, []);
And this is the external CSS code linked to it.
.header {
font-size: 55px;
font-weight: 600;
height: 70px;
letter-spacing: 1px;
padding-right: 40px;
padding-top: 0px;
}
.droplinks {
font-family: Arial;
font-size: 20px;
font-weight: 300;
color: black;
position: relative;
text-align: center;
}
.header {
height: 70px;
padding-right: 40px;
padding-top: 0px;
position: relative;
transition: height 0s linear 0.5s;
}
.header.shrinked {
height: 50px;
}
.headerBrand {
font-size: 40px;
font-weight: 600;
letter-spacing: 2px;
transition: font-size 0.5s;
}
.headerBrand.shrinked {
font-size: 30px;
}
.navlinks {
font-family: Arial;
font-size: 20px;
font-weight: 300;
letter-spacing: 2px;
padding-left: 30px;
padding-right: 30px;
position: relative;
text-align: center;
}
.navlinks:hover {
color: #ffffff;
text-shadow: 0px 0px 60px #ffffff;
transition: all 0.2s ease-in;
}
And here is the complete Js code.
import React, { useEffect, useState } from "react";
import { Navbar, Nav, NavDropdown } from "react-bootstrap";
import { Link } from 'react-router-dom';
import styles from "./Header.module.css";
const Header = (props) => {
const [headerShrinked, setHeaderShrinked] = useState(false);
useEffect(() => {
function resizeHeaderOnScroll() {
const distanceY = window.pageYOffset || document.documentElement.scrollTop;
const shrinkOn = 50;
if (distanceY > shrinkOn) {
setHeaderShrinked(true);
} else {
setHeaderShrinked(false);
}
}
window.addEventListener("scroll", resizeHeaderOnScroll);
}, []);
return (
<Navbar sticky="top" collapseOnSelect expand="lg" bg="dark" variant="dark">
<Navbar.Brand className={`${styles.headerBrand} ${headerShrinked ? styles.shrinked : ""}`}>
<Link to="/">
MyWebApp
</Link>
</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="mr-auto">
<NavDropdown title="Get to Know Us" id="collasible-nav-dropdown" className={styles.navlinks}>
<div className={styles.dropboard}>
<NavDropdown.Item className={styles.droplinks}>
<Link to="ourstory">
Our Story
</Link>
</NavDropdown.Item>
<NavDropdown.Item className={styles.droplinks}>
<Link to="about">
About Us
</Link>
</NavDropdown.Item>
<NavDropdown.Divider/>
<NavDropdown.Item className={styles.droplinks}>
<Link to="newtrends">
New Trends
</Link>
</NavDropdown.Item>
</div>
</NavDropdown>
</Nav>
<Nav>
<Nav.Link className={styles.navlinks}>
<Link to="/">
Home
</Link>
</Nav.Link>
<Nav.Link className={styles.navlinks}>
<Link to="features">
Features
</Link>
</Nav.Link>
<Nav.Link className={styles.navlinks}>
<Link to="screenshots">
Screenshots
</Link>
</Nav.Link>
<Nav.Link className={styles.navlinks}>
<Link to="pricing">
Pricing
</Link>
</Nav.Link>
<Nav.Link className={styles.navlinks}>
<Link to="faqs">
FAQs
</Link>
</Nav.Link>
<Nav.Link className={styles.navlinks}>
<Link to="blog">
Blog
</Link>
</Nav.Link>
<Nav.Link eventKey={2} className={styles.navlinks}>
<Link to="contact">
Contact
</Link>
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
};
export default Header;
I'm doing instagram clonecoding with react, react-bootstrap, scss
Navbar was created, but it is not centered with flex box.
How can I solved this problem?
why flex center is not working?
And how do you typically customize in react-bootstrap?
Header.js
<Navbar className="navbarContainer align-items-center" fixed="top">
<div className="nav">
<Navbar.Brand href="/">
<img src={insta_logo} alt="instagram_logo" />
</Navbar.Brand>
<Form>
<FormControl
type="text"
placeholder="Search"
className="searchBar"
/>
</Form>
<Nav
navbar="false"
className="flex-row navRight"
>
<Nav.Link href="/">
<Home fontSize="24px" />
</Nav.Link>
<Nav.Link href="/message">
<Send fontSize="22px" />
</Nav.Link>
<Nav.Link href="/explore">
<Compass fontSize="24px" />
</Nav.Link>
<Nav.Link href="/favorite">
<Heart fontSize="24px" />
</Nav.Link>
<NavDropdown
title={
<Image
src={face}
roundedCircle
className="profileImg"
></Image>
}
drop="left"
>
<NavDropdown.Item href="#action/3.1" className="dropdownItem">
<Profile className="marginRight" />
<span>Profile</span>
</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2" className="dropdownItem">
<Bookmark className="marginRight" />
<span>Bookmark</span>
</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3" className="dropdownItem">
<Setting className="marginRight" />
<span>Setting</span>
</NavDropdown.Item>
<NavDropdown.Item href="#action/3.4" className="dropdownItem">
<Switch className="marginRight" />
<span>Switch Account</span>
</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">Log Out</NavDropdown.Item>
</NavDropdown>
</Nav>
</div>
</Navbar>
header.scss
#mixin flex($justify: null, $align: null) {
display: flex;
justify-content: $justify;
align-items: $align;
}
.navbarContainer {
#include flex(center);
border-bottom: 1px solid #dbdbdb;
z-index: 200;
background-color: #fff;
.nav {
width: 940px;
display: flex;
justify-content: space-between;
align-items: center;
}
.searchBar {
height: 30px;
width: 220px;
background-color: #fafafa;
}
.navRight {
width: 225px;
display: flex;
justify-content: space-between;
}
.profileImg {
width: 25px;
height: 25px;
}
.dropdownItem {
#include flex(null, center);
.marginRight {
margin-right: 8px;
}
}
}
screen
enter image description here
I used a translator because I am not good at English. Please understand if the sentence is not good.
thank you
I found bootstrap class
Bootstrap can make layout using class.
https://getbootstrap.com/docs/4.0/utilities/flex/#enable-flex-behaviors
I modified the code
<Navbar
className="d-flex justify-content-center navbarContainer"
fixed="top"
>
I am building a React project. Within the projekt I am using React Popper 2 for dropdown menus. Great for auto positioning the dropdown menu when you are near the edges of the web browser, etc. I am also using React Transition Group / React CSStransition to make some animations. I am working with hooks in the project, no class components.
But I do not seem to be able to combine the both. Problem is that Popper enters and exits the dropdown menu. So CSStransition creates the classes as it should, but it does not work since they both enters and exits the element. And I have no clue how to resolve this.
References:
https://popper.js.org/
https://reactcommunity.org/react-transition-group/
This is the component atm:
<CSSTransition
classNames="popper-dd"
in={visible}
timeout={10000}
unmountOnExit
>
<div ref={popperElement}
onClick={() => autoclose!==false && setVisible(false)}
className={cn("Dropdown-tooltip", classes)}
style={{ ...styles.popper}}
{...attributes.popper}>
Test
<div className="cm-pos-dd-left bg-white absolute p-3 rounded-xl shadow z-20 text-black">
{children}
</div>
</div>
</CSSTransition>
I have also tried to place the CSStransition within the popperElement, but that does not do the trick.
Anyone have any clue how to get them both to work?
I did figure it out. It is maybe not the most beautiful solution, but it seems to work.
ReactJS:
<CSSTransition
in={visible}
classNames="popper-dd"
timeout={150}>
<div ref={popperElement}
onClick={() => autoclose!==false && setVisible(false)}
className={cn("popper-dd-init cm-pos-dd-left bg-white absolute p-3 rounded-xl shadow z-20 text-black Dropdown-tooltip", classes)}
style={{ ...styles.popper}}
{...attributes.popper}>
{children}
{/*<div ref={arrowElement} className="Dropdown-arrow" style={styles.arrow} />*/}
</div>
</CSSTransition>
CSS:
--popper-transition: margin-top .15s ease-in-out, opacity .15s ease-in-out;
--popper-top: -.5rem;
.popper-dd-init {
display: none;
}
.popper-dd-init.popper-dd-enter {
display: block;
pointer-events: none;
margin-top: var(--popper-top);
opacity: .5;
transition: var(--popper-transition);
}
.popper-dd-init.popper-dd-enter-active {
margin-top: 0;
opacity: 1;
pointer-events: auto;
}
.popper-dd-init.popper-dd-enter-done {
display: block;
}
.popper-dd-init.popper-dd-exit {
display: block;
margin-top: 0;
opacity: 1;
}
.popper-dd-exit-active {
pointer-events: none;
transition: var(--popper-transition);
margin-top: var(--popper-top) !important;
opacity: .5 !important;
}
.popper-dd-exit-done {
display: none;
}
I'm having this issue that I can't solve. It appeared a white space between my first and second components, and I just can't understand where it came from. Nothing shows in the inspector. Here it is:
I'll leave a pic of my Navbar and Home components source code, so you can have a better look. I found the issue in the Navbar, without this ISSUE part, it cleans the top:
import React from "react";
import { Nav, Navbar } from "react-bootstrap";
const NavBar = () => {
return (
<React.Fragment>
<Navbar sticky="top" color="dark">
<Navbar.Brand href="#home">LOGO</Navbar.Brand>
<Nav className="mr-auto">
<Nav.Link href="#about">ABOUT</Nav.Link>
<Nav.Link href="#community">COMMUNITY</Nav.Link>
<Nav.Link href="#location">LOCATION</Nav.Link>
<Nav.Link href="#menu">OUR MENU</Nav.Link>
<Nav.Link href="#recipes">RECIPES</Nav.Link>
</Nav>
<Nav className="ml-auto">
<Nav.Link href="#contact">CONTACT</Nav.Link>
<Nav.Link href="#login">LOGIN</Nav.Link>
</Nav>
</Navbar>
//ISSUE
<Nav className="middle-navbar">
<Nav.Link href="#">One</Nav.Link>
<Nav.Link href="#info" className="ml-auto">
REQUEST INFO
</Nav.Link>
</Nav>
//ISSUE
</React.Fragment>
);
};
export default NavBar;
And the Home:
import React from "react";
import { Container } from "react-bootstrap";
const Home = () => {
return (
<Container fluid id="home-container">
<h1>THE BEST FOODIE</h1>
<h1 id="foddie-title">EXPERIENCE</h1>
<h6>NOW IN LONDON</h6>
</Container>
);
};
export default Home;
And SCSS:
#import "_mixins";
#font-face {
font-family: "din";
src: local("din"), url(../fonts/DIN.ttf) format("truetype");
}
* {
font-family: "din", sans-serif;
}
//NAVBAR
.middle-navbar {
position: relative;
top: 50vh;
}
//HOME
#home-container {
background: url("../img/bg-pic.png");
background-size: cover;
font-size: 100em;
height: 100vh;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
Any help would be excellent :)