karenying

{
  // Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
  // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
  // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
  // used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
  // Placeholders with the same ids are connected.
  // Example:
  // "Print to console": {
  // 	"scope": "javascript,typescript",

karenying

.headerlink-no-link {
  pointer-events: none;
}

karenying

let className = selected ? 'headerlink-no-link ' : '';
  className += 'headerlink-title';

  return (
    <Link to={`/${page}`} className={className}>

karenying

.headerlink-dot {
  margin-top: -0.5rem;
  opacity: 0;
  transition: opacity 200ms linear;
}

.headerlink-title:hover .headerlink-dot {
  opacity: 1;
}

karenying

<Link to={`/${page}`} className='headerlink-title'>
  {title}
  <div className={selected ? 'headerlink-dot-active' : 'headerlink-dot'}>•</div>
</Link>

karenying

const page = useParams().page || 'home';

karenying

<Router>
  <Route path='/:page' component={Header} />
  <Route exact path='/' component={Header} />
    
  <Route exact path='/' component={Home} />
  <Route exact path='/home' component={Home} />
  <Route exact path='/about' component={About} />
  <Route exact path='/contact' component={Contact} />
</Router>

karenying

import { Link, useParams } from 'react-router-dom';

const Header = () => {
  const { page } = useParams();
  
  return (
    <div className='header'>
      <HeaderLink page='home' selected={page === 'home'} />
      <HeaderLink page='about' selected={page === 'about'} />
      <HeaderLink page='contact' selected={page === 'contact'} />

karenying

<Router>
  <Route path='/:page' component={Header} />
    
  <Route exact path='/' component={Home} />
  <Route exact path='/home' component={Home} />
  <Route exact path='/about' component={About} />
  <Route exact path='/contact' component={Contact} />
</Router>

karenying

<Route path='/:page' component={Header} />