Preact navbar using bulimia example

Navbar.tsx

import { render, h, Component } from 'preact'
import classnames from 'classnames'
import { addClass, getColorStyle } from '../../utils/style-helper'
import { Color } from '../../utils/props'

interface NavbarOwnProps {
  id: string
  brand?: JSX.Element | string
  color?: Color
  shadow?: boolean
  transparent?: boolean
  fixed?: 'top' | 'bottom'
}

interface NavbarOwnState {
  visible: boolean
}

export class Navbar extends Component<NavbarOwnProps, NavbarOwnState> {
  state = { visible: false }
  render() {
    const { brand, color, fixed, shadow, transparent } = this.props
    setBodyAttributes(fixed)
    return (
      <nav id={ `${this.props.id}` }
        class={ classnames('navbar',
          { 'has-shadow': shadow },
          { 'is-fixed-top': fixed === 'top' },
          { 'is-fixed-bottom': fixed === 'bottom' },
          { 'is-transparent': transparent },
          getColorStyle(color)) }>
        <div class="navbar-brand">
          { typeof brand !== 'string' && addClass(brand, 'navbar-item') }
          { typeof brand === 'string' && addClass(<p>{ brand }</p>, 'navbar-item') }
          <div
            class={ classnames('navbar-burger', { 'is-active': this.state.visible }) }
            onClick={ this.toggleMenu }
            data-target={ `${this.props.id}-menu` }>
            <span />
            <span />
            <span />
          </div>
        </div>
        <div id={ `${this.props.id}-menu` } class={ classnames('navbar-menu', { 'is-active': this.state.visible }) }>
          { this.props.children }
        </div>
      </nav>
    )
  }
  private toggleMenu = () => this.setState({ visible: !this.state.visible })
}

function setBodyAttributes(fixed?) {
  document.body.classList.remove('has-navbar-fixed-top', 'has-navbar-fixed-bottom')
  if (fixed === 'top') {
    document.body.classList.add('has-navbar-fixed-top')
  }
  else if (fixed === 'bottom') {
    document.body.classList.add('has-navbar-fixed-bottom')
  }
}