footballrs.net

Burger 

<div class="burger outline-0 focus-visible:outline-0">
    <button title="Navigation">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
    </button>
</div>
 
{# --BLUEPRINT DO NOT REMOVE--

/--BLUEPRINT DO NOT REMOVE-- #}
<div class="burger outline-0 focus-visible:outline-0">
    <button
        title="Navigation"
    >
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
    </button>
</div>
 
/* No context defined. */
  • Content: 
    <?php

namespace Theme\Views\Atoms\burger;

use ACFToolkit\Types\CustomAtom;


class Burger extends CustomAtom
{
    public string $name = 'burger';
    public string $label = 'Burger';
    public int $needsJs = 1;
    public int $needsVue = 0;
    public int $needsVueInitialisation = 0;

    public function __construct($name = '', $title = '', $children = [])
    {
        parent::__construct($name, $title);
        $this->addChildren(array_merge($children, [
        ]));
    }
}
  • URL: /components/raw/burger/Burger.php
  • Filesystem Path: resources/Views/Atoms/burger/Burger.php
  • Size: 485 Bytes
  • Content: 
    <?php

namespace Theme\Views\Atoms\burger;

use ACFToolkit\ViewModels\BaseViewModel;

class BurgerViewModel extends BaseViewModel
{
}
  • URL: /components/raw/burger/BurgerViewModel.php
  • Filesystem Path: resources/Views/Atoms/burger/BurgerViewModel.php
  • Size: 134 Bytes
  • Content: 
    export class Burger {
    static CSS_SELECTOR = '.burger'

    static init = () => {
        document.querySelectorAll(Burger.CSS_SELECTOR).forEach(burger => {
            new Burger(burger)
        })
    }

    constructor(rootEl)
    {
        const btn = rootEl.querySelector('button')
        btn.addEventListener('click', e => {
            rootEl.classList.toggle('open')
            document.body.dispatchEvent(new Event('burger-toggle'))
        })

        document.body.addEventListener('nav-close', () => {
            rootEl.classList.remove('open')
        })
    }
}
  • URL: /components/raw/burger/burger.js
  • Filesystem Path: resources/Views/Atoms/burger/burger.js
  • Size: 581 Bytes
  • Content: 
    .burger {

  position: relative;
  cursor: pointer;

  .bar {
    @apply bg-primary block mx-auto relative;
    height: 2px;
    width: 20px;
    margin-top: 4px;
    transition: transform .25s ease-in-out, opacity .25s ease-in-out;

    &:first-child {
      margin-top: 0;
    }
  }

  &.open {
    .bar {
      &:nth-of-type(1) {
        transform: translateY(7px) rotate(45deg);
      }

      &:nth-of-type(2) {
        opacity: 0;
      }

      &:nth-of-type(3) {
        transform: translateY(-5px) rotate(-45deg);
      }
    }
  }

}
  • URL: /components/raw/burger/burger.scss
  • Filesystem Path: resources/Views/Atoms/burger/burger.scss
  • Size: 544 Bytes

title: Burger

{% include '@atoms/burger/burger.twig' with {

    } only %}

ACF

Fields