Hoping to get some help on an issue I have been having in Next js. I am using Fontawesome-react package for icon imports which is working fine but when I attempt to load in a google font style sheet into the head of my main component, it changes the fonts but makes the font awesome icons disappear. I have tried a couple of different solutions such as loading the font locally and utilizing _document and _app components but none fix the issue I am having. Everything ends up changing the font but still gets rid of all the font awesome icons from every part of my app. I will copy in the Nav component I have and the Layout component that holds everything.
Thank you for any help!
import React from 'react'
import Nav from './nav/Nav'
import Head from 'next/head'
import Footer from './Footer'
type Props = {
title?: string
}
const Layout: React.FC<Props> = ({ children, title = 'Macros' }) => {
return (
<div>
<Head>
<title>{title}</title>
<link
href="https://fonts.googleapis.com/css?family=Darker+Grotesque&display=swap"
rel="stylesheet"
/>
</Head>
<Nav />
<div id="pageContent">{children}</div>
<Footer />
<style jsx global>{`
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5 {
font-weight: lighter;
font-family: 'Darker Grotesque', sans-serif;
}
#pageContent {
padding: 8rem 1rem;
}
`}</style>
</div>
)
}
export default Layout
import React, { useState } from 'react'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faBars, faSearch, faPlus } from '#fortawesome/free-solid-svg-icons'
import Link from 'next/link'
const NavBar: React.FC = () => {
const [navBarStatus, isOpen] = useState<Boolean>(false)
const toggleMenu = () => {
isOpen(navBarStatus ? false : true)
}
return (
<nav id="navContainer">
<div id="mobileNav">
<ul id="navBarTop">
<li>
<button type="button" className="navIcon" onClick={toggleMenu}>
<FontAwesomeIcon icon={faBars} />
</button>
</li>
<li>
<Link href="/">
<a>
<h3>Macro</h3>
</a>
</Link>
</li>
<li>
<button type="button" className="navIcon">
<FontAwesomeIcon icon={faSearch} />
</button>
</li>
</ul>
<ul id="navbarBottom">
<li>Top</li>
<li>New</li>
<li>Protein</li>
<li>Carbs</li>
<li>Fats</li>
</ul>
</div>
<div id="appDrawer">
<ul id="topIcons">
<li>
<button type="button" className="navIcon" onClick={toggleMenu}>
<FontAwesomeIcon icon={faBars} />
</button>
</li>
<li>
<button type="button" className="navIcon">
<FontAwesomeIcon icon={faPlus} />
</button>
</li>
</ul>
<nav>
<ul id="menuList">
<Link href="/">
<a>
<p>Home</p>
</a>
</Link>
<Link href="/">
<a>Favorites</a>
</Link>
<Link href="/">
<a>Notifications</a>
</Link>
<Link href="/">
<a>Login/Sign up</a>
</Link>
</ul>
</nav>
</div>
<style jsx>{`
#navContainer {
background-color: #504761;
color: white;
position: fixed;
width: 100%;
}
#navContainer a {
text-decoration: none;
color: white;
}
#mobileNav {
display: ${navBarStatus ? 'none' : ''};
}
#navBarTop {
color: white;
display: flex;
justify-content: space-between;
list-style: none;
padding: 1rem 1rem 0.5rem 1rem;
font-size: 1.5rem;
}
.navIcon {
color: white;
border: none;
background-color: #504761;
font-size: 1.5rem;
}
#navbarBottom {
display: flex;
list-style: none;
justify-content: space-evenly;
padding: 1rem 0;
}
#appDrawer {
display: ${navBarStatus ? 'block' : 'none'};
background-color: #504761;
height: 100vh;
}
#topIcons {
display: flex;
justify-content: space-between;
list-style: none;
padding: 1rem;
font-size: 1.5rem;
}
#menuList {
padding: 2rem 0 2rem 1rem;
display: flex;
flex-direction: column;
}
#menuList a {
font-size: 2rem;
margin: 1rem 0;
}
`}</style>
</nav>
)
}
export default NavBar
Related
I set up a list of React Link tags in my website and when one gets clicked on, it should immediately automatically scroll down to the section the user clicks on. That works, however, for whatever reason there's about a 1-2 second delay before this action actually occurs after a click. I've been trying to figure out what is causing this but I can't figure out what the problem is.
Here is the NavBar component:
import React from "react";
import { Link } from 'react-scroll';
import { FaBars, FaTimes } from 'react-icons/fa';
import { useState, useEffect } from "react";
import './Navbar.css';
const Navbar = () => {
const [click, setClick] = useState(false);
const handleClick = () => setClick(!click);
const closeMenu = () => setClick(false);
const [fix, setFix] = useState(window.scrollY >= 950);
useEffect(() => {
const setFixed = () => {
setFix(window.scrollY >= 950);
};
window.addEventListener("scroll", setFixed);
return () => {
window.removeEventListener("scroll", setFixed);
};
}, []);
return (
<div className={fix ? 'header active' : 'header'}>
<nav className={fix ? 'navbar fixed' : 'navbar'}>
<div className='hamburger' onClick={handleClick}>
{click ? (<FaTimes size={30} style={{ color: '#ffffff' }} />)
: (<FaBars size={30} style={{ color: '#ffffff' }} />)}
</div>
<ul className={click ? "nav-menu active" : "nav-menu"}>
<li className='nav-item'>
<Link to="header" spy={true} smooth={true} offset={-100} onClick={closeMenu}>Home</Link>
</li>
<li className='nav-item'>
<Link to="aboutMe" spy={true} smooth={true} offset={-100} onClick={closeMenu}>About</Link>
</li>
<li className='nav-item'>
<Link to="portfolio" spy={true} smooth={true} offset={-100} onClick={closeMenu}>Projects</Link>
</li>
<li className='nav-item'>
<Link to="resume" spy={true} smooth={true} offset={-100} onClick={closeMenu}>Resume</Link>
</li>
</ul>
</nav>
</div>
)
}
export default Navbar;
Here is the css for the NavBar component:
.header {
position: fixed;
height: 90px;
width: 100%;
top: 0;
left: 0;
z-index: 1;
transition: .3s ease-in;
overflow: hidden;
background-color: transparent;
}
.header.active {
background-color: rgba(0,0,0,.9);
}
.header .navbar {
display: flex;
justify-content: center;
align-items: center;
margin: auto;
height: 100%;
padding: 0 1rem;
}
.header .nav-menu a {
color: #ffffff;
}
.header .nav-menu {
display: flex;
}
.header .nav-item {
padding: 1rem;
font-weight: 500;
}
.header .nav-item a:hover {
padding-bottom: 4px;
color: #d4af37;
cursor: pointer;
}
.nav-menu a.active {
color: #d4af37;
text-decoration: none;
}
.hamburger {
display: none;
}
.nav-item {
list-style: none;
}
#homeLink {
text-decoration: none;
}
#media screen and (max-width:940px) {
.header {
max-width: 100%;
background-color: rgba(0,0,0,.9);
}
.header .navbar {
max-width: 100%;
justify-content: space-between;
}
.hamburger {
display: block;
}
.nav-menu {
position: fixed;
left: -100%;
top: 90px;
flex-direction: column;
background-color: rgba(0,0,0,.9);
width: 100%;
height: 90vh;
z-index: 999;
text-align: center;
transition: .3s;
}
.nav-menu.active {
left: 0;
}
.nav-item {
margin: 1.5rem 0;
}
.header .navbar img {
width: 150px;
}
}
Played around with it a bit more. I found that the smooth={true} prop in the Link tags was what slowed it down. Not entirely sure why that was the case, but removing it made my navbar work as intended.
I'm importing this navbar component into an astro file, the component shows up on the page but the but the styling from styled-component is not working and it is throwing an error in my code editor that says:
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
import React from 'react';
import { useState } from 'react';
import styled from 'styled-components'
import { AiOutlineClose, AiOutlineMenu } from 'react-icons/Ai'
import { Link } from 'react-scroll';
function Navigation() {
const [navb, setNavb] = useState(true);
const handleClick = () => setNavb(!navb) ;
const [click, setClick] = useState(true)
const handleMenu= () => setNavb(!navb)
const iconStyle = {width: "30px" , height:"30px", color: "#ffffff", }
const linkStyleDesktop = { color: "#000000", padding: "0 10px ", cursor: "pointer"}
const linkStyleMobile = { color: "#ffffff", padding: "30px 0", fontSize: "1.5rem", cursor: "pointer"}
return (
<Header className = "style">
<Container>
LOGO
<Nav className="desktop-nav">
<div className="desktop-navItems" >
<Link style = {linkStyleDesktop} to="/" smooth={true} duration={500}>
Home
</Link>
<Link style = {linkStyleDesktop} to="about" smooth={true} duration={500}>
About
</Link>
<Link style = {linkStyleDesktop} to="portfolio" smooth={true} duration={500}>
Portfolio
</Link>
<Link style = {linkStyleDesktop} to="footer" smooth={true} duration={500}>
Contact
</Link>
</div>
</Nav>
<button className = "btn" onClick = {handleClick}> {!navb ? <AiOutlineClose style={iconStyle}/>: <AiOutlineMenu style={iconStyle} /> }
</button>
</Container>
<Nav className="mobile-nav">
<div className={!navb || !click ? 'display-mobile-nav' : 'display-none'} >
<Link onClick={handleMenu} style = {linkStyleMobile} to="app" smooth={true} duration={500}>
Home
</Link>
<Link onClick={handleMenu} style = {linkStyleMobile}to="about" smooth={true} duration={500}>
About
</Link>
<Link onClick={handleMenu} style = {linkStyleMobile} to="portfolio" smooth={true} duration={500}>
Portfolio
</Link>
<Link onClick={handleMenu} style = {linkStyleMobile} to="footer" smooth={true} duration={500}>
Contact
</Link>
</div>
</Nav>
</Header>
)
}
export default Navigation;
const Header = styled.header`
background-color: #262b33;
padding: 1rem 0;
width: 100vw;
position:fixed;
z-index: 999;
.display-mobile-nav {
display: block;
}
.display-none{
display: none;
}
.desktop-nav {
display: none;
}
.mobile-nav {
.display-mobile-nav {
display:flex;
flex-direction: column;
align-items: center;
box-shadow: 10px 10px 5px 0px rgba(189,189,189,0.75);
-webkit-box-shadow: 10px 10px 5px 0px rgba(189,189,189,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(189,189,189,0.75);
transition: opacity 5s ease-in;
}
}
`;
//container for desktop nav
const Container = styled.div`
display: flex;
justify-content: space-between;
align-items: center;
padding:0 8rem;
font-family:Arial, Helvetica, sans-serif;
#media (max-width: 1200px){
padding: 1rem 1rem;
}
a {
color: #ffffff;
}
button {
background-color: transparent;
border: none;
}
#media (min-width: 800px){
.desktop-nav {
display: block;
}
.btn {
display: none
}
.mobile-nav {
display: none;
.display-mobile-nav {
display: none;
}
}
}
`
const Nav = styled.div`
.desktop-navItems {
display: flex;
li {
padding: 0 10px;
}
}
#media (min-width: 800px){
.mobile-nav {
display: block;
}
`;
Warning: Invalid hook call....
To resolve this error modify the first line of your code to;
export default function Navigation() {
and remove the default function export referenced lower in the code.
I haven't yet figured out why but astro.js seems to take issue
with naming convention for default exports on functional components.
I can't resolve the styling issue unfortunately.
<header>
<div class="max-width">
<h1>
<a href="./">
<img src="./assets/Logo.svg" alt="My Blog" />
</a>
</h1>
<ul>
<li class="profile-img">
<a href="#">
<img src="./assets/profile.jpg" alt="My Page" />
</a>
</li>
<li>
<a href="#" class="button">
<img src="./assets/icon-modify-white.svg" alt="" />
<span>Write</span>
</a>
</li>
<li>
<button class="button white">
<img src="./assets/icon-logout.svg" alt="" />
<span>Logout</span>
</button>
</li>
<li>
<a href="#" class="button gray">
<img src="./assets/icon-login.svg" alt="" />
<span>Login</span>
</a>
</li>
</div>
</header>
header {
background: var(--white-color);
}
header .max-width {
display: flex;
align-items: center;
justify-content: space-between;
gap: 4rem;
padding: 1rem 0;
}
header h1 {
font-size: 3rem;
}
header h1 a {
display: block;
padding: 0.4rem;
margin-left: -0.4rem;
}
header h1 a img {
display: block;
}
header ul {
display: flex;
align-items: center;
gap: 1rem;
}
.profile-img a {
width: 4.4rem;
height: 4.4rem;
display: block;
border-radius: 50%;
}
.profile-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
header .button {
text-transform: none;
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
height: 4rem;
padding: 0.2rem 1.2em 0;
border: 0;
border-radius: var(--border-radius);
background: var(--main-color);
color: var(--white-color);
text-transform: uppercase;
font-weight: bold;
line-height: 1;
}
.button img {
height: 1.2em;
margin-top: -0.2rem;
vertical-align: middle;
}
.button.gray {
background: var(--gray-background);
color: var(--black-color);
}
.button.white {
padding: 0.2rem 0.8em 0;
background: var(--white-color);
color: var(--black-color);
}
.button.white img {
height: 1.4em;
}
I'm trying to switch the HTML, CSS codes above to React Components with styled-components.
Developing into React components, I've had a Button component which is either a button or an a element and has the same className button
I have the similar issue with Styled Components - two different elements with the same styles and tried with the answer on it but didn't work so I posted a question.
Below is what I switched with the answer.
Header.jsx
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import {
HeaderContainer,
MaxWidth,
H1,
NavMyBlog,
Ul,
ProfileImg,
} from './Header.element'
import {
Button,
BtnGrey,
BtnWhite,
} from '../Button/Button'
export default function Header() {
return (
<HeaderContainer>
<MaxWidth>
<H1>
<NavMyBlog to="./">
<img src={require("../../assets/Logo.svg").default} alt="My Blog" />
</NavMyBlog>
</H1>
<Ul>
{/* <!-- 로그인 --> */}
<ProfileImg>
<Link to="#">
<img src={require("../../assets/profile.jpg").default} alt="My Page" />
</Link>
</ProfileImg>
<li>
<Link to="#" className="button">
<img src={require("../../assets/icon-modify-white.svg").default} alt="" />
<span>Write</span>
</Link>
</li>
<li>
<BtnWhite className="button white">
<img src={require("../../assets/icon-logout.svg").default} alt="" />
<span>Logout</span>
</BtnWhite>
</li>
{/* <!-- //로그인 --> */}
{/* <!-- 로그아웃 --> */}
<li>
<BtnGrey to="#" className="button gray">
<img src={require("../../assets/icon-login.svg").default} alt="" />
<span>Login</span>
</BtnGrey>
</li>
<li class="only-pc">
<a href="#" className="button gray">
<img src={require("../../assets/icon-register.svg").default} alt="" />
<span>Register</span>
</a>
</li>
{/* <!--// 로그아웃 --> */}
</Ul>
</MaxWidth>
</HeaderContainer>
)
}
Header.element.jsx
import styled from 'styled-components'
import { Link } from 'react-router-dom';
export const HeaderContainer = styled.header`
background: var(--white-color);
&.button {
text-transform: none;
}
`
export const MaxWidth = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
gap: 4rem;
padding: 1rem 0;
`
export const H1 = styled.h1`
font-size: 3rem;
`
export const NavMyBlog = styled(Link)`
display: block;
padding: 0.4rem;
margin-left: -0.4rem;
img{
display: block;
}
`
export const Ul = styled.ul`
display: flex;
align-items: center;
gap: 1rem;
`
export const ProfileImg = styled.li`
Link{
width: 4.4rem;
height: 4.4rem;
display: block;
border-radius: 50%;
}
img{
width: 100%;
height: 100%;
object-fit: cover;
}
`
Button.jsx
import styled, { css } from 'styled-components'
import { Link } from 'react-router-dom';
export const Button = css`
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
height: 4rem;
padding: 0.2rem 1.2em 0;
border: 0;
border-radius: var(--border-radius);
background: var(--main-color);
color: var(--white-color);
text-transform: uppercase;
font-weight: bold;
line-height: 1;
img {
height: 1.2em;
margin-top: -0.2rem;
vertical-align: middle;
}
`
export const BtnGrey = styled(Link)`
background: var(--gray-background);
color: var(--black-color);
`
export const BtnWhite = styled.button`
${Button}
padding: 0.2rem 0.8em 0;
background: var(--white-color);
color: var(--black-color);
img {
height: 1.4em;
}
`
I can't resolve this warning :
react-dom.development.js?ac89:67 Warning: Expected server HTML to contain a matching <i> in <a>.
at i
at a
at span
at footer
at div
Here is the component from which this warning originates:
import Head from 'next/head';
import Navbar from '../navbar/Navbar';
import React, { Component } from 'react';
import { initGA, logPageView } from '../../utils/analytics/analytics.js';
export default class Layout extends React.Component<{ title: string }> {
constructor(props) {
super(props);
}
componentDidMount() {
if (!window.GA_INITIALIZED) {
initGA();
window.GA_INITIALIZED = true;
}
logPageView();
}
render() {
return (
<>
<div>
<Head>
<title>{this.props.title}</title>
<link
rel="shortcut icon"
type="image/png"
href="/images/favicon.ico"
/>
<meta charSet="utf-8" />
<meta
name="viewport"
content="initial-scale=1.0, width=device-width"
/>
<link
href="https://fonts.googleapis.com/css?family=Bellota"
rel="stylesheet"
/>
</Head>
<header>{/* <span></span> */}</header>
<Navbar></Navbar>
{this.props.children}
<footer>
<span>Ricotec #Inc</span>
<span className="linkedIn">
<a href="//www.linkedin.com/in/radoslav-marinov-problem-solver/">
<i className="fab fa-linkedin-in fa-2x"></i>
</a>
</span>
</footer>
<style jsx global>{`
* {
box-sizing: border-box;
}
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
sans-serif;
}
footer {
display: flex;
justify-content: center;
padding: 2em 0;
align-items: center;
}
hr {
padding: 0;
border-top: 0;
border-color: #ccc;
}
.fa-linkedin-in {
color: #0a66c2;
width: 26px;
}
.linkedIn {
margin: 0 1em;
}
`}</style>
</div>
</>
);
}
}
Please note that the warning comes from this part:
<a href="//www.linkedin.com/in/radoslav-marinov-problem-solver/">
<i className="fab fa-linkedin-in fa-2x"></i>
</a>
If I replace className="fab fa-linkedin-in fa-2x" with className="" the warning disappears. Something seems wrong with FontAwesome and Next.js' compatibility.
I am trying to get my footer to stick to the bottom and not cover any body elements toward the bottom of the screen and I cannot seem to figure it out. Here is my footer.js
import React from "react";
import './Stylesheets/Footer.css';
import NavbarBrand from 'react-bootstrap/NavbarBrand';
import Navbar from 'react-bootstrap/Navbar';
import Container from 'react-bootstrap/Container';
class Footer extends React.Component {
state = { clicked: false }
handleClick = () => {
this.setState({ clicked: !this.state.clicked })
}
render() {
return (
<footer className="footerItems">
<div className="phantom"></div>
<div>
<Navbar>
<Container>
<NavbarBrand className="wrapper">
<i class="fab fa-2x fa-github"></i>
<i class="fab fa-2x fa-facebook-square"></i>
<i class="fab fa-2x fa-twitter-square"></i>
<i class="fab fa-2x fa-instagram"></i>
</NavbarBrand>
</Container>
</Navbar>
</div>
</footer>
)
}
}
export default Footer
I am trying to use a phantom <div> to force some additional spacing but that is not working. Here is the corresponding css file.
footer {
height: 80px;
margin-top: -200px;
bottom: 0;
z-index: 999;
}
.phantom {
display: 'block';
padding: '20px';
height: '60px';
width: '100%';
}
.footerItems {
position: fixed;
width: 100%;
background: linear-gradient(90deg, rgb(110, 94, 254) 0%, rgba(73, 63, 252, 1) 100%);
display: flex;
justify-content: center;
}
.wrapper {
align-items: center;
height: 100vh;
}
.wrapper i {
padding: 10px;
text-shadow: 0px 6px 8px rgba(0, 0, 0, 0.6);
transition: all ease-in-out 150ms;
}
.wrapper a:nth-child(1) {
color: #080202;
}
.wrapper a:nth-child(2) {
color: white;
}
.wrapper a:nth-child(3) {
color: #1DA1F2;
}
.wrapper a:nth-child(4){
color: #f24f1d;
}
.wrapper i:hover {
margin-top: -3px;
text-shadow: 0px 14px 10px rgba(0, 0, 0, 0.4);
}
Any thoughts or suggestions??
THANK YOU
Here's a solution using position: sticky. The main things to note here is that the main div needs to be at least the height of the page, that way the top property can force it to the bottom. The bottom property then forces it to stay at the bottom even if scrolled past.
This doesn't remove the footer from affecting the height of the page, so it'll all be scrollable without issue.
The other thing to note is that this solution (as written) is based on knowing the height of the footer in advance, so I put a custom css property --footer-height: 60px to set that.
I'm not really sure why the icons and things don't show on the footer as given, but that's a different question
const { NavbarBrand, Navbar, Container } = ReactBootstrap;
class Footer extends React.Component {
state = {
clicked: false,
};
handleClick = () => {
this.setState({
clicked: !this.state.clicked,
});
};
render() {
return (
<footer className="footerItems">
<div className="phantom"> </div>
<div>
<Navbar>
<Container>
<NavbarBrand className="wrapper">
<a href="http://www.github.com" target="_blank">
<i class="fab fa-2x fa-github"> </i>
</a>
<a href="http://www.facebook.com" target="_blank">
<i class="fab fa-2x fa-facebook-square"> </i>
</a>
<a href="http://www.twitter.com" target="_blank">
<i class="fab fa-2x fa-twitter-square"> </i>
</a>
<a href="http://www.instagram.com" target="_blank">
<i class="fab fa-2x fa-instagram"> </i>
</a>
</NavbarBrand>
</Container>
</Navbar>
</div>
</footer>
);
}
}
ReactDOM.render(
<div className="main">
<div className="content">Content!</div> <Footer />
</div>,
document.getElementById('root')
);
.main {
min-height: 100vh;
--footer-height: 60px;
}
.content {
height: 100vh;
background: linear-gradient(0deg, green 0%, white 100%);
}
footer {
height: var(--footer-height);
position: sticky;
top: calc(100vh - var(--footer-height));
bottom: 0;
}
.phantom {
display: block;
padding: 20px;
height: var(--footer-height);
width: 100%;
}
.footerItems {
/*position: fixed;*/
width: 100%;
background: linear-gradient(90deg, rgb(110, 94, 254) 0%, rgba(73, 63, 252, 1) 100%);
display: flex;
justify-content: center;
}
.wrapper {
align-items: center;
/*height: 100vh*/
;
}
.wrapper i {
padding: 10px;
text-shadow: 0px 6px 8px rgba(0, 0, 0, 0.6);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />
<script src="https://unpkg.com/react-bootstrap#next/dist/react-bootstrap.min.js" crossorigin></script>
<div id="root" />