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 class="with-icon">
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 class="with-icon">
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 class="with-icon">
22 <i class="ph-fill ph-sparkle"></i>
23 Featured
24 </span>
25 </a>
26
27 <a href="catalogue/" class="button {{ colorClass("catalogue/") }} button--border">
28 <span class="with-icon">
29 <i class="ph-fill ph-storefront"></i>
30 Catalogue
31 </span>
32 </a>
33
34 <a href="create/" class="button {{ colorClass("create/") }} button--border">
35 <span class="with-icon">
36 <i class="ph-fill ph-hammer"></i>
37 Create
38 </span>
39 </a>
40 </nav>
41
42 <button
43 id="nav-overflow-btn"
44 class="button button--transparent button--border"
45 style="display: none; flex-shrink: 0"
46 popovertarget="nav-overflow-menu"
47 >
48 <span class="with-icon">
49 <i class="ph-fill ph-dots-three-outline"></i>
50 </span>
51 </button>
52
53 <div id="nav-overflow-menu" class="dropdown" popover></div>
54</div>