UHasselt Component Library

Inpage Nav: Wiw 

<div class="inpage-nav">
    <div class="wiw-nav-profile">
        <div class="wrap-info">
            <picture class="picture ">
                <source srcset="https://picsum.photos/id/235/75/150" media="(min-width: 1024px)">
                <source srcset="https://picsum.photos/id/235/75/150" media="(min-width: 640px)">
                <img class="picture-image " src="https://picsum.photos/id/235/75/150" alt="The quick brown fox jumps over the lazy dog" loading="lazy">
            </picture>

            <div>
                <strong>Prof. dr. Marlies van Bael</strong>
                <p>ZAP | Gewoon Hoogleraar</p>
            </div>
        </div>
        <a href="#" class="button button-gray ">
            <span>
                <span class="text">
                    Ik wil mijn pagina editeren
                </span>
            </span>
        </a>

    </div>
    <div class="inpage-nav-inner">
        <ul class="">
            <li>
                <a href="#" class="link " aria-label="" title="">

                    <span class="text">Bachelor</span>

                </a>

            </li>
            <li>
                <a href="#" class="link " aria-label="" title="">

                    <span class="text">Master</span>

                </a>

            </li>
            <li>
                <a href="#" class="link " aria-label="" title="">

                    <span class="text">Voor wie?</span>

                </a>

            </li>
            <li>
                <a href="#" class="link " aria-label="" title="">

                    <span class="text">Wanneer heb je les</span>

                </a>

            </li>
            <li>
                <a href="#" class="link " aria-label="" title="">

                    <span class="text">Wanneer heb je les</span>

                </a>

            </li>
            <li>
                <a href="#" class="link " aria-label="" title="">

                    <span class="text">Wanneer heb je les</span>

                </a>

            </li>
        </ul>
        <a class="button button-black ">
            <span>
                <span class="text">
                    Direct inschrijven?
                </span>
            </span>
        </a>

    </div>
    <div class="wiw-nav-naw">
        <div class="copy-email"><a href="mailto:marlies.vanbael@uhasselt.be" class="link " aria-label="" title="E-mail Marlies">
                <span class="icon far fa-envelope   " aria-hidden="true"></span>
                <span class="text">E-mail Marlies</span>

            </a>
            <a title="Copy e-mail" href="#" class="button button-white-sm ">
                <span>
                    <span class="text">
                        Copy e-mail
                    </span>
                </span>
            </a>
        </div>
        <a href="tel:+32 (0) 11 26 92 85" class="link " aria-label="" title="+32 (0) 11 26 92 85">
            <span class="icon far fa-phone-alt   " aria-hidden="true"></span>
            <span class="text">+32 (0) 11 26 92 85</span>

        </a>

        <a href="#" class="link " aria-label="" title="Campus Diepenbeek Gebouw D Kantoor D.F4.04">
            <span class="icon far fa-map-marker-alt   " aria-hidden="true"></span>
            <span class="text">Campus Diepenbeek Gebouw D Kantoor D.F4.04</span>

        </a>

    </div>
    <div class="wiw-nav-social">
        <h2 class="heading ">
            Volgen op
        </h2>
        <div class="linkedin"><a href="#" class="link " aria-label="" title="This is what a link looks like">

                <span class="text">LinkedIn</span>

            </a>
        </div>
        <div class="twitter"><a href="#" class="link " aria-label="" title="This is what a link looks like">

                <span class="text">Twitter</span>

            </a>
        </div>
        <div class="orcid"><a href="#" class="link " aria-label="" title="This is what a link looks like">

                <span class="text">Orcid</span>

            </a>
        </div>
        <div class="researcherid"><a href="#" class="link " aria-label="" title="This is what a link looks like">

                <span class="text">Researcherid</span>

            </a>
        </div>
        <div class="researchgate"><a href="#" class="link " aria-label="" title="This is what a link looks like">

                <span class="text">ResearchGate</span>

            </a>
        </div>
        <div class="googlescholar"><a href="#" class="link " aria-label="" title="This is what a link looks like">

                <span class="text">Google Scholar</span>

            </a>
        </div>
    </div>
</div>
<div class="dropdown-nav">
    <details>
        <summary>
            <div class="wrapper">
                <div>
                    Bekijk de inhoud van deze pagina
                </div>
                <span class="icon fal fa-angle-down  fa-lg icon-open" aria-hidden="true"></span>
                <span class="icon fal fa-angle-up  fa-lg icon-close" aria-hidden="true"></span>
            </div>
        </summary>
        <div class="wiw-nav-profile">
            <div class="wrap-info">
                <picture class="picture ">
                    <source srcset="https://picsum.photos/id/235/75/150" media="(min-width: 1024px)">
                    <source srcset="https://picsum.photos/id/235/75/150" media="(min-width: 640px)">
                    <img class="picture-image " src="https://picsum.photos/id/235/75/150" alt="The quick brown fox jumps over the lazy dog" loading="lazy">
                </picture>

                <div>
                    <strong>Prof. dr. Marlies van Bael</strong>
                    <p>ZAP | Gewoon Hoogleraar</p>
                </div>
            </div>
            <a href="#" class="button button-gray ">
                <span>
                    <span class="text">
                        Ik wil mijn pagina editeren
                    </span>
                </span>
            </a>

        </div>
        <div class="dropdown-content">
            <a href="#" class="link " aria-label="" title="">

                <span class="text">Bachelor</span>

            </a>

            <a href="#" class="link " aria-label="" title="">

                <span class="text">Master</span>

            </a>

            <a href="#" class="link " aria-label="" title="">

                <span class="text">Voor wie?</span>

            </a>

            <a href="#" class="link " aria-label="" title="">

                <span class="text">Wanneer heb je les</span>

            </a>

            <a href="#" class="link " aria-label="" title="">

                <span class="text">Wanneer heb je les</span>

            </a>

            <a href="#" class="link " aria-label="" title="">

                <span class="text">Wanneer heb je les</span>

            </a>

        </div>
        <div class="wiw-nav-naw">
            <div class="copy-email"><a href="mailto:marlies.vanbael@uhasselt.be" class="link " aria-label="" title="E-mail Marlies">
                    <span class="icon far fa-envelope   " aria-hidden="true"></span>
                    <span class="text">E-mail Marlies</span>

                </a>
                <a title="Copy e-mail" href="#" class="button button-white-sm ">
                    <span>
                        <span class="text">
                            Copy e-mail
                        </span>
                    </span>
                </a>
            </div>
            <a href="tel:+32 (0) 11 26 92 85" class="link " aria-label="" title="+32 (0) 11 26 92 85">
                <span class="icon far fa-phone-alt   " aria-hidden="true"></span>
                <span class="text">+32 (0) 11 26 92 85</span>

            </a>

            <a href="#" class="link " aria-label="" title="Campus Diepenbeek Gebouw D Kantoor D.F4.04">
                <span class="icon far fa-map-marker-alt   " aria-hidden="true"></span>
                <span class="text">Campus Diepenbeek Gebouw D Kantoor D.F4.04</span>

            </a>

        </div>
    </details>
</div>
 
<div class="inpage-nav">
    {{#if inpage-nav-title}}
        <span>
            {{inpage-nav-title/title}}
        </span>
    {{/if}}
    {{#if wiw-nav-profile}}
        <div class="wiw-nav-profile">
            <div class="wrap-info">
                {{render '@image' wiw-nav-profile/image merge=true}}
                <div>
                    <strong>{{wiw-nav-profile/name}}</strong>
                    <p>{{wiw-nav-profile/function}}</p>
                </div>
            </div>
            {{render '@button--gray' wiw-nav-profile/button merge=true}}
        </div>
    {{/if}}
    <div class="inpage-nav-inner">
        <ul class="{{modifier}}">
            {{#each items}}
                <li>
                    {{render '@link' this}}
                </li>
            {{/each}}
        </ul>
        {{#if button}}
            {{render '@button' button}}
        {{/if}}
    </div>
    {{#if wiw-nav-naw}}
        <div class="wiw-nav-naw">
            <div class="copy-email">{{render '@link' wiw-nav-naw/email merge=true}}{{render '@button--white-sm'}}</div>
            {{render '@link' wiw-nav-naw/phone merge=true}}
            {{render '@link' wiw-nav-naw/location merge=true}}
        </div>
    {{/if}}
    {{#if wiw-nav-social}}
        <div class="wiw-nav-social">
            {{render '@heading--h2' wiw-nav-social/heading merge=true}}
            {{#if wiw-nav-social/linkedin}}<div class="linkedin">{{render '@link' wiw-nav-social/linkedin merge=true}}</div>{{/if}}
            {{#if wiw-nav-social/twitter}}<div class="twitter">{{render '@link' wiw-nav-social/twitter merge=true}}</div>{{/if}}
            {{#if wiw-nav-social/orcid}}<div class="orcid">{{render '@link' wiw-nav-social/orcid merge=true}}</div>{{/if}}
            {{#if wiw-nav-social/researcherid}}<div class="researcherid">{{render '@link' wiw-nav-social/researcherid merge=true}}</div>{{/if}}
            {{#if wiw-nav-social/researchgate}}<div class="researchgate">{{render '@link' wiw-nav-social/researchgate merge=true}}</div>{{/if}}
            {{#if wiw-nav-social/googlescholar}}<div class="googlescholar">{{render '@link' wiw-nav-social/googlescholar merge=true}}</div>{{/if}}
        </div>
    {{/if}}
</div>
<div class="dropdown-nav">
    <details>
        <summary>
            <div class="wrapper">
                <div>
                    Bekijk de inhoud van deze pagina
                </div>
                {{render '@icon' @root.icon-open}}
                {{render '@icon' @root.icon-close}}
            </div>
        </summary>
        {{#if wiw-nav-profile}}
            <div class="wiw-nav-profile">
                <div class="wrap-info">
                    {{render '@image' wiw-nav-profile/image merge=true}}
                    <div>
                        <strong>{{wiw-nav-profile/name}}</strong>
                        <p>{{wiw-nav-profile/function}}</p>
                    </div>
                </div>
                {{render '@button--gray' wiw-nav-profile/button merge=true}}
            </div>
        {{/if}}
        <div class="dropdown-content">
            {{#each items}}
                {{render '@link' this}}
            {{/each}}
        </div>
        {{#if wiw-nav-naw}}
            <div class="wiw-nav-naw">
                <div class="copy-email">{{render '@link' wiw-nav-naw/email merge=true}}{{render '@button--white-sm'}}</div>
                {{render '@link' wiw-nav-naw/phone merge=true}}
                {{render '@link' wiw-nav-naw/location merge=true}}
            </div>
        {{/if}}
    </details>
</div>
 
{
  "inpage-nav-title": false,
  "icon-open": {
    "style": "fal",
    "icon": "fa-angle-down",
    "modifier": "icon-open",
    "size": "fa-lg"
  },
  "icon-close": {
    "style": "fal",
    "icon": "fa-angle-up",
    "modifier": "icon-close",
    "size": "fa-lg"
  },
  "items": [
    {
      "text": "Bachelor",
      "href": "#"
    },
    {
      "text": "Master",
      "href": "#"
    },
    {
      "text": "Voor wie?",
      "href": "#"
    },
    {
      "text": "Wanneer heb je les",
      "href": "#"
    },
    {
      "text": "Wanneer heb je les",
      "href": "#"
    },
    {
      "text": "Wanneer heb je les",
      "href": "#"
    }
  ],
  "button": {
    "modifier": "black",
    "text": "Direct inschrijven?",
    "element": "a",
    "icon": {
      "style": "fal",
      "icon": "fa-graduation-cap"
    }
  },
  "wiw-nav-profile": {
    "name": "Prof. dr. Marlies van Bael",
    "function": "ZAP | Gewoon Hoogleraar",
    "image": {
      "src": "https://picsum.photos/id/235/75/150",
      "sources": [
        {
          "mediaQuery": "(min-width: 1024px)",
          "src": "https://picsum.photos/id/235/75/150"
        },
        {
          "mediaQuery": "(min-width: 640px)",
          "src": "https://picsum.photos/id/235/75/150"
        }
      ]
    },
    "button": {
      "iconBefore": false,
      "text": "Ik wil mijn pagina editeren"
    }
  },
  "wiw-nav-naw": {
    "email": {
      "title": "E-mail Marlies",
      "text": "E-mail Marlies",
      "iconBefore": {
        "icon": "fa-envelope",
        "style": "far"
      },
      "href": "mailto:marlies.vanbael@uhasselt.be"
    },
    "phone": {
      "title": "+32 (0) 11 26 92 85",
      "text": "+32 (0) 11 26 92 85",
      "iconBefore": {
        "icon": "fa-phone-alt",
        "style": "far"
      },
      "href": "tel:+32 (0) 11 26 92 85"
    },
    "location": {
      "title": "Campus Diepenbeek Gebouw D Kantoor D.F4.04",
      "text": "Campus Diepenbeek Gebouw D Kantoor D.F4.04",
      "iconBefore": {
        "icon": "fa-map-marker-alt",
        "style": "far"
      },
      "href": "#"
    }
  },
  "wiw-nav-social": {
    "heading": {
      "text": "Volgen op"
    },
    "linkedin": {
      "text": "LinkedIn"
    },
    "twitter": {
      "text": "Twitter"
    },
    "orcid": {
      "text": "Orcid"
    },
    "researcherid": {
      "text": "Researcherid"
    },
    "researchgate": {
      "text": "ResearchGate"
    },
    "googlescholar": {
      "text": "Google Scholar"
    }
  }
}
  • Content: 
    .inpage-nav {
    @apply w-full pb-20 relative overflow-hidden z-10 hidden lg:block;

    &::after {
        @apply absolute hidden lg:block;
        content: url(/assets/img/down-arrow-small-white.svg);
        width: 18px;
        height: 126px;
        left: 60px;
        bottom: 0;
        z-index: -1;
    }

    @media only screen and (max-height: 575px) {
        display: none;
    }

    > span {
        @apply text-h4 block p-4 bg-white pr-3;
    }

    .inpage-nav-inner {
        @apply bg-red p-4;

        > ul {
            @apply text-h4;

            li {
                @apply py-2;

                .link {
                    @apply text-white no-underline hover:underline;
                }

                &.active .link {
                    @apply underline;
                }
            }
        }

        > .button {
            @apply block mt-4 w-full text-center;
        }

        .back-button {
            @apply bg-black;
            margin: 1rem -1rem 0 -1rem;
            @apply text-md;

            a {
                @apply px-4;

                .icon {
                    @apply mr-2;

                    &:hover {
                        @apply no-underline;
                    }
                }
            }
        }
    }

    .extra-bottom-link {
        @apply mt-4 text-center;
    }

    .extra-btn-green .button {
        @apply text-center;
        @apply w-full;
        @apply mb-2;
    }
}

.inpage-nav,
.dropdown-nav {
    .wiw-nav-profile {
        @apply bg-white p-4;
        .wrap-info {
            @apply flex items-center lg:flex-col xl:flex-row gap-4 mb-4;
            word-break: break-word;

            .picture {
                @apply w-[75px] h-[75px];

                .picture-image {
                    @apply rounded-full;
                    @apply object-cover w-full h-full block min-w-[75px];
                }
            }
        }

        .button {
            @apply w-full text-center;
        }
    }

    .wiw-nav-naw {
        @apply bg-black text-white p-4;
        @apply flex flex-col;

        .copy-email {
            @apply flex gap-4 justify-between items-center;

            .button {
                @apply mb-0;
            }
        }

        .link {
            @apply text-white;

            .icon {
                @apply self-start pt-1;
            }
        }
    }

    .wiw-nav-social {
        @apply bg-white p-4;

        .linkedin {
            &::before {
                content: url(/assets/img/linkedin_icon.svg);
                @apply w-[24px] h-[24px] mr-2;
            }
        }
        .twitter {
            &::before {
                content: url(/assets/img/twitter_icon.svg);
                @apply w-[24px] h-[24px] mr-2;
            }
        }
        .orcid {
            &::before {
                content: url(/assets/img/orcid_icon.svg);
                @apply w-[24px] h-[24px] mr-2;
            }
        }
        .researcherid {
            &::before {
                content: url(/assets/img/researcherid_icon.svg);
                @apply w-[24px] h-[24px] mr-2;
            }
        }
        .researchgate {
            &::before {
                content: url(/assets/img/researchgate_icon.svg);
                @apply w-[24px] h-[24px] mr-2;
            }
        }
        .googlescholar {
            &::before {
                content: url(/assets/img/google_scholar_icon.svg);
                @apply w-[24px] h-[24px] mr-2;
            }
        }
    }
}
  • URL: /components/raw/inpage-nav/inpage-nav.css
  • Filesystem Path: src\components\03-molecules\inpage-nav\inpage-nav.css
  • Size: 3.7 KB
  • Content: 
    (function () {

    'use strict';

    $(window).on('load', function (e) {
        e.preventDefault();

        function scroll_delay() {
            if (window.location.hash) {
                if ($('.inpage-nav').css('display') == 'block') {
                    $('html,body').animate({
                        scrollTop: $(window.location.hash).offset().top - 80,
                    });
                } else {
                    $('html,body').animate({
                        scrollTop: $(window.location.hash).offset().top - 250,
                    });
                }
            }
        }
        window.setTimeout(scroll_delay, 1000);
    });

    // Calc the inpage-nav height and add it, to fix fixed scroll nav
    $(window).on('load resize', function () {
        if ($(window).width() > 1023) {
            const inpageHeight = $('.calc-nav-height').height();
            $('.calc-nav-height').css('minHeight', inpageHeight);
        } else {
            $('.calc-nav-height').css('minHeight', 'auto');
        }

        const inpageNavHeight = $('.inpage-nav').height();
        if (inpageNavHeight <= 580) {
            const sticky = new Sticky('.inpage-nav', {
                marginTop: 90,
                stickyFor: 1024,
            });
        }
    });

    // Animate anchor links
    $('.inpage-nav a[href^="#anch-"]').on('click', function (e) {
        e.preventDefault();

        const $target = $($(this).attr('href'));

        if ($target.length == 0) {
            return;
        }

        var curScrollPos = $(document).scrollTop();
        let newScrollPos = $target.offset().top - 20;

        const $tabnav = $('.tab-nav');
        if ($tabnav.length > 0) {
            newScrollPos -= $tabnav.height();
        }

        if (newScrollPos <= curScrollPos) {
            // Substract sticky menu height if scrolling up

            const $mainNav = $('.nav-desktop-wrapper');
            if ($mainNav.length > 0) {
                newScrollPos -= $mainNav.height();
            }

            newScrollPos = Math.max(newScrollPos, 0);
        }

        $('html, body').animate({ scrollTop: newScrollPos });
        let hash = this.hash;
        history.pushState(null, null, hash);
    });

    if ($('.inpage-nav')[0]) {
        const sidebarSpy = new Gumshoe('.inpage-nav a[href^="#"]', {
            reflow: true,
            offset: function () {
                return document.querySelector('.inpage-nav').offsetTop + 20;
            },
        });
    }

    $(`.dropdown-nav a[href^="#"]`).on('click', function (e) {
        e.preventDefault();

        var targetHref = $(this).attr('href');

        if ($('.dropdown-nav').css('position') == 'relative') {
            $('html, body').animate({
                scrollTop: $(targetHref).offset().top - 430,
            });
        } else {
            if (targetHref === '#') {
                $('html, body').animate({ scrollTop: 0 });
            } else {
                $('html, body').animate({
                    scrollTop: $(targetHref).offset().top - 100,
                });
            }
        }

        $('details').removeAttr('open');

        let hash = this.hash;
        history.pushState(null, null, hash);
    });

    var height = $(window).height();
    if ($(window).width() >= 1024) {
        if (height <= 575) {
            var stickyDrop = new Sticky('.dropdown-nav', {
                marginTop: 90,
            });
        }
    } else {
        var stickyDrop = new Sticky('.dropdown-nav', {
            marginTop: 16,
        });
    }

    $(window).resize(function () {
        var height = $(window).height();
        if ($(window).width() >= 1024) {
            if (height <= 575) {
                var stickyDrop = new Sticky('.dropdown-nav', {
                    marginTop: 90,
                });
            }
        } else {
            var stickyDrop = new Sticky('.dropdown-nav', {
                marginTop: 16,
            });
        }
    });
})();
  • URL: /components/raw/inpage-nav/inpage-nav.js
  • Filesystem Path: src\components\03-molecules\inpage-nav\inpage-nav.js
  • Size: 4.1 KB

No notes defined.