totole/sapper-template
1
0
Fork 0
mirror of https://github.com/kevin-DL/sapper-template.git synced 2026-01-23 15:01:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

pass props.path down to nav - is a bit more self-explanatory

Browse Source
This commit is contained in:
Rich Harris
2018-06-28 14:34:06 -04:00
parent 365e8521ae
commit 1dcad25401
2 changed files with 4 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/App.html
View File

@@ -1,9 +1,4 @@
<Nav page={ <Nav path={props.path}/>
props.path === '/' ? 'home' :
props.path === '/about' ? 'about' :
props.path.startsWith('/blog') ? 'blog' :
null
}/>
<main> <main>
<svelte:component this={Page} {...props}/> <svelte:component this={Page} {...props}/>

6
components/Nav.html
View File

@@ -1,11 +1,11 @@
<nav> <nav>
<ul> <ul>
<li><a class='{page === "home" ? "selected" : ""}' href='.'>home</a></li> <li><a class='{path === "/" ? "selected" : ""}' href='.'>home</a></li>
<li><a class='{page === "about" ? "selected" : ""}' href='about'>about</a></li> <li><a class='{path === "/about" ? "selected" : ""}' href='about'>about</a></li>
<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches <!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
the blog data when we hover over the link or tap it on a touchscreen --> the blog data when we hover over the link or tap it on a touchscreen -->
<li><a rel=prefetch class='{page === "blog" ? "selected" : ""}' href='blog'>blog</a></li> <li><a rel=prefetch class='{path.startsWith("/blog") ? "selected" : ""}' href='blog'>blog</a></li>
</ul> </ul>
</nav> </nav>