Suggestion: add a crossmark to close the side menu

[Fazarel]

When you click on the burger menu at the top right, the button (the icon with the 3 slices) disappears, hidden by the menu that appears sliding from the right. To close the menu you have to move the cursor and click on the page.

From an ergonomic point of view, I think it would be more comfortable if the icon of the burger menu became a crossmark, to allow closing the menu in a more intuitive way and without having to move the cursor. To illustrate the idea: https://codepen.io/erikterwan/pen/EVzeRP

Unfortunately I don't have the necessary skills to modify the code and suggest a solution.

[pmoreno-rodriguez]

Thanks @fazarel

I'll take a look at it and try to implement it in the next version..

[Fazarel]

Thanks @pmoreno-rodriguez, so reactive!

[Fazarel]

Hi there,

2 suggestions.

1. The easiest one: Simply add a glyph at the top of the menu. In templates/partials/sidebar_right.html.twig, just after <section id="menu">, something like: <a class="fa-xmark" href="#menu">Menu</a> It works but I can't adapt the CSS to have the icon aligned to the right, in the same place and of the same size as the glyph of the 3 bars.

2. A more elaborate and aesthetically pleasing solution Could be inspired by this example: https://www.albatcp.org I manage to get the 3 bars to become a cross.

HTML in templates/partials/header.html.twig:

<li class="menu">
<a href="#menu">
<button id="boton-menu" class="boton-menu">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</button>
</a>
</li>

HTML in templates/partials/sidebar_right.html.twig

<a href="#menu">
  <button id="boton-menu" class="boton-menu toggled">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
    </button>
</a>

CSS to be added:

/* Botón de Menú animado*/

.boton-menu {
  position: fixed;
  top: 0px;
  right: 0px;
  display: inline-block !important;
  cursor: pointer;
  z-index: 99999;
  margin: 12px 24px;
  background-color: #0000;
  border: none;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 2px;
  border-radius: 1px;
  background-color: #cf293a;
  margin: 9px 0;
  transition: 0.4s;
}

/* Rotate first bar */
.toggled .bar1 {
  -webkit-transform: rotate(-45deg) translate(-0px, 0px) ;
  transform: rotate(-45deg) translate(-5px, 10px) ;
    background-color: #333;
}

/* Fade out the second bar */
.toggled .bar2 {
  opacity: 0;
}

/* Rotate last bar */
.toggled .bar3 {
  -webkit-transform: rotate(45deg) translate(-0px, -0px) ;
  transform: rotate(45deg) translate(-5px, -10px) ;
    background-color: #333;
}

Once again, I'm having trouble with the CSS to get the animation and a nice integration with the Future2021 theme.

[pmoreno-rodriguez]

Hello @fazarel I am working on this improvement. If you want you can do it the following:

1) In sidebar_right.html.twig, bellow the <section id="menu"> add this: <div style="padding: 1.5em;"><a class="close" href="#menu" title="Menu"></a></div>

2) In menu.scss (in assets folder --> sass -> layout), beloww the line 40, add this:

>:nth-child(2) {
            border-top: 0;
        }
        .close {
            @include icon(false, solid);
            @include vendor('transition', 'color #{_duration(transition)} ease-in-out');
            border: 0;
            color: _palette(fg-light);
            cursor: pointer;
            text-align: right;

            &:before {
                content: '\f00d';
                display: block;
                padding: 0.5em 1.5em;
            }

            &:hover {
                color: inherit;
            }

            @include breakpoint('<=small') {
                height: 4em;
                line-height: 4em;

                &:before {
                    padding: 0em;
                }
            }
        }

3) Compile the main.scss file to generate main.css file (for example, with VS Code using Watch Sass plugin).

After that, you can test the close button in the sidebar.

[Fazarel]

Thanks for your help. I've applied the changes (assuming you meant in 1. "below <section id="menu">") and recompiled the CSS, but the close button does not appear: Tested with Firefox and Chromium.

[pmoreno-rodriguez]

Hi @Fazarel I'll try to upload a new version shortly. Maybe you can try this changes.

[pmoreno-rodriguez]

@Fazarel , in new version 1.0.6 the crossmark to close side bar is ready to work.