SideNavigation

To create side navigation use the SideNav structure. We can animate the links by setting animation to true. You can customise the animation in the generated Link object.

let elements = [
  {
    type: "sideNav",
    animation: true, // optional
    items: [ // optional
      {
        title: "About",
        link: "A"
      },
      {
        title: "Work",
        link: "A"
      },
      {
        title: "Contact",
        link: "A"
      }
    ]
  }
];

This generates the following SideNav structure.

SideNav Setup Properties

Property	Description
animate	Enables or disables animations for the side navigation (true or false).
radius	Sets the border-radius of the side navigation (e.g., "1rem").
isSide	Determines if the navigation is a side panel (true for side navigation).
background	Sets the background color of the side navigation (e.g., "#ecf0f1").
hamColour	An object defining the hamburger menu colors:

• opened: color when menu is open
• closed: color when menu is closed | | mobileSize | Sets the size of the hamburger icon on mobile devices (e.g., "1.2em"). |

new SideNav().setup({
    animate: true,
    radius: "1rem",
    isSide: true,
    background: "#ecf0f1",
    hamColour: {
        opened: "#1abc9c",
        closed: "#e67e22"
    },
    mobileSize: "1.2em"
}, true).items(
    new Wrapper()
    .set({
        column: "true"
    })
    .add([
        new Text("Ultra Reckoning")
        .set({
            size: "S6",
            id: "#olod",
            pad: [{
                l: 40
            }, {
                t: 20
            }],
            font: "Arial",
            italic: "true",
            animation: {
                range: ["0px", "1900px"],
                op: {
                    name: "animation",
                    color: "green",
                    width: "1px"
                }
            }
        })

        ,
        new Link()
        .set({
            pad: [{
                a: 20
            }],
            font: "Arial",
            fluidc: "S4",
            id: "#home",
            align: "left",
            bold: true,
            link: "@e",
            text: "Home",
            animation: {
                range: ["0px", "1900px"],
                op: {
                    name: "animation",
                    color: "green",
                    width: "1px",
                    keyframesOpen: [{
                        transform: "translate(100%, 0%)",
                        opacity: 0
                    }, {
                        transform: "translate(0%)",
                        opacity: 1
                    }],
                    keyframesClose: [{
                        transform: "translate(0%)",
                        opacity: 1
                    }, {
                        transform: "translate(100%, 0%)",
                        opacity: 0
                    }],
                    openOptions: {
                        duration: 300,
                        fill: "forwards",
                        delay: 1000
                    },
                    closeOptions: {
                        duration: 1,
                        fill: "forwards",
                        delay: 1000
                    }
                }
            },
        }),
        //...

    ])).render("#mount");