dna-engine ~~ Panel click navigation

An uncomplicated user interface library

by pilafmon

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dna-engine@3/dist/dna-engine.css">
<script src="https://cdn.jsdelivr.net/npm/dna-engine@3/dist/dna-engine.min.js"></script>
<h2>Author Information</h2>

<nav class=dna-menu>
   <button id=nav-button class=dna-template>~~name~~</button>
</nav>

<div class=dna-panels>
   <section id=author class=dna-template>
      <p>Name:      <b>~~name~~</b></p>
      <p>Publisher: <b>~~publisher~~</b></p>
      <p>Agent:     <b>~~agent~~</b></p>
   </section>
</div>

CSS

body {
   font-family: system-ui, sans-serif;
   margin: 30px;
   }
nav button {
   font-size: 1.2rem;
   color: white;
   background-color: dimgray;
   border: none;
   border-radius: 5px;
   padding: 3px 12px;
   margin: 0px 10px 10px 0px;
   transition: all 400ms;
   }
nav button:hover,
nav button.selected {
   background-color: goldenrod;
   }
section.panel {
   background-color: goldenrod;
   padding: 10px 20px;
   }

JavaScript

// dna-engine.org

const authors = [
   { name: 'Jake', publisher: 'BioOne',  agent: 'N/A' },
   { name: 'Abby', publisher: 'Addison', agent: 'Pro Reps' },
   { name: 'Ed',   publisher: 'ASM',     agent: 'Feven' },
	];
dna.clone('nav-button', authors);
dna.clone('author',     authors);