Skip to content

Instantly share code, notes, and snippets.

Avatar

Karen Ying karenying

View GitHub Profile
View global.code-snippets
{
// 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",
View Header.css
.headerlink-no-link {
pointer-events: none;
}
View Header.js
let className = selected ? 'headerlink-no-link ' : '';
className += 'headerlink-title';
return (
<Link to={`/${page}`} className={className}>
View Header.css
.headerlink-dot {
margin-top: -0.5rem;
opacity: 0;
transition: opacity 200ms linear;
}
.headerlink-title:hover .headerlink-dot {
opacity: 1;
}
View Header.js
<Link to={`/${page}`} className='headerlink-title'>
{title}
<div className={selected ? 'headerlink-dot-active' : 'headerlink-dot'}></div>
</Link>
View Header.js
const page = useParams().page || 'home';
View App.js
<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>
View Header.js
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'} />
View App.js
<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>
View App.js
<Route path='/:page' component={Header} />