Make modal drawer work

This commit is contained in:
Matthew Grove
2018-11-13 20:18:31 +00:00
parent 967a5dcf5c
commit 6cf8113d63
3 changed files with 11 additions and 15 deletions

View File

@@ -2,20 +2,14 @@ $(document).ready(function(){
// include navbar // include navbar
$(".navbar-insert").load("/page-inserts/navbar.html", function(){ $(".navbar-insert").load("/page-inserts/navbar.html", function(){
// initiate MDC drawer // initiate MDC drawer
// const drawer = new mdc.drawer.MDCDrawer.attachTo(document.querySelector('.mdc-drawer')); const drawer = new mdc.drawer.MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));
const drawer = new mdc.drawer.MDCDrawer.attachTo($(".mdc-drawer"));
const topAppBar = new mdc.topAppBar.MDCTopAppBar.attachTo(document.getElementById('app-bar'));
topAppBar.listen('MDCTopAppBar:nav', () => {
drawer.open = !drawer.open;
});
// initiate MDC top app bar // initiate MDC top app bar
// const mdc_top_app_bar = new mdc.topAppBar.MDCTopAppBar.attachTo(document.querySelector('.mdc-top-app-bar')); const mdc_top_app_bar = new mdc.topAppBar.MDCTopAppBar.attachTo(document.querySelector('.mdc-top-app-bar'));
// mdc_top_app_bar.setScrollTarget(document.getElementById('main-content')); mdc_top_app_bar.setScrollTarget(document.getElementById('main-content'));
// mdc_top_app_bar.listen('MDCTopAppBar:nav', () => { mdc_top_app_bar.listen('MDCTopAppBar:nav', () => {
// drawer.open = !drawer.open; drawer.open = !drawer.open;
// }); });
// include source code link // include source code link
$(".source-code-link").load("/page-inserts/source-code-link.html"); $(".source-code-link").load("/page-inserts/source-code-link.html");

View File

@@ -45,6 +45,8 @@
<!-- content of navbar is included via jQuery --> <!-- content of navbar is included via jQuery -->
<aside class="navbar-insert mdc-drawer mdc-drawer--modal"></aside> <aside class="navbar-insert mdc-drawer mdc-drawer--modal"></aside>
<div class="mdc-drawer-scrim"></div>
<div class="mdc-drawer-app-content"> <div class="mdc-drawer-app-content">
<header class="mdc-top-app-bar app-bar" id="app-bar"> <header class="mdc-top-app-bar app-bar" id="app-bar">
<div class="mdc-top-app-bar__row"> <div class="mdc-top-app-bar__row">
@@ -84,7 +86,7 @@
<p id="validation_message"></p> <p id="validation_message"></p>
<!-- link to source code on GitHub --> <!-- link to source code on GitHub -->
<a href="https://github.com/mgrove36/demo-code/blob/master/luhn-algorithm/index.html" class="source-code-link mdc-fab mdc-fab--extended" data-mdc-auto-init="MDCRipple"></a> <a href="https://github.com/mgrove36/demo-code/blob/master/luhn-algorithm/index.html" class="source-code-link mdc-fab mdc-fab--extended" data-mdc-auto-init="MDCRipple"></a>
</div> </div>
</main> </main>
</div> </div>

View File

@@ -1,8 +1,8 @@
<div class="mdc-drawer__content"> <div class="mdc-drawer__content">
<nav class="mdc-list"> <div class="mdc-list">
<a class="mdc-list-item" href="/luhn-algorithm/"> <a class="mdc-list-item" href="/luhn-algorithm/">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">credit_card</i> <i class="material-icons mdc-list-item__graphic" aria-hidden="true">credit_card</i>
<span class="mdc-list-item__text">Luhn Algorithm</span> <span class="mdc-list-item__text">Luhn Algorithm</span>
</a> </a>
</nav> </div>
</div> </div>