toggling a class depending on url in React-CodePudding

This is probably super simple but I am looking to swap out a class when I am not on my homepage. For example I have this:

customBurgerIcon={
          <span className='font-bold text-xl md:text-2xl text-gray-100 tracking-wider hover:underline'>
            Menu
          </span>
        }

I am wanting to toggle text-gray-100 to another class when I am not on my homepage. I also want to be able to toggle out an image when I am not on my home page.

import Logo from '../images/logo-2-light.png';

// markup
const Header = () => {
  return (
    // <header className=' '>
    <header className='bg-transparent absolute top-8 md:top-14 left-10 z-10'>
      <Link to='/'>
        <img src={Logo} className='w-20 md:w-24 lg:w-52' alt='PNFB LTD logo' />
      </Link>
    </header>
  );
};

I want to be able to toggle it back to the original class when I am on the home page. This is because my homepage is dark and the other pages are light.

I have done some research and it seems that I can do this with a Ternary operator? But all the examples, are used for active links etc which isn't right for what i need.

Any help would be great.

EDIT: The component I want to change the class on

import React from 'react';
import { slide as Menu } from 'react-burger-menu';
import { Link } from 'gatsby';

var styles = {
  bmCrossButton: {
    height: '64px',
    width: '64px',
    right: '2rem',
    top: '2rem',
  },
  bmMenuWrap: {
    position: 'fixed',
    height: '100%',
  },
  bmMorphShape: {
    fill: '#373a47',
  },
  bmOverlay: {
    background: 'rgba(0, 0, 0, 0.3)',
  },
};

class Sidebar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      menuOpen: false,
    };
  }

  // This keeps your state in sync with the opening/closing of the menu
  // via the default means, e.g. clicking the X, pressing the ESC key etc.
  handleStateChange(state) {
    this.setState({ menuOpen: state.isOpen });
  }

  // This can be used to close the menu, e.g. when a user clicks a menu item
  closeMenu() {
    this.setState({ menuOpen: false });
  }

  // This can be used to toggle the menu, e.g. when using a custom icon
  // Tip: You probably want to hide either/both default icons if using a custom icon
  // See https://github.com/negomi/react-burger-menu#custom-icons
  toggleMenu() {
    this.setState((state) => ({ menuOpen: !state.menuOpen }));
  }

  render() {
    return (
      <Menu
        right
        width={425}
        styles={styles}
        isOpen={this.state.menuOpen}
        onStateChange={(state) => this.handleStateChange(state)}
        burgerButtonClassName={'absolute top-8 md:top-14 right-10 hover:underline text-white'}
        // crossButtonClassName={'absolute top-16 md:top-14 right-10 text-gray-900'}
        itemListClassName={'flex'}
        menuClassName={'bg-gray-900 text-gray-100 px-6 focus:outline-none'}
        customBurgerIcon={
          <span className={`font-bold text-xl md:text-2xl text-gray-100 tracking-wider hover:underline`}>
            Menu
          </span>
        }
        customCrossIcon={
          <span className='font-bold text-xl md:text-2xl text-gray-100 tracking-wider hover:underline'>
            Close
          </span>
        }>
        <div className='flex flex-col pt-16 sm:pt-32 md:pt-48 px-12 '>
          <nav className='flex flex-col '>
            <Link
              onClick={() => this.closeMenu()}
              className='font-bold uppercase montserrat text-2xl md:text-4xl mb-6 tracking-wide hover:text-red-500'
              to='/'>
              Home
            </Link>
            <Link
              onClick={() => this.closeMenu()}
              className='font-bold uppercase montserrat text-2xl md:text-4xl mb-6 tracking-wide hover:text-red-500'
              to='/charity'>
              Our Charity
            </Link>
            <Link
              onClick={() => this.closeMenu()}
              className='font-bold uppercase montserrat text-2xl md:text-4xl tracking-wide hover:text-red-500'
              to='/contact'>
              Contact
            </Link>
          </nav>
          </div>
        </div>
      </Menu>
    );
  }
}

export default Sidebar;

EDIT 2

const Header = () => {
  const url = typeof window !== 'undefined' ? window.location.href : '';

  return (
    <header className='bg-transparent absolute top-8 md:top-14 left-10 z-10'>
      <Link to='/'>
        {url === '/' ? (
          <img src={LogoLight} className='w-20 md:w-24 lg:w-52' alt='PNFB LTD logo' />
        ) : (
          <img src={LogoDark} className='w-20 md:w-24 lg:w-52' alt='PNFB LTD logo' />
        )}
      </Link>
    </header>
  );
};

This kinda works but now I only get the dark logo. So something is happen but it's not changing i have even tried !=

CodePudding user response：

Use the Ternary operator for the classes, could be like this:

className={`font-bold text-xl ${condition ? 'text-gray-100': ''}`}

For the image can be done like this inside the component:

{
    condition ? 
        <Link>
            <img src={Logo} className='w-20 md:w-24 lg:w-52' alt='PNFB LTD logo'/>
        </Link> : <> </> // Or the image replacement
}

CodePudding user response：

Example:

const Header = () => {

  const url = typeof window !== 'undefined' ? window.location.href : '';

  return (
    <header className={url === 'yoursite.com/home' ? 'text-gray-100' : ''}>
      <Link to='/'>
        <img src={Logo} className='w-20 md:w-24 lg:w-52' alt='PNFB LTD logo' />
      </Link>
    </header>
  );
};