Lunds universitet - Style Guide

Mobile Navigation: medarbetarweb 

<div class="modal fade" id="nav-mobile" tabindex="-1" role="dialog" aria-labelledby="nav-mobile-label" aria-hidden="true">
    <div class="modal-dialog my-0 mx-auto" role="document">
        <div class="modal-content border-0 rounded-0">
            <div class="modal-header justify-content-end">
                <button type="button" class="border-0 bg-transparent cursor-pointer lh-0 p-2 nm-2" data-bs-dismiss="modal" aria-controls="nav-mobile" aria-expanded="false" aria-label="Dölj meny">
                    <span aria-hidden="true"><i class="fal fa-times fa-lg"></i></span>
                </button>
            </div>
            <ul class="mobile-nav mobile-nav-root border-0 nav-collapse font-size-sm nav-undecorated">
                <li class="mobile-nav-item">
                    <div class="mobile-nav-container">
                        <a href="#" class="nav-link">Anställning</a>
                    </div>
                </li>

                <li class="mobile-nav-item">
                    <div class="mobile-nav-container">
                        <a href="#" class="nav-link">Stöd och verktyg</a>
                    </div>
                </li>

                <li class="mobile-nav-item">
                    <div class="mobile-nav-container">
                        <a href="#" class="nav-link">Forska och utbilda</a>
                    </div>
                </li>

                <li class="mobile-nav-item">
                    <div class="mobile-nav-container">
                        <a href="#" class="nav-link">Organisation och styrning</a>
                    </div>
                </li>

                <li class="mobile-nav-item">
                    <div class="mobile-nav-container">
                        <a href="#" class="nav-link">Ekonomiwebben</a>
                    </div>
                </li>

                <li class="mobile-nav-item">
                    <div class="mobile-nav-container">
                        <a href="#" class="nav-link">HR-webben</a>
                    </div>
                </li>

                <li class="mobile-nav-item">
                    <div class="mobile-nav-container">
                        <a href="#" class="nav-link">LU.se</a>
                    </div>
                </li>

            </ul>
        </div>
    </div>
</div>
 
<div class="modal fade" id="{{id}}" tabindex="-1" role="dialog" aria-labelledby="{{id}}-label" aria-hidden="true">
  <div class="modal-dialog my-0 mx-auto" role="document">
    <div class="modal-content border-0 rounded-0">
      <div class="modal-header justify-content-end">
        <button type="button" class="border-0 bg-transparent cursor-pointer lh-0 p-2 nm-2" data-bs-dismiss="modal"
                aria-controls="{{id}}" aria-expanded="false" aria-label="Dölj meny">
          <span aria-hidden="true"><i class="fal fa-times fa-lg"></i></span>
        </button>
      </div>
      <ul class="mobile-nav mobile-nav-root border-0 nav-collapse font-size-sm nav-undecorated">
        {{#each nav}}
          {{#if ../single}}
            {{render "@mobile-navigation-link--root" this merge=true}}
          {{else}}
            {{render "@mobile-navigation-link" this}}
          {{/if}}
        {{/each}}
        {{#each extra-nav}}
          {{#each this}}
            {{render "@mobile-navigation-link" this}}
          {{/each}}
        {{/each}}
      </ul>
    </div>
  </div>
</div>
 
{
  "id": "nav-mobile",
  "show-title": false,
  "title": "medarbetarweb",
  "nav": {
    "om": {
      "key": "anstallning",
      "active": true,
      "title": "Anställning"
    },
    "undervisning": {
      "key": "stodochverktyg",
      "title": "Stöd och verktyg"
    },
    "forskning": {
      "key": "forskaochutbilda",
      "title": "Forska och utbilda"
    },
    "kontakt": {
      "key": "orgochstyrning",
      "title": "Organisation och styrning"
    }
  },
  "extra-nav": [
    {
      "sm-lu-ekonomiwebben": {
        "key": "sm-lu-ekonomiwebben",
        "title": "Ekonomiwebben",
        "link": "#"
      },
      "sm-lu-hrwebben": {
        "key": "sm-lu-hrwebben",
        "title": "HR-webben",
        "link": "#"
      },
      "sm-lu": {
        "key": "sm-lu",
        "title": "LU.se",
        "link": "#"
      }
    }
  ]
}

No notes defined.