adicionado funcionalidade

LimaJonas · May 19, 2021 · 82c3325 · 82c3325
1 parent 827e7a8
commit 82c3325
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,18 @@
-# Magento2-Menu-Colapsado-Mobile
-Modulo para adicionar botões no Menu Lateral da visão mobile do tema
+## Magento Modulo de Menu Colapsado - BR
+
+- Modulo para adicionar botões no menu lateral colapsado da visão mobile do tema.
+- Testado e criado usando Magento 2.3.6
+### Instalação (Apenas manual)
+- Faça o [download](https://github.com/LimaJonas/Magento2-Menu-Colapsado-Mobile/releases "download") do modulo.
+- Em [Magento_Root]/App/Code, crie as pastas Jonaslima/Sidemenumobile.
+- Extraia arquivos dentro da pasta Sidemenumobile.
+- Execute os comandos:
+
+```
+php bin/magento setup:upgrade
+php bin/magento setup:static-content:deploy pt_BR -f
+php bin/magento cache:flush
+```
+- Pronto, instalado. Basta testar!
+## Imagens
+[![](https://i.imgur.com/drF7Emz.gif)](https://i.imgur.com/drF7Emz.gif)
diff --git a/view/frontend/layout/default_head_blocks.xml b/view/frontend/layout/default_head_blocks.xml
@@ -0,0 +1,14 @@
+<?xml version="1.0"?>
+<!-- 
+/**
+* Jonas Lima
+* https://github.com/LimaJonas
+*/
+-->
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xml">
+    <head>
+        <css src="https://use.fontawesome.com/releases/v5.7.1/css/all.css" src_type="url"/>
+        <css src="Jonaslima_Collapsedmenu::css/CollapsedSidebar.css" />
+        <link src="Jonaslima_Collapsedmenu::js/CollapsedSidebar.js" />
+    </head>
+</page>
diff --git a/view/frontend/web/css/CollapsedSidebar.css b/view/frontend/web/css/CollapsedSidebar.css
@@ -0,0 +1,23 @@
+/* Dropdown das categorias */
+li.level0 ul {
+    display:none;
+}
+li.level0 ul a {
+    position:relative;
+}
+.rm-expand {
+    float:right;
+    display:block;
+    font-family: 'icons-blank-theme';
+    font-size:32px;
+    position:absolute;
+    right: 7px;
+    top: -6px;
+    color: #808080;
+}
+@media only screen and (min-width: 768px){
+    .rm-expand {
+        font-size: 28px !important;
+        top: -2px !important;
+    }
+}
diff --git a/view/frontend/web/js/CollapsedSidebar.js b/view/frontend/web/js/CollapsedSidebar.js
@@ -0,0 +1,21 @@
+require(['jquery', 'jquery/ui'], function($){
+  $(document).ready(function() {
+  if(window.innerWidth <= 767){
+    $('li.level0 li.parent > a').append('<span class="rm-expand"><i class="fas fa-sort-down"></i></span>');
+    $('.rm-expand').click(function() {
+      if ($(this).hasClass('open')) {
+        $(this).parent().parent().find('ul:first').slideUp();
+        $(this).removeClass('open');
+        $(this).html('<i class="fas fa-sort-down"></i>');
+      } else {
+        $(this).parent().parent().find('ul:first').slideDown();
+        $(this).addClass('open');
+        $(this).html('<i class="fas fa-sort-up"></i>');
+      }
+      return false;
+    });
+  } else{
+    $('li.level0 li.parent > a').append('<span class="rm-expand"><i class="fas fa-caret-right"></i></span>');
+  }
+  });
+});