Home › Forums › Porto Admin – Responsive HTML5 Template › Mobile Navigation Toggle without Function (React JS)
- This topic has 1 reply, 2 voices, and was last updated 6 years, 5 months ago by Support2. This post has been viewed 1143 times
-
AuthorPosts
-
November 15, 2017 at 9:02 am #10023484fabbi94Participant
Hello together,
I use your template in my ReactJS application. I got run the dropdown menu by set the following code in the theme.js
// Navigation window.setInterval(function(){ // TODO MAKE BETTER (function($) { var $items = $( '.nav-main li.nav-parent' ); function expand( $li ) { $li.children( 'ul.nav-children' ).slideDown( 'fast', function() { $li.addClass( 'nav-expanded' ); $(this).css( 'display', '' ); ensureVisible( $li ); }); } function collapse( $li ) { $li.children('ul.nav-children' ).slideUp( 'fast', function() { $(this).css( 'display', '' ); $li.removeClass( 'nav-expanded' ); }); } function ensureVisible( $li ) { var scroller = $li.offsetParent(); if ( !scroller.get(0) ) { return false; } var top = $li.position().top; if ( top < 0 ) { scroller.animate({ scrollTop: scroller.scrollTop() + top }, 'fast'); } } function buildSidebarNav( anchor, prev, next, ev ) { if ( anchor.prop('href') ) { var arrowWidth = parseInt(window.getComputedStyle(anchor.get(0), ':after').width, 10) || 0; if (ev.offsetX > anchor.get(0).offsetWidth - arrowWidth) { ev.preventDefault(); } } if ( prev.get( 0 ) !== next.get( 0 ) ) { collapse( prev ); expand( next ); } else { collapse( prev ); } } $items.find('> a').on('click', function( ev ) { var $html = $('html'), $window = $(window), $anchor = $( this ), $prev = $anchor.closest('ul.nav').find('> li.nav-expanded' ), $next = $anchor.closest('li'), $ev = ev; if( !$html.hasClass('sidebar-left-big-icons') ) { buildSidebarNav( $anchor, $prev, $next, $ev ); } else if( $html.hasClass('sidebar-left-big-icons') && $window.width() < 768 ) { buildSidebarNav( $anchor, $prev, $next, $ev ); } }); }).apply(this, [jQuery]); }, 1000);
As you can see I rerun the script every second, otherwise the dropdown does not work with reactJS (dynamic content).
Now I have a second problem. If I use the website mobile then I see the toggle to open the sidebar but nothing happen when I click the button. So what can be the problem with the background that I am using reactJS. Or where are the relevant code for this toggle to open the sidebar that I can try it on my own too.
Best,
Fabian
Template Version: 1.70November 16, 2017 at 10:58 pm #10023499Support2KeymasterHello Fabian, thanks for your purchase.
Unfortunately we can’t support React applications, since the Porto Admin don’t is React ready and we don’t have experience with React.
But we can help you with some hints below that should work in that case:1) Try with the code below:
// Navigation window.setInterval(function(){ // TODO MAKE BETTER var $items = $( '.nav-main li.nav-parent' ); function expand( $li ) { $li.children( 'ul.nav-children' ).slideDown( 'fast', function() { $li.addClass( 'nav-expanded' ); $(this).css( 'display', '' ); ensureVisible( $li ); }); } function collapse( $li ) { $li.children('ul.nav-children' ).slideUp( 'fast', function() { $(this).css( 'display', '' ); $li.removeClass( 'nav-expanded' ); }); } function ensureVisible( $li ) { var scroller = $li.offsetParent(); if ( !scroller.get(0) ) { return false; } var top = $li.position().top; if ( top < 0 ) { scroller.animate({ scrollTop: scroller.scrollTop() + top }, 'fast'); } } function buildSidebarNav( anchor, prev, next, ev ) { if ( anchor.prop('href') ) { var arrowWidth = parseInt(window.getComputedStyle(anchor.get(0), ':after').width, 10) || 0; if (ev.offsetX > anchor.get(0).offsetWidth - arrowWidth) { ev.preventDefault(); } } if ( prev.get( 0 ) !== next.get( 0 ) ) { collapse( prev ); expand( next ); } else { collapse( prev ); } } $items.find('> a').on('click', function( ev ) { var $html = $('html'), $window = $(window), $anchor = $( this ), $prev = $anchor.closest('ul.nav').find('> li.nav-expanded' ), $next = $anchor.closest('li'), $ev = ev; if( !$html.hasClass('sidebar-left-big-icons') ) { buildSidebarNav( $anchor, $prev, $next, $ev ); } else if( $html.hasClass('sidebar-left-big-icons') && $window.width() < 768 ) { buildSidebarNav( $anchor, $prev, $next, $ev ); } }); }, 1000);
2) Regarding the toggle button on mobile to open the sidebar, it works using the “Bootstrap Toggle” that you can found on line 1121 of “assets/javascripts/theme.js”.
This is the required HTML of button:<div class="visible-xs toggle-sidebar-left" data-toggle-class="sidebar-left-opened" data-target="html" data-fire-event="sidebar-left-opened"> <i class="fa fa-bars" aria-label="Toggle sidebar"></i> </div>
Also is necessary the CSS code of class “.sidebar-left-opened”, that you can find in “assets/stylesheets/theme.css”.
Please, try that and let me know if you need further assistance.
Kind Regards,
Rodrigo.
-
AuthorPosts
This topic is marked as "RESOLVED" and can not rceive new replies.