forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
1{{ set colorClass = (path) => url === "/" + path ? '' : 'button--transparent' }}
2{{ set slug = (cat) => cat.toLowerCase().replace(/\s+/g, '-') }}
3
4<div class="nav-container">
5 <nav id="diffuse-nav">
6 <a href="dashboard/" class="button {{ colorClass("dashboard/") }} button--border">
7 <span>
8 <i class="ph-fill ph-person"></i>
9 Your Diffuse
10 </span>
11 </a>
12
13 <a href="guide/" class="button {{ colorClass("guide/") }} button--border">
14 <span>
15 <i class="ph-fill ph-book-open-text"></i>
16 Guide
17 </span>
18 </a>
19
20 <a href="featured/" class="button {{ colorClass("featured/") }} button--border">
21 <span>
22 <i class="ph-fill ph-sparkle"></i>
23 Featured
24 </span>
25 </a>
26
27 <a href="build/" class="button {{ colorClass("build/") }} button--border">
28 <span>
29 <i class="ph-fill ph-hammer"></i>
30 Build
31 </span>
32 </a>
33
34 <div class="divider"></div>
35
36 <a href="data/" class="button {{ colorClass("data/") }} button--border">
37 <span>Input & Output</span>
38 </a>
39
40 <a href="playback/" class="button {{ colorClass("playback/") }} button--border">
41 <span>Playback</span>
42 </a>
43
44 <a href="browsing/" class="button {{ colorClass("browsing/") }} button--border">
45 <span>Browsing</span>
46 </a>
47
48 <a href="themes/" class="button {{ colorClass("themes/") }} button--border">
49 <span>Themes</span>
50 </a>
51
52 <a href="misc/" class="button {{ colorClass("misc/") }} button--border">
53 <span>
54 <i class="ph-fill ph-treasure-chest"></i>
55 </span>
56 </a>
57 </nav>
58
59 <button
60 id="nav-overflow-btn"
61 class="button button--transparent button--border"
62 style="display: none; flex-shrink: 0"
63 popovertarget="nav-overflow-menu"
64 >
65 <span class="with-icon">
66 <i class="ph-fill ph-dots-three-outline"></i>
67 </span>
68 </button>
69
70 <div id="nav-overflow-menu" class="dropdown" popover></div>
71</div>