Skip to content

Commit 82af15f

Browse files
webJosewebJose
authored
chore(demo): Update demo project (#98)
1 parent aa364f7 commit 82af15f

File tree

3 files changed

+151
-122
lines changed

3 files changed

+151
-122
lines changed

‎demo/src/App.svelte‎

Lines changed: 47 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import './app.scss';
33
import NavBar from './lib/NavBar.svelte';
44
import Tooltip from './lib/Tooltip.svelte';
5-
import { Router, Route, Fallback, RouterTrace } from '@wjfe/n-savant';
5+
import { Router, Route, Fallback, RouterTrace, activeBehavior } from '@wjfe/n-savant';
66
import NotFound from './lib/NotFound.svelte';
77
import HomeView from './lib/views/home/HomeView.svelte';
88
import PathRoutingView from './lib/views/path-routing/PathRoutingView.svelte';
@@ -32,12 +32,29 @@
3232
<div class="d-flex flex-column h-100">
3333
<Router id="root">
3434
{#snippet children(_, rs)}
35-
<Tooltip shown={showNavTooltip} placement="bottom">
36-
{#snippet reference(ref)}
37-
<NavBar {@attach ref} />
38-
{/snippet}
39-
Use these navigation links to test-drive the routing capabilities of @wjfe/n-savant.
40-
</Tooltip>
35+
<header>
36+
<Tooltip shown={showNavTooltip} placement="bottom">
37+
{#snippet reference(ref)}
38+
<NavBar {@attach ref} />
39+
{/snippet}
40+
Use these navigation links to test-drive the routing capabilities of @wjfe/n-savant.
41+
</Tooltip>
42+
<div class="breadcrumb">
43+
<span>
44+
<span {@attach activeBehavior(rs, { key: 'home', class: 'bc-active' })}>Home</span>
45+
</span>
46+
<span>
47+
<span {@attach activeBehavior(rs, { key: 'pathRouting', class: 'bc-active' })}
48+
>Path Routing</span
49+
>
50+
</span>
51+
<span>
52+
<span {@attach activeBehavior(rs, { key: 'hashRouting', class: 'bc-active' })}
53+
>Hash Routing</span
54+
>
55+
</span>
56+
</div>
57+
</header>
4158
<main class="d-flex flex-column flex-fill overflow-auto mt-3">
4259
<div class="container-fluid flex-fill d-flex flex-column">
4360
<div class="grid flex-fill">
@@ -90,4 +107,27 @@
90107
}
91108
}
92109
}
110+
.breadcrumb {
111+
padding: 0.5em 1em;
112+
background-color: #f8f9fa;
113+
border-bottom: 1px solid #dee2e6;
114+
font-size: 0.9em;
115+
display: flex;
116+
flex-direction: row;
117+
gap: 0.5em;
118+
& > *:after {
119+
content: '>';
120+
flex-grow: 1;
121+
margin-left: 0.5em;
122+
}
123+
& > *:last-child:after {
124+
content: '';
125+
flex-grow: 0;
126+
margin-left: 0;
127+
}
128+
}
129+
:global .bc-active {
130+
font-weight: bold;
131+
text-decoration: underline;
132+
}
93133
</style>

‎demo/src/lib/NavBar.svelte‎

Lines changed: 45 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
import { Link, Route } from '@wjfe/n-savant';
2+
import { Link, LinkContext, Route } from '@wjfe/n-savant';
33
import logo from '@wjfe/n-savant/logo64';
44
import SubNav from './SubNav.svelte';
55
import { routingMode } from './hash-routing';
@@ -15,7 +15,7 @@
1515
{ text: 'Home', href: '/hash-routing' },
1616
{
1717
text: 'Start Demo',
18-
href: `#${(routingMode === 'multi' ? 'd1=/demo;d2=/demo' : '/demo')}`
18+
href: `#${routingMode === 'multi' ? 'd1=/demo;d2=/demo' : '/demo'}`
1919
}
2020
];
2121
</script>
@@ -38,62 +38,49 @@
3838
<span class="navbar-toggler-icon"></span>
3939
</button>
4040
<div class="collapse navbar-collapse" id="navbarNav">
41-
<ul class="navbar-nav">
42-
<li class="nav-item">
43-
<Link
44-
class="nav-link"
45-
activeState={{ class: 'active', key: 'home' }}
46-
href="/"
47-
id="homeLink">Home</Link
48-
>
49-
</li>
50-
<Route key="homeMenuPr">
51-
{#snippet children(rp, _, rs)}
52-
{#if !rs.pathRouting?.match}
53-
<li class="nav-item">
54-
<Link
55-
class="nav-link"
56-
activeState={{ class: 'active', key: 'pathRouting' }}
57-
href="/path-routing"
58-
>
59-
Path Routing
60-
</Link>
61-
</li>
62-
{/if}
63-
{/snippet}
64-
</Route>
65-
<Route key="pathRouting">
66-
<SubNav title="Path Routing" links={pathRoutingLinks} />
67-
</Route>
68-
<Route key="homeMenuHr">
69-
{#snippet children(rp, _, rs)}
70-
{#if !rs.hashRouting?.match}
71-
<li class="nav-item">
72-
<Link
73-
class="nav-link"
74-
activeState={{ class: 'active', key: 'hashRouting' }}
75-
href="/hash-routing"
76-
>
77-
Hash Routing
78-
</Link>
79-
</li>
80-
{/if}
81-
{/snippet}
82-
</Route>
83-
<Route key="hashRouting">
84-
<SubNav title="Hash Routing" links={hashRoutingLinks} />
85-
</Route>
86-
<li class="nav-item">
87-
<Link class="nav-link" activeState={{ class: 'active', key: 'px' }} href="/pricing">
88-
404
89-
</Link>
90-
</li>
91-
<li class="nav-item">
92-
<Link class="nav-link disabled" href="/disabled" tabindex={-1} aria-disabled="true">
93-
Disabled
94-
</Link>
95-
</li>
96-
</ul>
41+
<LinkContext activeState={{ class: 'active', aria: { 'aria-current': 'page' } }}>
42+
<ul class="navbar-nav">
43+
<li class="nav-item">
44+
<Link class="nav-link" activeFor="home" href="/" id="homeLink">Home</Link>
45+
</li>
46+
<Route key="homeMenuPr">
47+
{#snippet children(rp, _, rs)}
48+
{#if !rs.pathRouting?.match}
49+
<li class="nav-item">
50+
<Link class="nav-link" activeFor="pathRouting" href="/path-routing">
51+
Path Routing
52+
</Link>
53+
</li>
54+
{/if}
55+
{/snippet}
56+
</Route>
57+
<Route key="pathRouting">
58+
<SubNav title="Path Routing" links={pathRoutingLinks} />
59+
</Route>
60+
<Route key="homeMenuHr">
61+
{#snippet children(rp, _, rs)}
62+
{#if !rs.hashRouting?.match}
63+
<li class="nav-item">
64+
<Link class="nav-link" activeFor="hashRouting" href="/hash-routing">
65+
Hash Routing
66+
</Link>
67+
</li>
68+
{/if}
69+
{/snippet}
70+
</Route>
71+
<Route key="hashRouting">
72+
<SubNav title="Hash Routing" links={hashRoutingLinks} />
73+
</Route>
74+
<li class="nav-item">
75+
<Link class="nav-link" activeFor="pricing" href="/pricing">404</Link>
76+
</li>
77+
<li class="nav-item">
78+
<Link class="nav-link disabled" href="/disabled" tabindex={-1} aria-disabled="true">
79+
Disabled
80+
</Link>
81+
</li>
82+
</ul>
83+
</LinkContext>
9784
</div>
9885
</div>
9986
</nav>

‎demo/src/lib/demo/NavBar.svelte‎

Lines changed: 59 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
import { Link } from '@wjfe/n-savant';
2+
import { Link, LinkContext } from '@wjfe/n-savant';
33
44
type Props = {
55
hash?: boolean | string;
@@ -23,62 +23,64 @@
2323
<span class="navbar-toggler-icon"></span>
2424
</button>
2525
<div class="navbar-collapse collapse">
26-
<ul class="navbar-nav" id="demonavbar">
27-
<li class="nav-item">
28-
<Link
29-
{hash}
30-
activeState={{ class: 'active', key: 'router', ariaCurrent: 'step' }}
31-
class="nav-link"
32-
href="/router"
33-
prependBasePath>Router</Link
34-
>
35-
</li>
36-
<li class="nav-item">
37-
<Link
38-
{hash}
39-
activeState={{ class: 'active', key: 'route', ariaCurrent: 'step' }}
40-
class="nav-link"
41-
href="/route"
42-
prependBasePath>Route</Link
43-
>
44-
</li>
45-
<li class="nav-item">
46-
<Link
47-
{hash}
48-
activeState={{ class: 'active', key: 'link', ariaCurrent: 'step' }}
49-
class="nav-link"
50-
href="/link"
51-
prependBasePath>Link</Link
52-
>
53-
</li>
54-
<li class="nav-item">
55-
<Link
56-
{hash}
57-
activeState={{ class: 'active', key: 'location', ariaCurrent: 'step' }}
58-
class="nav-link"
59-
href="/location"
60-
prependBasePath>location</Link
61-
>
62-
</li>
63-
<li class="nav-item">
64-
<Link
65-
{hash}
66-
activeState={{ class: 'active', key: 'routerEngine', ariaCurrent: 'step' }}
67-
class="nav-link"
68-
href="/router-engine"
69-
prependBasePath>Router Engine</Link
70-
>
71-
</li>
72-
<li class="nav-item">
73-
<Link
74-
{hash}
75-
activeState={{ class: 'active', key: 'api', ariaCurrent: 'step' }}
76-
class="nav-link"
77-
href="/api"
78-
prependBasePath>API</Link
79-
>
80-
</li>
81-
</ul>
26+
<LinkContext activeState={{ class: 'active', aria: { 'aria-current': 'step' } }}>
27+
<ul class="navbar-nav" id="demonavbar">
28+
<li class="nav-item">
29+
<Link
30+
{hash}
31+
activeFor="router"
32+
class="nav-link"
33+
href="/router"
34+
prependBasePath>Router</Link
35+
>
36+
</li>
37+
<li class="nav-item">
38+
<Link
39+
{hash}
40+
activeFor="route"
41+
class="nav-link"
42+
href="/route"
43+
prependBasePath>Route</Link
44+
>
45+
</li>
46+
<li class="nav-item">
47+
<Link
48+
{hash}
49+
activeFor="link"
50+
class="nav-link"
51+
href="/link"
52+
prependBasePath>Link</Link
53+
>
54+
</li>
55+
<li class="nav-item">
56+
<Link
57+
{hash}
58+
activeFor="location"
59+
class="nav-link"
60+
href="/location"
61+
prependBasePath>location</Link
62+
>
63+
</li>
64+
<li class="nav-item">
65+
<Link
66+
{hash}
67+
activeFor="routerEngine"
68+
class="nav-link"
69+
href="/router-engine"
70+
prependBasePath>Router Engine</Link
71+
>
72+
</li>
73+
<li class="nav-item">
74+
<Link
75+
{hash}
76+
activeFor="api"
77+
class="nav-link"
78+
href="/api"
79+
prependBasePath>API</Link
80+
>
81+
</li>
82+
</ul>
83+
</LinkContext>
8284
</div>
8385
</div>
8486
</nav>

0 commit comments

Comments
 (0)