Example: Menu

In this example we build a simple menu with RobJS.
The way of doing it is very similar to the conditional style rendering but now we render whole components instead.

1. Start with the usual index.html-file where you define a div-Tag with an id of your choice.

    
<!-- index.html -->
<div id='myapp'></div>
<script type='module' src='app.js'></script>
    
    

2. In app.js, we set up our project as follows.

    
// app.js
import { RobJSApp } from "./Rob.js"
import { Menu } from "./Menu.js"

const app = new RobJSApp('myapp')
app.init('app')
app.defineStateVar('menu', 'menuPoint1');
app.registerComponent(Menu, 'menu1', ['menu'])
app.initialRender(Menu, 'menu1')  
    
    

3. Create a file called Menu.js where we define three components.

    
// Menu.js

// In this simple example these two menu points do not need to be registered as a component as they do not contain state variables.
// They also do not need ids for that reason.
// In a real project these would probably be bigger, composed components and would reside most likely in their own seperate files.
const MenuPoint1 = () => `<h1>This is Menu Point 1</h1>`
const MenuPoint2 = () => `<h1>And this Menu Point 2</h1>`

export const Menu = (id) => {

    let menupoint
    if (app.state.menu === 'menuPoint1') {
        menupoint = MenuPoint1()
    } else {
        menupoint = MenuPoint2()
    }
        
    return `
        <div id=${id}>
        <ul>
            <li>
                <a onclick='app.updateState("menu", "menuPoint1")'>MenuPoint1</a>
            </li>
            <li>
                <a onclick='app.updateState("menu", "menuPoint2")'>MenuPoint2</a>
            </li>
        </ul>
        ${menupoint}
        </div>
    `
};
    
    

4. With a bit of styling it looks and works like this.