I am using React to build a Navbar with a Brand logo, Home, Profile, and contact button icons which when hovered upon would animate to their respective texts, 'Home', 'Profile', and 'Contact' respectively.
Currently, my icons are stacked up vertically and are beyond the boundaries of the NavBar and div elements. I have even tried react-bootstrap but am unable to get the desired output.
Here's what I did:
import { Link, NavLink } from 'react-router-dom'
import './index.scss'
import LogoS from '../../../assets/images/taha-logo1.png'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faEnvelope, faHome, faUser } from '#fortawesome/free-solid-svg-icons'
const NavBar = () => (
<div className='nav-bar'>
<Link className='logo' to='/'>
<img src={LogoS} alt="logo" />
</Link>
<nav>
<NavLink exact="true" activeclassname="active" to="/">
<FontAwesomeIcon icon={faHome} color="#4d4d4e" />
</NavLink>
<NavLink exact="true" activeclassname="active" className="about-link" to="/about">
<FontAwesomeIcon icon={faUser} color="#4d4d4e" />
</NavLink>
<NavLink exact="true" activeclassname="active" to="/contact">
<FontAwesomeIcon icon={faEnvelope} color="#4d4d4e" />
</NavLink>
</nav>
</div>
)
export default NavBar
The scss Code is:
.nav-bar{
background: #181818;
width: 100%;
height: 60px;
position: absolute;
top: 0;
z-index: 3;
min-width: 500px;
.logo{
display: block;
padding: 2px 0;
justify-content: left;
img{
display: block;
margin: 8px;
margin-left: 2%;
width: 24px;
height: 80%;
}
}
}
nav {
display: block;
text-align: center;
position: absolute;
height: 100%;
top: 50%;
margin-top: -120px;
width: 210px;
a{
font-size: 22px;
color: #4d4d4e;
display: block;
line-height: 51px;
position: relative;
text-decoration: none;
i{
transition: all 0.3s ease-out;
}
&:hover{
color: #ffd700;
svg{
opacity: 0;
}
&:after{
opacity: 1;
}
}
&:after{
content: '';
font-size: 9px;
letter-spacing: 2px;
position: absolute;
bottom: 0;
display: block;
height: 100%;
text-align: center;
opacity: 0;
transition: all 0.3s ease-out;
}
&:first-child{
&::after{
content: 'HOME';
}
}
}
}
Please help, I'm just learning how to make Cards using react js. below is the script. when I run it, the position of the card that should be on the right side is still on the left.
how to get div.card to be on the right side?
What's wrong with my code?
1. Services.jsx
import React from 'react'
import './Services.css'
import HeartEmoji from "../../img/heartemoji.png";
import Glasses from "../../img/glasses.png";
import Humble from "../../img/humble.png";
import Resume from './resume.pdf';
import Card from '../Card/Card';
import { themeContext } from '../../Context';
import { useContext } from 'react';
import { motion } from 'framer-motion';
const Services = () => {
const transition = {duration : 2, type: 'spring'}
const theme = useContext(themeContext);
const darkMode = theme.state.darkMode;
return (
<div className="services" id='Services'>
{/* left side */}
<div className="awesome">
<span style={{color: darkMode? 'white': ''}}>My Awesome</span>
<span>services</span>
<spane>
Lorem ispum is simpley dumy text of printing of printing Lorem
<br />
ispum is simpley dummy text of printing
</spane>
<a href={Resume} download>
<button className="button s-button">Download CV</button>
</a>
<div className="blur s-blur1" style={{ background: "#ABF1FF94" }}></div>
</div>
{/* right side */}
<div className="cards">
{/* first card */}
<motion.div
whileInView={{left: '14rem'}}
initial={{left: '25rem'}}
transition={transition}
style={{left: '14rem'}}
>
<Card
emoji = {HeartEmoji}
heading = {'Design'}
detail = {"Figma, Sketch, Photoshop, Adobe, Adobe xd"}
/>
</motion.div>
{/* second card */}
<motion.div
whileInView={{left: '14rem'}}
initial={{left: '25rem'}}
transition={transition}
style={{ top: "54rem", left: "10rem" }}
>
<Card
emoji={Glasses}
heading={"Developer"}
detail={"Html, Css, JavaScript, React"}
/>
</motion.div>
{/* 3rd card */}
<motion.div
whileInView={{left: '14rem'}}
initial={{left: '25rem'}}
transition={transition}
style={{ top: "60rem", left: "14rem" }}
>
<Card
emoji={Humble}
heading={"UI/UX"}
detail={
"Lorem ispum dummy text are usually use in section where baalabalalala thank you"
}
/>
</motion.div>
<div className="blur s-blur2" style={{ background: "var(--purple)"}}></div>
</div>
</div>
)
}
export default Services
2. Card.jsx
import React from 'react'
import './Card.css'
const Card = ({emoji, heading, detail}) => {
return (
<div className="card">
<img src={emoji} alt="" />
<span>{heading}</span>
<span>{detail}</span>
<button className="c-button">LEARN MORE</button>
</div>
)
}
export default Card
3. Services.css
.services {
padding: 0 3rem 0 3rem;
display: flex;
height: 90vh;
margin-bottom: 8rem;
margin-top: 9rem;
margin-bottom: 13rem;
}
.awesome{
display: flex;
flex-direction: column;
position: relative;
}
.awesome > :nth-child(1) {
color: var(--black);
font-size: 2.5rem;
font-weight: bold;
}
.awesome > :nth-child(2) {
color: var(--orange);
font-size: 2.5rem;
font-weight: bold;
}
.awesome > :nth-child(3) {
color: var(--gray);
font-size: 14px;
margin-top: 1rem;
}
.s-button{
width: 10rem;
height: 2.5rem;
margin-top: 1rem;
}
.cards>{
position: relative;
}
.cards>*{
position: absolute;
}
/* blur */
.s-blur2 {
left: 14rem;
top: 8rem;
}
.s-blur1 {
top: 13rem;
left: -18rem;
}
#media screen and (max-width: 480px) {
.services{
margin-top: 0;
flex-direction: column;
gap: 5rem;
height: 66rem;
padding: 0;
}
.cards{
display: flex;
flex-direction: column;
gap: 17rem;
}
.cards>*{
position: static;
}
}
4. Card.css
.card {
width: 10rem;
height: 13rem;
position: absolute;
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
width: 10rem;
text-align: center;
background: rgba(255, 255, 255, 0.26);
border: 7px solid var(--orangeCard);
box-shadow: var(--boxShadow);
border-radius: 20px;
padding: 0px 26px 2rem 26px;
}
.card span:nth-of-type(2) {
color: var(--gray);
font-size: 16px;
}
.card > img {
transform: scale(0.6);
margin-bottom: -2rem;
}
.c-button {
background: #ffffff;
box-shadow: 0px 19px 60px rgba(0, 0, 0, 0.08);
border-radius: 7px;
border: none;
padding: 10px;
font-size: 16px;
color: #5290FD;
}
#media screen and (max-width: 480px) {
.card{
width: auto;
}
}
i help you to solve the problem, first of all, you can use display flex on your parent and justify content between or evenly, in case of this the parent class is "services", so the code css for className="services" is :
.services {
padding: 0 3rem 0 3rem;
display: flex;
justify-content: evenly;
align-items: center;
height: 90vh;
margin-bottom: 8rem;
margin-top: 9rem;
margin-bottom: 13rem;
}
i hope this can help you :)
I developed a website using react js. But some pages don't work correctly. For example, the work page has to work like the below. When hovering the image, it has to changed the opacity and show the anchor tags (work page) :
But when I open the website for the first time, the hover effects and anchor tags are not visible. However, they are still clickable. It seems like this when I hover :
Finally, the page crashes after a while when I scroll through other pages and come back. First, elements fade and then disappear. At the end, I only get blank page. I also added how the crush pages look like (the Work and Skills pages):
But, when I refresh the website, it fixes again.
I get these errors:
Work.jsx file:
import React, { useState, useEffect } from 'react';
import { AiFillEye, AiFillGithub } from 'react-icons/ai';
import { motion } from 'framer-motion';
import { AppWrap, MotionWrap } from '../../wrapper';
import { urlFor, client } from '../../client';
import './Work.scss';
function Work() {
const [activeFilter, setActiveFilter] = useState('All');
const [animateCard, setAnimateCard] = useState({ y:0, opacity: 1 });
const [works, setWorks] = useState([]);
const [filterWork, setFilterWork] = useState([]);
useEffect(() => {
const query = '*[_type == "works"]'
client.fetch(query).then((data) => {
setWorks(data);
setFilterWork(data);
})
}, [])
const handleWorkFilter = (item) => {
setActiveFilter(item);
setAnimateCard([{ y:100, opacity:0 }])
setTimeout (() => {
setAnimateCard([{ y:0, opacity: 1}])
if(item === 'All') {
setFilterWork(works)
} else {
setFilterWork(works.filter((work) => work.tags.includes(item)))
}
},500)
}
return (
<>
<h2 className="head-text">MY PROJECTS</h2>
<div className='app__work-filter'>
{['UI/UX', 'REACT JS', 'HTML', 'JAVACRIPT', 'CSS', 'SCSS', 'ALL'].map((item, index) =>
<div
className={`app__work-filter-item app__flex p-text ${activeFilter === item ? "item-active" : ""}`}
key={index}
onClick={() => handleWorkFilter(item)}
>
{item}
</div>
)}
</div>
<motion.div
animate = {animateCard}
transition = {{ duration: 0.5, delayChildren: 0.5 }}
className = 'app__work-portfolio'
>
{filterWork.map((work, index) =>
<div className='app__work-item app__flex' key={index}>
<div className='app__work-img app__flex'>
<img src={urlFor(work.imgUrl)} alt={work.name} />
<motion.div
whileHover={{ opacity: [0,1]}}
transition={{ duration: 0.25, ease: 'easeInOut', staggerChildren: 0.5 }}
className='app__work-hover app__flex'
>
<a href={work.projectLink} target='_blank' rel='noreferrer'>
<motion.div
whileInView={{ scale: [0, 1]}}
whileHover={{ scale: [1, 0.9]}}
transition={{ duration: 0.25 }}
className='app__flex'
>
<AiFillEye />
</motion.div>
</a>
<a href={work.codeLink} target='_blank' rel='noreferrer'>
<motion.div
whileInView={{ scale: [0, 1]}}
whileHover={{ scale: [1, 0.9]}}
transition={{ duration: 0.25 }}
className='app__flex'
>
<AiFillGithub />
</motion.div>
</a>
</motion.div>
</div>
<div className='app__work-content app__flex'>
<h4 className='bold-text'>{work.title}</h4>
<p className='p-text-dark app__work-desc'>{work.description}</p>
<div className='app__work-tag app__flex'>
<p className='p-text-dark'>{work.tags[0]}</p>
</div>
</div>
</div>
)}
</motion.div>
</>
)
}
export default AppWrap(
MotionWrap(Work, 'app__works'),
'work',
'app__lightbluebg'
);
Work.scss file:
.app__works {
flex: 1;
width: 100%;
flex-direction: column;
}
.app__work-filter {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
margin: 4rem 0 2rem;
.app__work-filter-item {
padding: 0.5rem 1rem;
border-radius: 0.5rem;
background-color: var(--blue1-color);
font-weight: 800;
cursor: pointer;
transition: all 0.3s ease;
margin: 0.5rem;
&:hover {
background-color: var(--black-color);
color: #fff;
}
#media screen and (min-width: 2000px) {
padding: 1rem 2rem;
border-radius: 0.85rem;
}
}
.item-active {
background-color: var(--secondary-color);
color: #fff;
}
}
.app__work-portfolio {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
.app__work-item{
width: 290px;
flex-direction: column;
margin: 2rem;
padding: 1rem;
border-radius: 0.5rem;
background-color: var(--blue1-color);
color: #000;
cursor: pointer;
transition: all 0.3s ease;
z-index: 0;
&:hover {
box-shadow: 0 0 25px rgba(0,0,0,0.2);
}
#media screen and (min-width: 2000px) {
width: 470px;
padding: 1.25rem;
border-radius: 0.75rem;
}
#media screen and (max-width: 300px) {
width: 100%;
margin: 1rem;
}
}
}
.app__work-img {
width: 100%;
height: 230px;
position: relative;
img {
width: 100%;
height: 100%;
border-radius: 0.5rem;
object-fit: cover;
}
#media screen and (min-width: 2000px) {
height: 350px;
}
}
.app__work-hover {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
border-radius: 0.5rem;
opacity: 0;
transition: all 0.3s ease;
div {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgba(0,0,0,0.5);
color: white;
margin: 1rem;
font-family: var(--font-base);
font-weight: 800;
cursor: pointer;
transition: all 0.3s ease;
svg {
width: 50%;
height: 50%;
color: var(--white-color);
}
}
}
.app__work-content {
padding: 0.5rem;
width: 100%;
position: relative;
flex-direction: column;
h4 {
margin-top: 1rem;
line-height: 1.5;
}
.app__work-desc {
margin-top: 10px;
height: 35px;
}
.app__work-tag {
position: absolute;
padding: 0.5rem 1rem;
border-radius: 10px;
background-color: var(--blue1-color);
top: -25px;
}
}
Skills.jsx file:
import React, { useState, useEffect } from 'react';
import ReactToolTip from 'react-tooltip';
import { motion } from 'framer-motion';
import { AppWrap, MotionWrap } from '../../wrapper';
import { urlFor, client } from '../../client';
import ReactDOM from "react-dom";
import './Skills.scss';
function Skills() {
const [skills, setSkills] = useState([])
const [experiences, setExperiences] = useState([])
useEffect(() => {
const query = '*[_type == "experiences"]';
const skillsQuery = '*[_type == "skills"]';
client.fetch(skillsQuery).then((data) => {
setSkills(data);
})
client.fetch(query).then((data) => {
setExperiences(data);
})
}, [])
return (
<>
<h2 className="head-text">SKILLS & EXPERIENCE</h2>
<div className='app__skills-container'>
<motion.div className='app__skills-list'>
{skills?.map((skill, index) => (
<motion.div
whileInView={{opacity: [0, 1]}}
transition={{duration: 0.5}}
className='app__skills-item app__flex'
key={skill.name}
>
<div className='app__flex' style={{ backgroundColor: skill.bgColor }}>
<img src={urlFor(skill.icon)} alt={skill.name}/>
</div>
<p className='p-text'>{skill.name}</p>
</motion.div>
))}
</motion.div>
<motion.div className='app__experiences-list'>
{experiences?.map((experience) => (
<motion.div
className='app__experiences-item'
key={experience.year}
>
<div className='app__experiences-year'>
<p className='bold-text'>{experience.year}</p>
</div>
<motion.div
className='app__experiences-works'
>
{experience.works.map((work) => (
<>
<motion.div
whileInView={{opacity: [0, 1]}}
transition={{duration: 0.5}}
className='app__experiences-work-item'
data-tip
data-for={work.name}
key={work.name}
>
<h4 className='bold-text'>{work.name}</h4>
<p className='p-text-dark'>{work.company}</p>
</motion.div>
<ReactToolTip
id = {work.name}
effect = 'solid'
arrowColor = '#fff'
className = 'skills-tooltip'
>
{work.desc}
</ReactToolTip>
</>
))}
</motion.div>
</motion.div>
))}
</motion.div>
</div>
</>
)
}
export default AppWrap(
MotionWrap(Skills, 'app__skills'),
'skills',
'app__darkbluebg'
);
Skills.scss file:
.app__skills {
flex: 1;
width: 100%;
flex-direction: column;
}
.app__skills-container {
width: 100%;
margin-top: 3rem;
display: flex;
flex-direction: row;
#media screen and (max-width: 900px) {
width: 100%;
flex-direction: column;
}
}
.app__skills-list {
flex: 1;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
margin-right: 5rem;
#media screen and (max-width: 900px) {
margin-right: 0;
justify-content: center;
align-items: center;
}
}
.app__skills-item {
flex-direction: column;
text-align: center;
margin: 1rem;
transition: all 0.3s ease-in-out;
div {
width: 90px;
height: 90px;
border-radius: 50%;
background-color: var(--blue1-color);
img {
width: 50%;
height: 50%;
}
&:hover {
box-shadow: 0 0 15px rgba(0,0,0,0.7);
}
}
#media screen and (min-width: 2000px) {
width: 150px;
height: 150px;
}
p {
font-weight: 500;
margin-top: 0.5rem;
}
#media screen and (min-width: 2000px) {
margin: 1rem 2rem;
p {
margin-top: 1rem;
}
}
}
.app__experiences-list {
flex: 1;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
#media screen and (max-width: 900px) {
margin-top: 2rem;
}
}
.app__experiences-item {
width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
margin: 1rem 0;
}
.app__experiences-works {
flex: 1;
.app__experiences-work-item {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
margin-bottom: 1rem;
cursor: pointer;
h4 {
font-weight: 500;
}
p {
font-size: 0.8rem;
margin-top: 5px;
}
}
}
.app__experiences-year {
margin-right: 2rem;
p {
font-weight: 800;
}
#media screen and (max-width: 450px) {
margin-right: 1rem;
}
}
.skills-tooltip {
max-width: 300px !important;
background-color: var(--white-color) !important;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.1) !important;
border-radius: 5px !important;
padding: 1rem !important;
color: var(--gray-color) !important;
text-align: center !important;
line-height: 1.5 !important;
opacity: 1 !important;
#media screen and (min-width: 2000px) {
font-size: 1.75rem !important;
max-width: 500px !important;
line-height: 2 !important;
}
}
Appwrap.js file:
import { color } from '#mui/system';
import React from 'react';
import { NavigationDots, SocialMedia } from '../components';
const AppWrap = (Component, idName, classNames) => function HOC() {
return (
<div id={idName} className={`app__container ${classNames}`}>
<SocialMedia />
<div className='app__wrapper app__flex'>
<Component />
<div className='copyright'>
<p className='p-text'>#2022 AYGEN</p>
<p className='p-text'>All rights reserved</p>
</div>
</div>
<NavigationDots active={idName} />
</div>
)
}
export default AppWrap;
MotionWrap.js file:
import React from 'react';
import { motion } from 'framer-motion';
const MotionWrap = (Component, classNames) => function HOC() {
return (
<motion.div
whileInView={{ y: [100, 50, 0], opacity: [0, 0, 1] }}
transition={{ duration: 0.5 }}
className={`${classNames} app__flex`}
>
<Component />
</motion.div>
)
}
export default MotionWrap
I hope I can explain this clearly. Thanks in advance!
I'm trying to make this component:
This is the component now :
Until now I succeeded to make with activeClassName the text to be colored blue when I'm on the right link. But I want also to have a point under the text every time I stay on that link ... I don;t know exact how to do that .
Below I will leave the code for you to understand what I did until now and what I suppose to do to make this work..
import { FC } from "react";
import { NavLink } from "react-router-dom";
// import observer from "mobx-react-lite"
import "./Navigation.css";
export const Navigation: FC = () => {
return (
<div className="nav">
<div className="logo">
<svg className="logo-image"></svg>
</div>
<div className="Center-links">
<ul className="pages">
<NavLink exact to="/" activeClassName="ceva" className="text">
<li className="row">Home</li>
</NavLink>
<NavLink to="/Bim" activeClassName="ceva" className="text">
<li className="row">Bim 2021</li>
</NavLink>
<NavLink to="/Regulations" activeClassName="ceva" className="text">
<li className="row">Regulations</li>
</NavLink>
<NavLink to="/History" activeClassName="ceva" className="text">
<li className="row">History</li>
</NavLink>
</ul>
</div>
<div className="Buttons-Right">
<h1>Button1</h1>
<h1>Button2</h1>
</div>
</div>
);
};
export default Navigation;
.logo-image {
mask: url("../assets/Images/logo.svg");
background-color: black;
width: 100px;
height: 65px;
margin: auto;
}
.nav {
height: 10vh;
width: 100%;
background: #6e68a7;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.logo {
height: 100%;
width: 20%;
display: flex;
justify-content: center;
align-items: center;
}
.Center-links {
height: 100%;
width: 60%;
display: flex;
justify-content: space-around;
align-items: center;
}
.pages {
display: flex;
justify-content: space-around;
align-items: center;
height: 100%;
width: 50%;
}
.Buttons-Right {
width: 20%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
.ceva {
color: #33c9d3;
}
.text {
text-decoration: none;
}
.row {
list-style: none;
font-family: Poppins;
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 24px;
}
You can do something like this:
li.row.active{
position:relative;
}
li.row.active::before{
content: ' ';
z-index: 999;
position: absolute;
bottom: 0;
right:50%;
width:4px;
height:4px;
background-color: red;
border-radius: 999px;
}
ul {
list-style: none;
}
li {
display: inline;
padding:5px;
}
<ul>
<li class="row active">
test 1
<li>
<li class="row">
test 2
<li>
<ul>
The overflow x in my react Navbar not working as expected. The navbar is meant to slide in only when the Hamburger is clicked and not to show when not clicked. Everything works well except the fact that the overflow X that was supposed to hide keeps scrolling. Have tried a few things but yet not working.
Here is the link to the CodeSandbox
My Navbar and my CSS code are here below. Kindly help me look into this.
import React, { useState } from "react";
import { IconContext } from "react-icons";
import { MdMenu } from "react-icons/md";
// import { MdClose } from "react-icons/md";
export default function Navbar() {
const[navLinkOpen, navLinkToggle] = useState(false)
const handleNavLinksToggle = () =>{
navLinkToggle(!navLinkOpen)
}
const renderClasses = () =>{
let classes = "navlinks";
if(navLinkOpen){
classes += " active"
}
return classes;
}
return (
<div>
<div className="container">
<nav>
<div className="logo">
Edie
</div>
<ul className={renderClasses()}>
<li className="link"> Home </li>
<li className="link"> Services </li>
<li className="link"> Our Works </li>
<li className="link"> Clients </li>
<li className="link"> Contacts </li>
</ul>
<IconContext.Provider value={{ color: "#000000", size: "30px", className: "icon" }}>
<div onClick={handleNavLinksToggle} className="hamburger-toggle">
<MdMenu/>
</div>
</IconContext.Provider>
</nav>
</div>
</div>
)
}
CSS
#import url('https://fonts.googleapis.com/css2?family=Heebo&family=Poppins&display=swap');
nav{
display: flex;
justify-content: space-between;
align-items: center;
}
.navlinks{
display: flex;
justify-content: space-evenly;
width: 50%;
align-items: center;
}
.logo{
width: 70px;
height: 53px;
}
.logo > a{
font-family: 'Heebo', sans-serif;
text-decoration: none;
font-style: normal;
font-weight: 800;
font-size: 36px;
line-height: 53px;
color: #333333;
}
.navlinks > li > a{
text-decoration: none;
font-family: 'Poppins', sans-serif;
font-style: normal;
font-weight: 500;
font-size: 24px;
line-height: 36px;
color: #333333;
}
.hamburger-toggle{
cursor: pointer;
display: none;
}
#media screen and (max-width: 1024px){
body{
overflow-x: hidden;
}
.hamburger-toggle{
display: block;
}
.navlinks{
display: none;
position: absolute;
right: 0;
display: flex;
flex-direction: column;
height: 92vh;
align-items: center;
width: 100%;
top: 10vh;
background-color: red;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.active{
transform: translateX(0%);
}
}
For that you can use the position relative and additional width for html and body in global css.
It appears that browsers that parse the tag simply ignore overflow attributes on the html and body tags.
on Global CSS
html, body{
width: 100%;
position: relative;
}