Suggestion: add a crossmark to close the side menu about grav-theme-future2021

[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.