I don't know why when i click on the About icon (or other icons in the menu bar), I get the text under my NavBar instead of having it next to it.
The NavBar.jsx component:
import './NavBar.css'
import logo from "../Components/logo";
import { ITEMS } from "../Navigation";
import React from 'react'
export default function NavBar() {
return (
<div className="NavBar">
<img className="logo" />
<span className="textLogo">LOGO</span>
<div className ="NavbarList">
{ITEMS.map((item, i) => {
return (
<li key={i} className="row" id={window.location.pathname === item.href ? "active" : ""}
onClick={() => {window.location.pathname = item.href;}}>
<div id="icon">{item.icon}</div>
<div id="title">{item.title}</div>
</li>
);
})}
</div>
</div>
);
}
My NavBar.css :
.NavBar{
width: 15rem;
height: 100vh;
padding-top: 1rem;
padding-bottom: 1rem;
--tw-bg-opacity: 1;
background-color: rgb(35,37,79);
flex-direction: column;
gap: 1.25rem
}
.NavbarList{
padding-top:20px;
}
...
And here the picture of what i get (there are other icons above About):
(I'm not able to put all the css file, because it says "too many codes")
Related
I am trying to make hamburger menu. I need the styled components to take the info from the state to toggle the menu and it's not happening.
I want that when I click on the open image the sidebar appears and when I click on the close image it disappear.
My Navigation components
import Nav from '../Nav'
import Sidebar from '../Sidebar'
import React, { useState } from 'react'
export const Navigation = () => {
const [isOpen, setIsOpen] = useState(false);
function toggle(){
setIsOpen(!isOpen)
console.log(isOpen)
}
return (
<>
<Sidebar isOpen={isOpen} toggle={toggle}/>
<Nav isOpen={isOpen} toggle={toggle} />
</>
)
}
export default Navigation
The sidebar
import React from 'react'
import { SideContainer, SideList, SideItem,SideTop,SideLogo,SideClose,SideWrapper } from './SidebarElements'
import Logo from '../../assets/shared/desktop/logo.svg'
import close from '../../assets/shared/mobile/icon-close.svg'
const Sidebar = ({isOpen, toggle}) => {
return (
<SideWrapper>
<SideContainer>
<SideTop>
<SideLogo src={Logo} alt="logo" />
<SideClose src={close} isOpen={isOpen} onClick={toggle} alt="close-logo"/>
</SideTop>
<SideList>
<SideItem>HOME </SideItem>
<SideItem>ABOUT US </SideItem>
<SideItem>CREATE YOUR PLAN </SideItem>
</SideList>
</SideContainer>
</SideWrapper>
)
}
export default Sidebar
import styled from 'styled-components';
export const SideWrapper = styled.div`
#media screen and (min-width: 768px) {
display: none;
}
background: white;
position: absolute;
z-index: 999;
top: 0;
justify-content: center;
align-items: center;
text-align: center;
width: 100%;
height: 100%;
transition: 0.3s ease-in-out;
display: flex;
margin-right: ${({ isOpen }) => (isOpen ? "0rem" : "300rem")};
}
The nav
import React from 'react'
import logo from '../../assets/shared/desktop/logo.svg'
import opened from '../../assets/shared/mobile/icon-hamburger.svg'
import { NavLink } from "react-router-dom"
import './nav.css'
import { Nav,NavContainer,NavMenu ,NavLogo,NavOpen } from './NavElements'
const Navbar = ({toggle}) => {
console.log(toggle)
return (
<>
<Nav>
<NavContainer>
<NavLogo src={logo} alt="logo-coffertoast"/>
<NavOpen src={opened} onClick={toggle} alt="logo-open"/>
<NavMenu>
<NavLink className="Items" to="/">HOME</NavLink>
<NavLink className="Items" to="/about">ABOUT US</NavLink>
<NavLink className="Items" to="/plan" >CREATE YOUR PLAN</NavLink>
</NavMenu>
</NavContainer>
</Nav>
</>
)
}
export default Navbar
You are not passing isOpen to SideWrapper -
<SideWrapper>
it should be
<SideWrapper isOpen={isOpen}>
I'm following Brad Traversy's Udemy tutorial currently.
I am currently following along on working on this page:
https://github.com/bradtraversy/devconnector_2.0/blob/master/client/src/components/posts/PostItem.js
For some reason, the text for the name and the body on my page "Posts" is showing up way bigger than it should. I compared it to my other page, "Developers", in which I used similar code, and it shows up as normal. I don't understand what I did differently. Below, I have attached my code for both pages, my CSS for the posts, and pictures of each page.
Please let me know if you need more information, or if anything I have typed is unclear.
Thank you so much in advance.
MY-1 CSS
/* Margin */
.m {
margin: 0.5rem;
}
.m-1 {
margin: 1rem;
}
.m-2 {
margin: 2rem;
}
.m-3 {
margin: 3rem;
}
.my {
margin: 0.5rem 0;
}
.my-1 {
margin: 1rem 0;
}
.my-2 {
margin: 2rem 0;
}
.my-3 {
margin: 3rem 0;
}
POSTS PAGE CSS
/* Posts Page */
.post-form .post-form-header {
background: var(--primary-color);
padding: 0.5rem;
}
.post {
display: grid;
grid-template-columns: 1fr 4fr;
grid-gap: 2rem;
align-items: center;
}
.post > div:first-child {
text-align: center;
}
.post img {
width: 100px;
}
.post .comment-count {
background: var(--light-color);
color: var(--primary-color);
padding: 0.1rem 0.2rem;
border-radius: 5px;
font-size: 0.8rem;
}
.post .post-date {
color: #aaa;
font-size: 0.8rem;
margin-bottom: 0.5rem;
}
POSTS PAGE CODE
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import Moment from 'react-moment';
import { connect } from 'react-redux';
import authReducer from '../../reducers/auth';
const PostItem = ({
auth,
post: { _id, text, name, avatar, user, likes, comments, date },
}) => (
<div className='post bg-white p-1 my-1'>
<div>
<Link to={'/profile/' + user}>
<img className='round-img' src={avatar} alt='' />
</Link>
<a href='profile.html'>
<h4>{name}</h4>
</a>
</div>
<div>
<p className='my-1'>{text}</p>
<p className='post-date'>
Posted on <Moment format='YYYY/MM/DD'>{date}</Moment>
</p>
<button type='button' className='btn btn-light'>
<i className='fas fa-thumbs-up'></i>
<span> {likes.length > 0 && <span>{comments.length}</span>}</span>
</button>
<button type='button' className='btn btn-light'>
<i className='fas fa-thumbs-down'></i>
</button>
<Link to={'/post/' + _id} className='btn btn-primary'>
Discussion{' '}
{comments.length > 0 && (
<span className='comment-count'>{comments.length}</span>
)}
</Link>
{!auth.loading && user === auth.user._id && (
<button type='button' className='btn btn-danger'>
<i className='fas fa-times'></i>
</button>
)}
</div>
</div>
);
PostItem.propTypes = {
post: PropTypes.object.isRequired,
auth: PropTypes.object.isRequired,
};
const mapStateToProps = (state) => ({
auth: state.auth,
});
export default connect(mapStateToProps, {})(PostItem);
DEVELOPERS PAGE CODE
import React from 'react';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
const ProfileItem = ({
profile: {
user: { _id, name, avatar },
status,
company,
location,
skills,
},
}) => {
return (
<div className='profile bg-light'>
<img src={avatar} alt='' className='round-img' />
<div>
<h2>{name}</h2>
<p>
{status} {company && <span> at {company}</span>}
</p>
<p className='my-q'>{location && <span>{location}</span>}</p>
<Link to={`/profile/${_id}`} className='btn btn-primary'>
View Profile
</Link>
</div>
<ul>
{skills.slice(0, 4).map((skill, index) => (
<li key={index} className='text-primary'>
<i className='fas fa-check'></i>
{skill}
</li>
))}
</ul>
</div>
);
};
ProfileItem.propTypes = {
profile: PropTypes.object.isRequired,
};
export default ProfileItem;
POSTS PAGE IMAGE
DEVELOPERS PAGE IMAGE
STYLES APPLIED TO BODY
The text size on your 'Posts' page is being defined by the class my-1, here:
<p className='my-1'>{text}</p>
You haven't shared the CSS for that class, whether it's your own defined styling or something imported from a 3rd party, but that's the source of the problem.
You could either remove that class from this <p> element, or use the same my-q class that you've applied on the text in your 'Developers' page.
I would like to create one component that included the dot between 2 elements. the code I have is like following, However, I tried to use span element then create css so I can display . between 2 span. but react does not generate the dot between 2 span. I also tried to use div and then dot did display but format of 2 element does not align at center
//html
import "./styles.css";
export default function App() {
return (
<div className="panel-section">
<div className="panel-header">
<div className="panel-title">
{/** use div format is not correct */}
<div>May 1st 5:31PM</div>
<div className="panel-dot"></div>
<div>Google</div>
{/** dot is not generated
<span>May 1st 5:31PM</span>
<span className="panel-dot"></span>
<span>Google</span>
*/}
</div>
</div>
</div>
);
}
//css
.panel {
width: 600px;
height: 500px;
}
.panel-header {
display: flex;
justify-content: space-between;
align-items: center;
left: 0.5%;
right: 33.44%;
}
.panel-title {
padding: 8px;
color: #ffffff;
background-color: #3aac6f;
}
.panel-dot {
width: 4px;
height: 4px;
background: #3aac6f;
align-self: center;
}
codepen:
You can try this :
App.js
import React from 'react';
import './style.css';
export default function App() {
return (
<div className="panel-section">
<div className="panel-header">
<div className="panel-title">
<span>May 1st 5:31PM</span>
<span>Google</span>
</div>
</div>
</div>
);
}
style.css
.panel-title span:first-of-type::after {
content: '.';
}
Demo : Stackblitz
OR
App.js
import React from 'react';
import './style.css';
export default function App() {
return (
<div className="panel-section">
<div className="panel-header">
<div className="panel-title">
<span>May 1st 5:31PM</span>
<span>{"."}</span>
<span>Google</span>
</div>
</div>
</div>
);
}
I am having a unique scenario but I am unable to understand this.
When I hover on one DIV then it selects both the sibling DIVS.
I do not want this behaviour.
I want to select only the DIV which is being hovered.
How can I achieve this in ReactJS ?.
The working code is shown below.
App.js
import React,{useState} from 'react';
import "./App.css";
const App = () => {
const [hover, setHover] = useState(false);
const texts = ["Arjun", "Andy"];
let cclass = hover ? "item itemHover":"item";
return (
<div className="wrapper">
{
texts.map((t, i) => (
<div className={cclass} key={i} onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}>
{t}
</div>
))
}
</div>
)
}
export default App;
App.css
.wrapper{
width: 60%;
margin: 10rem auto;
border: 1px solid;
display: flex;
}
.item{
width: 50%;
border: 1px solid grey;
height: auto;
padding: 2rem 3rem;
}
.itemHover{
background: grey;
}
The hover state in App is common for both divs. To make it work you need to
have hover state for each div separate. For this, create a new component TextDiv
import React, {useState} from "react";
import "./styles.css";
export default function TextDiv({t}) {
const [hover, setHover] = useState(false);
let cclass = hover ? "item itemHover":"item";
return (
<div className={cclass} onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}>
{t}
</div>
)
}
and change App.js file
import React, {useState} from "react";
import TextDiv from './TextDiv'
import "./styles.css";
export default function App() {
const texts = ["Arjun", "Andy"];
return (
<div className="wrapper">
{
texts.map((t, i) => (
<TextDiv t={t} key={i}/>
))
}
</div>
)
}
Can you do it with CSS? It's very simple with CSS. Just add this:
.item:hover{
background: grey;
}
I'm using react. Material-ui is for Cards. For Grid I'm using CSS Grid Layout. So far it looks like this:
But my goal is something like this:
And I have 2 problems:
I want to have all these cards the same height (415px). I tried height: 415px on .BeerListingScroll-info-box but it doesn't work.
Images of bottles and kegs are diffrent in size [keg (80px x 160px) vs. bottle (80px x 317px)]. Is there any way to make them more similar in rendered size?
-
Code:
BeerListingScroll
import React, { Component } from 'react';
import ReduxLazyScroll from 'redux-lazy-scroll';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { fetchBeers } from '../../actions/';
import BeersListItem from '../../components/BeersListItem';
import ProgressIndicator from '../../components/ProgressIndicator';
import './style.css';
class BeerListingScroll extends Component {
constructor(props) {
super(props);
this.loadBeers = this.loadBeers.bind(this);
}
loadBeers() {
const { skip, limit } = this.props.beers;
this.props.fetchBeers(skip, limit);
}
render() {
const { beersArray, isFetching, errorMessage, hasMore } = this.props.beers;
return (
<div className="container beers-lazy-scroll">
<ReduxLazyScroll
isFetching={isFetching}
errorMessage={errorMessage}
loadMore={this.loadBeers}
hasMore={hasMore}
>
<div className="BeerListingScroll-wrapper">
{beersArray.map(beer => (
<div key={beer.id} className="BeerListingScroll-info-box">
<BeersListItem beer={beer} />
</div>
))}
</div>
</ReduxLazyScroll>
<div className="row beers-lazy-scroll__messages">
{isFetching && (
<div className="alert alert-info">
<ProgressIndicator />
</div>
)}
{!hasMore &&
!errorMessage && (
<div className="alert alert-success">
All the beers has been loaded successfully.
</div>
)}
</div>
</div>
);
}
}
function mapStateToProps(state) {
return {
beers: state.beers,
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({ fetchBeers }, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(BeerListingScroll);
BeerListingScroll css
.BeerListingScroll-wrapper {
display: grid;
margin: 0;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr) ) ;
background-color: #f7f7f7;
}
.BeerListingScroll-info-box {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
width: 320px;
}
/* This applies from 600px onwards */
#media (min-width: 1820px) {
.BeerListingScroll-wrapper {
margin: 0 400px;
}
}
#media (min-width: 1620px) {
.BeerListingScroll-wrapper {
margin: 0 300px;
}
}
#media (min-width: 1366px) {
.BeerListingScroll-wrapper {
margin: 0 200px;
}
}
BeerListItem is the child of BeerListingScroll
import React from 'react';
import Card, { CardContent } from 'material-ui/Card';
import Typography from 'material-ui/Typography';
function BeerListItem(props) {
return (
<div>
<Card raised>
<CardContent>
<img src={props.beer.image_url} alt="beer" width="30%" />
<Typography variant="headline" component="h2">
{props.beer.name}
</Typography>
<Typography component="p">{props.beer.tagline}</Typography>
</CardContent>
</Card>
</div>
);
}
export default BeerListItem;
Full project on github -> Github
So for image sizes here I got great answer.
And I added:
.BeerListItem-img {
height: auto;
max-height: 250px;
width: auto;
max-width: 250px;
}
And for card size I just added inside BeerListItem class to Card like so (.BeerListItem-main-card):
function BeerListItem(props) {
return (
<div>
<Card raised className="BeerListItem-main-card">
<CardContent>
<img
src={props.beer.image_url}
alt="beer"
className="BeerListItem-img"
/>
<Typography variant="headline" component="h2">
{props.beer.name}
</Typography>
<Typography component="p">{props.beer.tagline}</Typography>
</CardContent>
</Card>
</div>
);
}
And here is corresponding css to that component.
.BeerListItem-main-card {
width: 320px;
height: 415px;
}
.BeerListItem-img {
height: auto;
max-height: 250px;
width: auto;
max-width: 250px;
}
With that two changes, I've managed to achieve my goal.
You should try exploring display:flex;
Here is a link to a fantastic code pen that may help you achieve what you want:
https://codepen.io/enxaneta/full/adLPwv
More specifically here is an example I've created with what you might be trying to achieve.
https://jsfiddle.net/dalecarslaw/sxdr3eep/
Here is the areas of code you should focus on:
display:flex;
align-items:space-between;
justify-content:space-between;
flex-wrap:wrap;