var bgcolor = '#FFF'

var node1

var toc = []

if (document.body.classList.contains("observablehq--dark")) {bgcolor = '#333';}

let sections =d3.selectAll("h2").on("click", function() {goto("menubar")}).selectAll(function(a,b) {

toc.push(`<a href="#" onclick="goto('${this.id}')"><i class="material-icons icon">filter_${b+1}</i> `+shorten(this.innerHTML, 30)+"</a>")

});

//.each(x=>console.log(x))

console.log(sections)

yield html `

<a href="https://beta.observablehq.com/@jashkenas/introduction-to-mutable-state" target="_blank">

<i class="material-icons icon">filter_3</i>@Jeremy's mutable state</a>

</div>

<span class="menuLabel"><i class="material-icons icon">help</i> About</span>

<div class="menuDropDown">

<a href="#AlphabetDance"><i class="material-icons icon">notifications</i>Isograms</a>

<a href="#Ciphers"><i class="material-icons icon">notifications_active</i>Ciphers</a>

<a href="#TenLetterCiphers"><i class="material-icons icon">code</i>Ten Letter Ciphers</a>

</div>

<span class="menuLabel"><i class="material-icons icon">fullscreen</i> <i class="material-icons icon">apps</i> <i class="material-icons icon">open_with</i> <i class="material-icons icon">extension</i> <i class="material-icons icon">play_circle_filled</i> <i class="material-icons icon">add_circle</i> <i class="material-icons icon">menu</i> <i class="material-icons icon">extension</i> <i class="material-icons icon">qrcode</i></span>

<div class="menuDropDown">

<a href="#AlphabetDance"><i class="material-icons icon">add</i> Isograms</a>

<a href="#Ciphers"><i class="material-icons icon">notifications_active</i> Ciphers</a>

<a href="#TenLetterCiphers"><i class="material-icons icon">code</i> Ten Letter Ciphers</a>

</div>

</div>

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap" rel="stylesheet">

<style>

h1, h2, h3, h4, h5, h6 {

font-family:Roboto Condensed;

}

#menubar {font-size:18px; user-select:none; color:var(--syntax_normal;); font-family:Roboto Condensed;

border-top: 1px solid var(--syntax_normal); border-bottom: 1px solid var(--syntax_normal);

padding-top: 5px; padding-bottom: 5px;

padding-left: 40px; width: 100%;

}

.material-icons { vertical-align: middle; }

#menubar div{display:inline-block; vertical-align:top}

/* Menu label (no hover) */

#menubar .menuLabel{padding:4px 4px 4px 4px;margin-right:10px;margin-left:-8px}

/* Menu label (hover) */

#menubar .menuLabel:hover{background: var(--selection)}

/* Drop-down menu */

#menubar div div{position:absolute;display:block;min-width:220px;overflow:auto;background:${bgcolor};box-shadow:0px 2px 6px 0px var(--syntax_normal);z-index:4;padding:4px 2px 2px 30px;margin-left:-8px;margin-top:4px}

/* Drop-down menu (hidden) */

#menubar span:not(.activeMenu) + div{visibility:hidden}

/* Menu item */

#menubar div div a{color:var(--syntax_normal);text-decoration:none;display:block;padding:4px;margin:4px 0 4px}

/* Left-aligned icon within a menu item */

#menubar div div a .icon{position:absolute;left:9px}

/* Hotkey documentation in a menu item */

#menubar div div a .hotkey{position:absolute;right:9px;color:var(--syntax_normal)}

/* Google's icon font within the menu */

#menubar div div a .material-icons{font-size:120%;color:var(--syntax_normal)}

#menubar div div a:hover, #menubar div div a:focus {background: var(--selection);}

/* Line between menu items */

#menubar div div hr{border:none;height:1px;background:var(--syntax_normal);margin:5px -2px 5px -30px}

</style>

`

//if (HTMLCollection.prototype.forEach === undefined) {HTMLCollection.prototype.forEach = [].forEach }

function closeAllMenus() {

d3.selectAll('.activeMenu').each(

function (node) {this.classList.remove('activeMenu')}

)}

function showMenu(e,e1) {

closeAllMenus();

console.log(e,e1,this)

this.classList.add('activeMenu');

e.stopPropagation();

let self = this

// Move the dropdown under the label clicked

let mdr = d3.select(e.target).selectAll(()=>{this.nextElementSibling.style.marginLeft = (self.offsetLeft - 40)+'px';}) // .select('.menuDropDown')

console.log(this,mdr,self)

//mdr.style.marginLeft = (self.offsetLeft - 40)+'px';

//each((menu, e3) => {

//console.log(self, this, menu,e3)

//this.style.marginLeft = (self.offsetLeft - 40)+'px';

//})

}

(function() {

function on(e,f){window.addEventListener(e,f)}

on('click', closeAllMenus, true)

on('keydown', function (event) { (event.key === "Escape") && closeAllMenus() }, true)

})();

d3.selectAll('.menuLabel').each(function(node) {this.onclick = showMenu;})

function goto(id) {

console.log(id)

document.getElementById(id).scrollIntoView({ behavior: 'smooth' });

}

window.goto = goto

function shorten(txt, noChar){

let len = txt.length

if ( len < noChar) return txt;

let half = Math.floor(noChar/2)

return txt.slice(0, half)+ ".." +txt.slice(-half)

}

}