Lunds universitet - Style Guide

Mobile Navigation: Institution 

<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">Om</a>
                    </div>
                </li>

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

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

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

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

                <li class="mobile-nav-item">
                    <div class="mobile-nav-container">
                        <a href="#" class="nav-link">Fakulteter</a>
                        <a href="#sm-lu-fakulteter" class="mobile-nav-toggle collapsed" data-bs-target="#sm-lu-fakultetercollapsed" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sm-lu-fakulteter" role="button">

                            <span class="collapse-show">
                                <i class="fal fa-plus-circle"></i>
                            </span>
                            <span class="collapse-hide">
                                <i class="fal fa-minus-circle"></i>
                            </span>

                        </a>
                    </div>
                    <ul class="mobile-nav collapse" id="sm-lu-fakultetercollapsed">
                        <li class="mobile-nav-item">
                            <div class="mobile-nav-container">
                                <a href="#" class="nav-link">Campus Helsingborg</a>
                            </div>
                        </li>

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

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

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

                        <li class="mobile-nav-item">
                            <div class="mobile-nav-container">
                                <a href="#" class="nav-link">Konstnärliga fakulteten i Malmö</a>
                            </div>
                        </li>

                        <li class="mobile-nav-item">
                            <div class="mobile-nav-container">
                                <a href="#" class="nav-link">LTH | Lunds tekniska högskola</a>
                            </div>
                        </li>

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

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

                        <li class="mobile-nav-item">
                            <div class="mobile-nav-container">
                                <a href="#" class="nav-link">Samhällsvetenskapliga fakulteten</a>
                            </div>
                        </li>

                    </ul>
                </li>

                <li class="mobile-nav-item">
                    <div class="mobile-nav-container">
                        <a href="#" class="nav-link">Info för</a>
                    </div>
                </li>

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

                <li class="mobile-nav-item">
                    <div class="mobile-nav-container">
                        <a href="#" class="nav-link">English</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": "Institution",
  "nav": {
    "om": {
      "key": "om",
      "active": true,
      "title": "Om"
    },
    "undervisning": {
      "key": "undervisning",
      "title": "Undervisning"
    },
    "forskning": {
      "key": "forskning",
      "title": "Forskning"
    },
    "kontakt": {
      "key": "kontakt",
      "title": "Kontakt"
    }
  },
  "extra-nav": [
    {
      "sm-lu-bibliotek": {
        "key": "sm-lu-bibliotek",
        "title": "Bibliotek",
        "link": "#"
      },
      "sm-lu-fakulteter": {
        "key": "sm-lu-fakulteter",
        "title": "Fakulteter",
        "link": "#",
        "children": {
          "lu-fakultet-campus-helsingborg": {
            "key": "lu-fakultet-campus-helsingborg",
            "title": "Campus Helsingborg",
            "link": "#"
          },
          "lu-fakultet-ekonomihogskolan": {
            "key": "lu-fakultet-ekonomihogskolan",
            "title": "Ekonomihögskolan",
            "link": "#"
          },
          "lu-fakultet-humaniora-och-teologi": {
            "key": "lu-fakultet-humaniora-och-teologi",
            "title": "Humaniora och teologi",
            "link": "#"
          },
          "lu-fakultet-juridiska-fakulteten": {
            "key": "lu-fakultet-juridiska-fakulteten",
            "title": "Juridiska fakulteten",
            "link": "#"
          },
          "lu-fakultet-konstnarliga-fakulteten-i-malmo": {
            "key": "lu-fakultet-konstnarliga-fakulteten-i-malmo",
            "title": "Konstnärliga fakulteten i Malmö",
            "link": "#"
          },
          "lu-fakultet-lth-lunds-tekniska-hogskola": {
            "key": "lu-fakultet-lth-lunds-tekniska-hogskola",
            "title": "LTH | Lunds tekniska högskola",
            "link": "#"
          },
          "lu-fakultet-medicinska-fakulteten": {
            "key": "lu-fakultet-medicinska-fakulteten",
            "title": "Medicinska fakulteten",
            "link": "#"
          },
          "lu-fakultet-naturvetenskapliga-fakulteten": {
            "key": "lu-fakultet-naturvetenskapliga-fakulteten",
            "title": "Naturvetenskapliga fakulteten",
            "link": "#"
          },
          "lu-fakultet-samhallsvetenskapliga-fakulteten": {
            "key": "lu-fakultet-samhallsvetenskapliga-fakulteten",
            "title": "Samhällsvetenskapliga fakulteten",
            "link": "#"
          }
        }
      },
      "info-for": {
        "key": "info-for",
        "title": "Info för",
        "link": "#"
      }
    },
    {
      "lyssna": {
        "key": "lyssna",
        "title": "Lyssna",
        "link": "#",
        "icon": "volume"
      },
      "english": {
        "key": "english",
        "title": "English",
        "link": "#",
        "icon": "globe"
      }
    }
  ]
}

No notes defined.