Changeset 24547b4 in tailbone


Ignore:
Timestamp:
03/28/19 22:15:08 (6 months ago)
Author:
Lance Edgar <ledgar@…>
Branches:
master
Children:
05b8ed7
Parents:
18ad664
Message:

Add proper hamburger menu for falafel theme

fixes "disappearing menu" issue on mobile

File:
1 edited

Legend:

Unmodified
Added
Removed
  • tailbone/templates/themes/falafel/base.mako

    r18ad664 r24547b4  
    3434
    3535      <nav class="navbar" role="navigation" aria-label="main navigation">
     36
     37        <div class="navbar-brand">
     38          <a class="navbar-item" href="${url('home')}">
     39            ${base_meta.header_logo()}
     40            ${base_meta.global_title()}
     41          </a>
     42          <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
     43            <span aria-hidden="true"></span>
     44            <span aria-hidden="true"></span>
     45            <span aria-hidden="true"></span>
     46          </a>
     47        </div>
     48
    3649        <div class="navbar-menu">
    3750          <div class="navbar-start">
     
    91104        <div class="level-left">
    92105
    93           ## App Logo / Name
    94           <div class="level-item">
    95             <a class="home" href="${url('home')}">
    96               <div id="header-logo">${base_meta.header_logo()}</div>
    97               <span class="global-title">${base_meta.global_title()}</span>
    98             </a>
    99           </div>
    100 
    101106          ## Current Context
    102107          <div id="current-context" class="level-item">
    103108            % if master:
    104                 <span>&raquo;</span>
    105109                % if master.listing:
    106110                    <span>${index_title}</span>
     
    119123                % endif
    120124            % elif index_title:
    121                 <span>&raquo;</span>
    122125                <span>${index_title}</span>
    123126            % endif
     
    280283        });
    281284    % endif
     285    $(function() {
     286        ## NOTE: this code was copied from
     287        ## https://bulma.io/documentation/components/navbar/#navbar-menu
     288        $('.navbar-burger').click(function() {
     289            $('.navbar-burger').toggleClass('is-active');
     290            $('.navbar-menu').toggleClass('is-active');
     291        });
     292    });
    282293  </script>
    283294  ## ${h.javascript_link(request.static_url('tailbone:static/js/tailbone.js') + '?ver={}'.format(tailbone.__version__))}
Note: See TracChangeset for help on using the changeset viewer.