Skip to content

Commit 930144f

Browse files
wuda-iowuda-io
committed
fix: navdrawer current page marking
1 parent bc11257 commit 930144f

10 files changed

+139
-40
lines changed

‎about.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
{{> head }}
4+
{{> head about }}
55
</head>
66
<body>
77
{{> navbar }}

‎badges.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
{{> head }}
4+
{{> head styles.badges }}
55
</head>
66
<body>
77
{{> navbar }}

‎getting-started.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
{{> head }}
4+
{{> head gettingStarted }}
55
</head>
66
<body>
77
{{> navbar }}

‎mobile.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head> {{> head }} </head>
3+
<head> {{> head mobile}} </head>
44
<body>
55
{{> navbar }}
66
<main><div class="container">

‎partials/head.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
name="description"
77
content="Materialize is a modern responsive CSS framework based on Material Design by Google. "
88
/>
9-
<title>Documentation - Materialize</title>
9+
<title>{{name}} - Materialize</title>
1010
<!-- Favicons-->
1111
<link
1212
rel="apple-touch-icon-precomposed"

‎partials/menucollapsible.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<li>
2+
<ul class="collapsible collapsible-accordion">
3+
<li>
4+
<a class="collapsible-header waves-effect">
5+
{{#icon}}{{/icon}}{{name}}
6+
</a>
7+
<div class="collapsible-body">
8+
<ul>
9+
{{#each items as |item|}} {{> menuitem item}} {{/each}}
10+
</ul>
11+
</div>
12+
</li>
13+
</ul>
14+
</li>

‎partials/menuitem.html

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<li class="{{isActive}}">
2+
<a href="{{url}}">{{#icon}}{{/icon}}{{name}}</a>
3+
</li>

‎partials/navbar.html

+7-20
Original file line numberDiff line numberDiff line change
@@ -78,8 +78,6 @@ <h1 class="header">Cards</h1>
7878
>
7979
</li>
8080

81-
<li><small>{{title}}</small></li>
82-
8381
<li class="search hide-on-med-and-up">
8482
<div class="search-wrapper">
8583
<input
@@ -92,18 +90,9 @@ <h1 class="header">Cards</h1>
9290
</div>
9391
</li>
9492

95-
<li>
96-
<a class="waves-effect" href="about.html"
97-
><span class="material-icons">info</span>About</a
98-
>
99-
</li>
100-
101-
<li>
102-
<a class="waves-effect" href="getting-started.html"
103-
><span class="material-icons">apps</span>Getting Started</a
104-
>
105-
</li>
93+
{{#each items as |item|}} {{> (lookup . item) }} {{/each}}
10694

95+
<!--
10796
<li>
10897
<ul class="collapsible collapsible-accordion">
10998
<li>
@@ -131,7 +120,7 @@ <h1 class="header">Cards</h1>
131120
</li>
132121
</ul>
133122
</li>
134-
123+
135124
<li>
136125
<ul class="collapsible collapsible-accordion">
137126
<li class="active">
@@ -143,7 +132,7 @@ <h1 class="header">Cards</h1>
143132
<li><a href="badges.html">Badges</a></li>
144133
<li><a href="buttons.html">Buttons</a></li>
145134
<li><a href="breadcrumbs.html">Breadcrumbs</a></li>
146-
<li class="active"><a href="cards.html">Cards</a></li>
135+
<li><a href="cards.html">Cards</a></li>
147136
<li><a href="collections.html">Collections</a></li>
148137
<li>
149138
<a href="floating-action-button.html">Floating Action Button</a>
@@ -196,11 +185,9 @@ <h1 class="header">Cards</h1>
196185
</ul>
197186
</li>
198187
199-
<li>
200-
<a class="waves-effect" href="mobile.html"
201-
><span class="material-icons">mobile_friendly</span>Mobile</a
202-
>
203-
</li>
188+
189+
{{> menuitem mobile}}
190+
-->
204191

205192
<li class="version">
206193
<a class="dropdown-trigger" href="#" data-target="version-dropdown">

‎themes.html

+2-7
Original file line numberDiff line numberDiff line change
@@ -160,12 +160,7 @@ <h2>Creating a Theme</h2>
160160
</div>
161161
</div>
162162
</main>
163+
{{> footer }}
164+
<script type="module" src="/src/main.ts"></script>
163165
</body>
164166
</html>
165-
{{> footer }}
166-
<script src="js/timeago.min.js"></script>
167-
<script src="js/prism.js"></script>
168-
<script src="js/lunr.min.js"></script>
169-
<script src="js/search.js"></script>
170-
<script src="js/materialize.js"></script>
171-
<script src="js/init.js"></script>

‎vite.config.js

+108-8
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,115 @@ import path, { resolve } from "path";
33
import handlebars from "vite-plugin-handlebars";
44
import { fileURLToPath } from "node:url";
55

6+
const config = {
7+
currentRoute: "",
8+
items: [
9+
{
10+
url: "about.html",
11+
name: "About",
12+
description: "Learn about Material Design and our Project Team.",
13+
icon: "info",
14+
},
15+
{
16+
url: "getting-started.html",
17+
name: "Getting started",
18+
icon: "apps",
19+
},
20+
{
21+
name: "Styles",
22+
icon: "palette",
23+
items: [
24+
{ url: "color.html", name: "Color" },
25+
{ url: "grid.html", name: "Grid" },
26+
{ url: "helpers.html", name: "Helpers" },
27+
{ url: "media-css.html", name: "Media" },
28+
{ url: "pulse.html", name: "Pulse" },
29+
{ url: "sass.html", name: "Sass" },
30+
{ url: "shadow.html", name: "Shadow" },
31+
{ url: "table.html", name: "Table" },
32+
{ url: "css-transitions.html", name: "Transitions" },
33+
{ url: "typography.html", name: "Typography" },
34+
{ url: "themes.html", name: "Themes" },
35+
{ url: "waves.html", name: "Waves" },
36+
],
37+
},
38+
{
39+
name: "Components",
40+
icon: "add_circle",
41+
items: [
42+
{ url: "badges.html", name: "Badges" },
43+
{ url: "buttons.html", name: "Buttons" },
44+
{ url: "breadcrumbs.html", name: "Breadcrumbs" },
45+
{ url: "cards.html", name: "Cards" },
46+
{ url: "collections.html", name: "Collections" },
47+
{ url: "floating-action-button.html", name: "Floating Action Button" },
48+
{ url: "footer.html", name: "Footer" },
49+
{ url: "icons.html", name: "Icons" },
50+
{ url: "navbar.html", name: "Navbar" },
51+
{ url: "pagination.html", name: "Pagination" },
52+
{ url: "preloader.html", name: "Preloader" },
53+
{ url: "auto-init.html", name: "Auto Init" },
54+
{ url: "carousel.html", name: "Carousel" },
55+
{ url: "collapsible.html", name: "Collapsible" },
56+
{ url: "dropdown.html", name: "Dropdown" },
57+
{ url: "feature-discovery.html", name: "Feature Discovery" },
58+
{ url: "media.html", name: "Media" },
59+
{ url: "modals.html", name: "Modals" },
60+
{ url: "parallax.html", name: "Parallax" },
61+
{ url: "pushpin.html", name: "Pushpin" },
62+
{ url: "scrollspy.html", name: "Scrollspy" },
63+
{ url: "sidenav.html", name: "Sidenav" },
64+
{ url: "tabs.html", name: "Tabs" },
65+
{ url: "toasts.html", name: "Toasts" },
66+
{ url: "tooltips.html", name: "Tooltips" },
67+
],
68+
badges: { url: "/badges.html", name: "Badges" },
69+
grid: { url: "/grid.html", name: "Grid" },
70+
},
71+
{
72+
name: "Forms",
73+
icon: "text_fields",
74+
items: [
75+
{ url: "autocomplete.html", name: "Autocomplete" },
76+
{ url: "checkboxes.html", name: "Checkboxes" },
77+
{ url: "chips.html", name: "Chips" },
78+
{ url: "pickers.html", name: "Pickers" },
79+
{ url: "radio-buttons.html", name: "Radio Buttons" },
80+
{ url: "range.html", name: "Range" },
81+
{ url: "select.html", name: "Select" },
82+
{ url: "switches.html", name: "Switches" },
83+
{ url: "text-inputs.html", name: "Text Inputs" },
84+
],
85+
},
86+
{
87+
url: "mobile.html",
88+
name: "Mobile",
89+
icon: "mobile_friendly",
90+
},
91+
],
92+
};
93+
694
export default {
795
base: "./",
896
plugins: [
997
handlebars({
1098
context(pagePath) {
11-
return {
12-
title: pagePath,
13-
};
99+
config.currentRoute = pagePath;
100+
return config;
101+
},
102+
helpers: {
103+
lookup: function(item) {
104+
return item.items ? "menucollapsible" : "menuitem"; // JSON.stringify(item);
105+
//return "menuitem";
106+
},
107+
icon: function() {
108+
if (!this.icon) return "";
109+
return `<span class="material-icons">${this.icon}</span>`;
110+
},
111+
isActive: function(ctx) {
112+
const currentRoute = ctx.data.root.currentRoute;
113+
return currentRoute === "/" + this.url ? "active" : "";
114+
},
14115
},
15116
partialDirectory: resolve(__dirname, "partials"),
16117
}),
@@ -20,12 +121,11 @@ export default {
20121
//this is needed for "vite publish" to include all html files, not only the index.
21122
input: Object.fromEntries(
22123
globSync("*.html").map((file) => [
23-
// // This remove the file extension from each
24-
// // file, so e.g. nested/foo.js becomes nested/foo
124+
// This remove the file extension from each
125+
// file, so e.g. nested/foo.js becomes nested/foo
25126
file.slice(0, file.length - path.extname(file).length),
26-
27-
// // This expands the relative paths to absolute paths, so e.g.
28-
// // src/nested/foo becomes /project/src/nested/foo.js
127+
// This expands the relative paths to absolute paths, so e.g.
128+
// src/nested/foo becomes /project/src/nested/foo.js
29129
fileURLToPath(new URL(file, import.meta.url)),
30130
])
31131
),

0 commit comments

Comments
 (0)