I'm using Gatsby.js to build a site. It works very similarly to React.js.
I have a side menu. I would like the icons on this menu to be highlighted when the user is on the respective page. Gatsby has an 'activeStyle' option but this is not working for me. The icon still remains white when I am on the respective page.
My gatsby code using activeStyle looks like this:
<div class="sidebar_button">
<Link to="/about">
<i>
<FiUser size={22} activeStyle={{ color: "blue" }} />
</i>
<p>ABOUT</p>
</Link>
</div>
'FiUser' is the name of the icon I am using (with react-icons).
If I change 'activeStyle' to just 'style', the icon does change to blue - just not with 'activeStyle'.
I was wondering if anyone could point me in the right direction as to whats going wrong?
activeStyle and activeClassName are supposed to be used on the Link component itself, not on it's children.
<div class="sidebar_button">
<Link to="/about" activeClassName="active-link">
<i>
<FiUser size={22} className="user-icon" />
</i>
<p>ABOUT</p>
</Link>
</div>
The i and FiUser should not have any attributes that would override this style.
On styling:
.user-link {
color: blue;
}
.active .user-link {
color: white;
}
Docs
Using Boy With Silver Wings answer with some modifications, I found what worked for me was:
<div class="sidebar_button">
<Link to="/" activeClassName="user-link">
<i>
<TiHomeOutline size={22} className="user-icon" />
</i>
<p className="user-text">HOME</p>
</Link>
</div>
And for my CSS:
.user-icon {
color: #d8d8d8;
}
.user-text {
color: #d8d8d8;
}
.user-link .user-icon {
color: #97b27b;
}
.user-link .user-text {
color: #97b27b;
}
This generates exactly what I was looking for. I hope this can help someone else.
E.g when on the about/ 'silhouette' page it looks like this:
Related
I'm building a wordpress block using react (in the frontend).
The block will initially fetch a list from a server, then display the list using map.
For each item, it will render a header, like so:
As you can see, you can click a header and the content shows up. This content is build in the same map and they have their max-height and opacity set to 0 to hide them. I'm using those properties instead of just display: none, because I can CSS-transition them and it looks smoother. I had to blur the content, but you get the idea.
However, in some of the content-divs, the buttons are not working. The links-stlyed-as-buttons (the music services on the left) do not behave as links, although they have their href set in the markup. The hover effects do not work either, the cursor does not become the pointy finger and they are not clickable.
A div styled as a play-button has the same issues: in eventListeners I can see the onClick being listened for, but the button is not clickable, has no hover, etc.
One noteable thing is: it's not all list entries behaving this way. And if one list entry with broken buttons is open, and you open another content section with working buttons, the broken buttons will magically start working. If you then close the content section with working buttons, the formerly broken ones are broken again.
Honestly, this feels like my code is haunted.
Please note: because the length and content of the list is not entirely known, I have to use generated IDs and generated getElementByID-queries to interact with the items and can't define states for them (at least I couldn't think of a way to dynamically create states).
React:
//...
//releases is useState([]) of an object with metadata of songs
//comes from a database query, so the columns are known
{releases.map(release => {return(
<div key={release.catalogue_index} style={{marginTop: "8px"}}>
{/*This is the "header", shown in the screenshot*/}
<div className="layout-row" style={{backgroundColor: "#111", padding: "8px", marginTop: "4px", position: "relative"}} onClick={(event) => {
document.getElementById(`${release.catalogue_index}-content`).classList.toggle('open');
}}>
<div stlye={{flexGrow: 1}} className="layout-stack">
{/* here the title and some information is displayed*/}
</div>
</div>
{/*The content you can show (second screenshot)*/}
<div className="release-content" id={`${release.catalogue_index}-content`}>
{/*layout-stack and layout-row are just flex containers with different directions*/}
<div className="layout-row">
<img loading="lazy" alt={`${release.title} cover`} src={/*cover.jpg*/}
className="release-cover" />
<div className="layout-stack">
<div>{/*some metadata*/}</div>
<hr />
{release.short_description}
<div style={{height: "16px"}} />
<div className="layout-row">
{/*those are the link buttons sometimes not working*/}
{/*the whole thing only gets displayed if any link got fetched from the database*/}
{(release.link_bandcamp || release.link_youtube || release.link_spotify || release.link_apple) ?
<div className="layout-row">
<p className="link-caret"><strong>></strong></p>
<ul className="is-content-justification-center is-layout-flex wp-container-9 wp-block-social-links has-icon-color has-icon-background-color featured-social-group" style={{margin: 0}}>
{release.link_bandcamp ?
<li style={{color: "#fff", backgroundColor: "#888"}} className="wp-social-link wp-social-link-bandcamp wp-block-social-link wp-custom-social">
<a target="_blank" href={release.link_bandcamp} className="wp-block-social-link-anchor" rel="noopener"><img className="svgbutton" src={/*some-logo.svg*/} />
<span className="wp-block-social-link-label screen-reader-text">Bandcamp</span></a></li>
: null}
{release.link_youtube ?
<li style={{color: "#fff", backgroundColor: "#888"}} className="wp-social-link wp-social-link-youtube wp-block-social-link wp-custom-social">
<a target="_blank" href={release.link_youtube} className="wp-block-social-link-anchor" rel="noopener"><img className="svgbutton" src={/*some-logo.svg*/} />
<span className="wp-block-social-link-label screen-reader-text">Youtube</span></a></li>
: null}
{release.link_spotify ?
<li style={{color: "#fff", backgroundColor: "#888"}} className="wp-social-link wp-social-link-spotify wp-block-social-link wp-custom-social">
<a target="_blank" href={release.link_spotify} className="wp-block-social-link-anchor" rel="noopener"><img className="svgbutton" src={/*some-logo.svg*/} />
<span className="wp-block-social-link-label screen-reader-text">Spotify</span></a></li>
: null}
{release.link_apple ?
<li style={{color: "#fff", backgroundColor: "#888"}} className="wp-social-link wp-social-link-chain wp-block-social-link wp-custom-social">
<a target="_blank" href={release.link_apple} className="wp-block-social-link-anchor" rel="noopener"><img className="svgbutton" src={/*some-logo.svg*/} />
<span className="wp-block-social-link-label screen-reader-text">Apple Music</span></a></li>
: null}
</ul>
</div> : null}
<audio id={`audio-${release.catalogue_index}`} preload="none"
onEnded={() => {document.getElementById(`audio-seek-${release.catalogue_index}`).value = 0}}
onLoadedMetadata={() => document.getElementById(`audio-seek-${release.catalogue_index}`).max = document.getElementById(`audio-${release.catalogue_index}`).duration}
onTimeUpdate={() => document.getElementById(`audio-seek-${release.catalogue_index}`).value = Math.floor(document.getElementById(`audio-${release.catalogue_index}`).currentTime)}>
<source src={/*REDACTED*/} type="audio/mpeg" />
Your browser does not support audio.
</audio>
<div className="layout-row" style={{alignItems: "center"}}>
{/*this is the play button sometimes acting up*/}
<div className="play-pause wp-block-button"
onClick={() => {togglePlayPause(release.catalogue_index)}}>
<img id={`audio-button-${release.catalogue_index}`} className="play-pause svgbutton wp-block-button__link wp-element-button" src={/*play-svg*/} />
</div>
<input type="range" id={`audio-seek-${release.catalogue_index}`} className="audio-seek" max={100} value={0} />
</div>
</div>
</div>
</div>
<div style={{height: "16px"}} />
<div className="layout-stack">
{/*some flavor text*/}
</div>
</div>
</div>
)})}
CSS:
//...
.release-content {
max-height: 0vh;
opacity: 0;
transition: max-height 0.3s;
transition: opacity 0.3s;
}
.release-content.open {
opacity: 1;
height: fit-content;
padding: 16px;
max-height: 100vh;
}
.svgbutton {
color: currentColor;
fill: currentColor;
width: 1em;
height: 1em;
}
div.play-pause {
margin-left: 36px !important;
height: 38px;
}
img.play-pause {
box-sizing: unset !important;
margin-top: 0 !important;
}
//...
The only thing I could think of was that maybe the wordpress-classes ("wp-...") would somehow break ... but that doesn't make much sense, as some of the the list entries work fine while others don't - all using those same classes.
Based on RubenSmn's comment, I had to realize that I did not plan my code well and built terrible anti-patterns.
I have refactored the code to not map into all that markup, but a separate <Release /> component, which in turn contains the markup.
{releases.map(release => {return(
<ReleaseComponent key={release.catalogue_index} release={release} />
)})}
The new component was then built to not use classList.toggle, but proper React states to show and hide the content panels. Also the document.getElementByID-queries are gone and replaced by proper React refs.
const ReleaseComponent = (props) => {
const contentDiv = useRef(null);
const audioElement = useRef(null);
const audioButton = useRef(null);
const audioSeek = useRef(null);
const [contentOpen, setContentOpen] = useState(false);
//...
return(
//...
<div className="release-content" ref={contentDiv} hidden={!contentOpen}>
//...
Turns out, if you do things right, they actually work... This was a pretty humbling experience. Thank you, #RubenSmn .
I want my sidenavbar to continue over the whole page but when i add the other
sections(home, contact & projects) which are just regular functional components
with a div and h1, they create their own space on the page. is there a better
solution to creating different sections on a page? i have tried rendering the components
from index and app.js but without success, i am currently rendering SidenavBar
from index.js and my sections are getting rendered from app.js.
import React from "react";
import "../Section.css";
function HomeSection() {
return (
<div className="Section" id="Home">
HomeSection
<h1>Home</h1>
</div>
);
}
export default HomeSection;
here is an example of the sections, the section.css only centers the text on the page.
function SideNavBar() {
const [titleActive, setTitleActive] = useState(HomeSection);
return (
<div className="SideNavBar">
<Stickybox>
<ul className="SideBarList">
{SideBarInfo.map((info, key) => {
return (
<li
key={key}
className="rad"
onClick={() => {
console.log(info.title + " clicked");
setTitleActive(info.title);
}}
id={titleActive === info.title ? "active" : ""}
>
<Link
onClick={() => {
console.log(info.title + " clicked");
setTitleActive(info.title);
}}
id={titleActive === info.title ? "active" : ""}
activeClass="active"
to={info.title}
spy={true}
smooth={true}
offset={50}
duration={500}
>
<div id="title">{info.title}</div>
/Link>
<Link
activeClass="active"
to={info.title}
spy={true}
smooth={true}
offset={50}
duration={500}
>
<div id="bild">{info.bild}</div>
</Link>
</li>
);
})}
</ul>
</Stickybox>
</div>
);
}
export default SideNavBar;
// this is the css for sidebar
.SideNavBar {
width: 250px;
min-height: 5000px;
background-color: rgb(47, 167, 223);
height: 100vh;
}
this is my sidenavbar component.
My sidenavbar works as intended if i remove the sections, i have tried setting a max width and transparent background for the sections so they dont overwrite the sidenavbar but they still overwrite it. what is the correct way to create different sections?
i added a red background for the home section so its easier to see what its doing.
You probably want to do something like this for your sidebar to fix it on the side and have it take up the full screen.
This will fix the sidebar in a position on the screen (0px away from the top and 0px away from the bottom).
You then define the width and you have a fixed sidebar!
Hope that helps!
.sidebar {
top: 0px;
bottom: 0px;
width: 200px;
position: fixed;
background-color: blue;
}
<div class='sidebar'></div>
I have looked for dozens of examples on google and youtube but none of them seems to work. My problem is that whenever I try classic methods for conditional styling in styled-components it won't change the component's style as I wish it to change... Anybody can tell me what I am doing wrong?
Child component:
const Ripple = styled(ButtonBase)`
font-family: ${font.family};
font-size: ${(props) => (props.small ? '14px' : '16px')};
color: white !important;
&:focus {
border-radius: 6px;
}
`;
Parent:
<Button small label="Get in touch" href="/" />
It does nothing.... Pls help.
You seem to be calling the wrong component. You're calling <Button />
Try:
<Ripple small label="Get in touch" href="/" />
I am new to React and wanted to add cursor:pointer on react router Link hover in React. I am using CSS modules and basically did everything right but still pointer does not appear on hover. Here is the code I am using:
<Link className={styles.title} to="/">
<h2>
<i className="fa fa-sun-o "></i>
{title}
</h2>
</Link>
The code in CSS file
.title,
.title:hover,
.title:active,
.title:visited,
.title:focus {
text-decoration: none;
cursor: pointer;
color: blue;
}
className should be applied to Link's children or a wrapper. Link doesn't accept className prop
<Link to="/">
<h2 className={styles.title}>
<i className="fa fa-sun-o "></i>
{title}
</h2>
</Link>
So when I'm using an Icon in Ant Design it is always 14 * 14 px.
Is there a way to set the size maually?
Things like
<Icon width={"20px"} type="setting" />
or
<Icon style={{width: '20em'}} type="setting" />
do not work
It should be
<Icon type="message" style={{ fontSize: '16px', color: '#08c' }} theme="outlined" />
https://codepen.io/anon/pen/wNgrWX
Can change the size of the icon using fontSize style property.
eg: use of style={{ fontSize: '150%'}}
<PlayCircleFilled style={{ fontSize: '150%'}} />
In the new antd Icon version, you can increase the size of the icon like this:
import { MessageTwoTone } from "#ant-design/icons";
And call it as:
<div style={{ fontSize: "30px" }}>
<MessageTwoTone />
</div>
I tried using it as an attribute of <MessageTwoTone> but attribute no longer works like in the old version mentioned in the answers above.
Edited:-
I was told later that the above will only work while the Icon inherits its font-size from its parent. So we should rather add the style attribute directly to the Icon
<MessageTwoTone style={{ fontSize: "30px" }}/>
Not sure if its just for me, but as of today the accepted answer does not work, I made it work by putting a className inside the Icon Component, and targeting the svg of that class. here's an example
component.js
import { CheckCircleTwoTone } from '#ant-design/icons';
<CheckCircleTwoTone
twoToneColor="#52c41a"
className="reg_icon"
/>
component.scss
.reg_icon {
svg {
font-size: 120px !important;
}
}
Use <Icon style={{ fontSize: '30px'}} type="check-circle" />
Here is a working codepen:
https://codesandbox.io/s/x7r7k7j6xw
If using the icon inside the button like this:
<Button type="text" icon={<GithubOutlined />} />
You can add these classes/styles and it will solve the issue for you (it solved it for me)
<Button type="text"
className={styles.button}
icon={<GithubOutlined className={styles.icon}/>}
/>
.button {
// The wanted size...
font-size: 2.5em;
// Without it, changing the font size will cause problems.
width: fit-content;
height: fit-content;
.icon {
font-size: inherit;
}
}
CodePen Demo
Best way to do it with javascript
Icon.setTwoToneColor("#000");