Web Components Library

Base Layout

Uses https://github.com/mango/slideout for slideout navigation,

<nav id="menu" class="hidden shadow-md menu">
    <div class="z-50 max-w-sm bg-gray-900 h-screen slideout-menu slideout-menu-right">

        <ul class="flex flex-col text-white">

            <li class="px-3 pt-6 pb-3">

                <form action="http://example.com/search/results">

                    <label class="sr-only" for="searchSlideout">
                        Search
                    </label>
                    <div class="relative">
                        <input id="searchSlideout" class="py-2 pl-10 pr-3 leading-tight text-gray-900 placeholder-gray-700 transition duration-100 bg-gray-400 rounded-md shadow-sm outline-none appearance-none focus:bg-white focus:placeholder-transparent" type="search" name="q" value="" placeholder="Search this site">
                        <div class="absolute inset-y-0 left-0 flex items-center px-2 text-gray-700 pointer-events-none">
                            <i class="pl-1 text-base text-gray-600 fas fa-search"></i>
                        </div>
                    </div>

                </form>

            </li>

            <li>
                <a class="block px-5 py-2 text-lg font-medium text-gray-100 uppercase transition duration-100 opacity-75 font-heading hover:opacity-100 hover:text-white hover:bg-gray-800 focus:bg-gray-800" href="#">
                    Home
                </a>
            </li>
            <li>
                <a class="block px-5 py-2 text-lg font-medium text-gray-100 uppercase transition duration-100 opacity-75 font-heading hover:opacity-100 hover:text-white hover:bg-gray-800 focus:bg-gray-800 programs" href="#">
                    Tour
                </a>
            </li>
            <li>
                <a class="block px-5 py-2 text-lg font-medium text-gray-100 uppercase transition duration-100 opacity-75 font-heading hover:opacity-100 hover:text-white hover:bg-gray-800 focus:bg-gray-800 news" href="#">
                    Product
                </a>
            </li>
            <li>
                <a class="block px-5 py-2 text-lg font-medium text-gray-100 uppercase transition duration-100 opacity-75 font-heading hover:opacity-100 hover:text-white hover:bg-gray-800 focus:bg-gray-800 events" href="#">
                    Features
                </a>
            </li>
            <li>
                <a class="block px-5 py-2 text-lg font-medium text-gray-100 uppercase transition duration-100 opacity-75 font-heading hover:opacity-100 hover:text-white hover:bg-gray-800 focus:bg-gray-800 sport-directory" href="#">
                    Support
                </a>
            </li>

            <li>
                <hr class="my-4 border-b-4 border-gray-600">
            </li>

            <li>
                <a class="block px-5 py-2 text-base text-gray-100 transition duration-100 opacity-75 covid-19-updates hover:opacity-100 hover:bg-gray-800 focus:bg-gray-800" href="#">
                    Resource
                </a>
            </li>
            <li>
                <a class="block px-5 py-2 text-base text-gray-100 transition duration-100 opacity-75 about-us hover:opacity-100 hover:bg-gray-800 focus:bg-gray-800" href="#">
                    Another Resource
                </a>
            </li>
            <li>
                <a class="block px-5 py-2 text-base text-gray-100 transition duration-100 opacity-75 membership hover:opacity-100 hover:bg-gray-800 focus:bg-gray-800" href="#">
                    About Us
                </a>
            </li>

        </ul>

        <ul class="flex px-5 mt-6 mb-6 text-3xl">
            <li class="mr-2">
                <a class="text-gray-200 transition duration-100 opacity-50 hover:opacity-100 hover:text-white" href="https://www.facebook.com/username" title="Facebook" target="_blank" rel="noopener" onclick="ga('send','event','Social','Click - Facebook','https://www.facebook.com/username')">
                    <i class="fab fa-facebook-square"></i>
                </a>
            </li>
            <li class="mr-2">
                <a class="text-gray-200 transition duration-100 opacity-50 hover:opacity-100 hover:text-white" href="https://twitter.com/username" title="Twitter" target="_blank" rel="noopener" onclick="ga('send','event','Social','Click - Twitter','https://twitter.com/username')">
                    <i class="fab fa-twitter-square"></i>
                </a>
            </li>
            <li class="mr-2">
                <a class="text-gray-200 transition duration-100 opacity-50 hover:opacity-100 hover:text-white" href="https://www.instagram.com/username/" title="Instagram" target="_blank" rel="noopener" onclick="ga('send','event','Social','Click - Instagram','https://www.instagram.com/username/')">
                    <i class="fab fa-instagram"></i>
                </a>
            </li>
            <li class="mr-2">
                <a class="text-gray-200 transition duration-100 opacity-50 hover:opacity-100 hover:text-white" href="https://ca.linkedin.com/company/username" title="LinkedIn" target="_blank" rel="noopener" onclick="ga('send','event','Social','Click - LinkedIn','https://ca.linkedin.com/company/username')">
                    <i class="fab fa-linkedin"></i>
                </a>
            </li>
            <li class="mr-2">
                <a class="text-gray-200 transition duration-100 opacity-50 hover:opacity-100 hover:text-white" href="https://www.youtube.com/user/username" title="YouTube" target="_blank" rel="noopener" onclick="ga('send','event','Social','Click - YouTube','https://www.youtube.com/user/username')">
                    <i class="fab fa-youtube-square"></i>
                </a>
            </li>
        </ul>

    </div>
</nav>

<main id="panel" class="bg-gray-200 slideout-panel slideout-panel-right">

    <!--  nav header-->
    <div class="relative px-2 mx-auto bg-gray-200 font-heading">

        <div class="flex content-center justify-between max-w-6xl mx-auto">
            <div class="w-4/5 p-2 mt-1 mr-2 md:w-full sm:mt-2">
                <a class="inline-block" href="#">
                    <img src="https://via.placeholder.com/250x100/a0aec0/cbd5e0&text=logo" srcset="https://via.placeholder.com/250x100/a0aec0/cbd5e0&text=logo 1x, https://via.placeholder.com/500x200/a0aec0/cbd5e0&text=logo 2x" alt="logo" width="250" height="100" />
                </a>
            </div>
            <div class="w-1/5 pt-4 pr-1 text-right md:hidden">
                <button class="text-gray-800 toggle-button">
                    <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 mx-auto fill-current">
                        <title>
                            Menu</title>
                        <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
                    </svg>
                </button>
            </div>

            <div class="flex-col items-end justify-center hidden w-full md:flex">

                <ul class="flex text-3xl">
                    <li class="mr-2">
                        <a class="text-gray-800 transition duration-100 opacity-75 hover:text-gray-800 hover:opacity-100" href="https://www.facebook.com/username" title="Facebook" target="_blank" rel="noopener" onclick="ga('send','event','Social','Click - Facebook','https://www.facebook.com/username')">

                            <i class="fab fa-facebook-square"></i>
                        </a>
                    </li>
                    <li class="mr-2">
                        <a class="text-gray-800 transition duration-100 opacity-75 hover:text-gray-800 hover:opacity-100" href="https://twitter.com/username" title="Twitter" target="_blank" rel="noopener" onclick="ga('send','event','Social','Click - Twitter','https://twitter.com/username')">

                            <i class="fab fa-twitter-square"></i>
                        </a>
                    </li>
                    <li class="mr-2">
                        <a class="text-gray-800 transition duration-100 opacity-75 hover:text-gray-800 hover:opacity-100" href="https://www.instagram.com/username/" title="Instagram" target="_blank" rel="noopener" onclick="ga('send','event','Social','Click - Instagram','https://www.instagram.com/username/')">

                            <i class="fab fa-instagram"></i>
                        </a>
                    </li>
                    <li class="mr-2">
                        <a class="text-gray-800 transition duration-100 opacity-75 hover:text-gray-800 hover:opacity-100" href="https://ca.linkedin.com/company/username" title="LinkedIn" target="_blank" rel="noopener" onclick="ga('send','event','Social','Click - LinkedIn','https://ca.linkedin.com/company/username')">

                            <i class="fab fa-linkedin"></i>
                        </a>
                    </li>
                    <li class="mr-2">
                        <a class="text-gray-800 transition duration-100 opacity-75 hover:text-gray-800 hover:opacity-100" href="https://www.youtube.com/user/username" title="YouTube" target="_blank" rel="noopener" onclick="ga('send','event','Social','Click - YouTube','https://www.youtube.com/user/username')">

                            <i class="fab fa-youtube-square"></i>
                        </a>
                    </li>
                </ul>

                <div class="flex mt-2 mr-2">

                    <form action="http://example.com/search/results">

                        <label class="sr-only" for="searchHeader">
                            Search
                        </label>
                        <div class="relative">
                            <input id="searchHeader" class="w-64 py-2 pl-10 pr-3 leading-tight text-gray-900 placeholder-gray-600 transition duration-100 bg-gray-400 rounded-md shadow-sm outline-none appearance-none focus:bg-white focus:placeholder-transparent" type="search" name="q" value="" placeholder="Search this site">
                            <div class="absolute inset-y-0 left-0 flex items-center px-2 text-gray-700 pointer-events-none">
                                <i class="pl-1 text-base text-gray-600 fas fa-search"></i>
                            </div>
                        </div>

                    </form>

                </div>
            </div>

        </div>

    </div>

    <!--  main navigation -->
    <div class="hidden bg-gray-700 md:block">

        <nav class="max-w-5xl mx-auto" role="navigation" aria-label="Main">

            <ul class="flex items-center justify-between text-base text-white uppercase nav lg:text-lg">

                <li class="flex flex-auto">
                    <a class="w-full px-3 py-3 text-center transition duration-200 hover:bg-gray-800 focus:bg-gray-800" href="#">
                        Tour
                    </a>
                </li>
                <li class="flex flex-auto">
                    <a class="w-full px-3 py-3 text-center transition duration-200 hover:bg-gray-800 focus:bg-gray-800" href="#">
                        Product
                    </a>
                </li>
                <li class="flex flex-auto">
                    <a class="w-full px-3 py-3 text-center transition duration-200 hover:bg-gray-800 focus:bg-gray-800" href="#">
                        Features
                    </a>
                </li>
                <li class="flex flex-auto">
                    <a class="w-full px-3 py-3 text-center transition duration-200 hover:bg-gray-800 focus:bg-gray-800" href="#">
                        Support
                    </a>
                </li>

                <li class="relative flex-auto dropdown">

                    <a class="inline-flex items-center justify-center min-w-full px-3 py-3 cursor-pointer hover:bg-gray-800 focus:bg-gray-800" href="#">
                        <span class="mr-1 uppercase">More</span>
                        <svg class="w-4 h-4 opacity-75 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                            <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
                        </svg>
                    </a>

                    <ul class="absolute right-0 hidden w-full text-sm text-white bg-gray-700 border-t border-gray-600 shadow-md dropdown-menu lg:text-base">

                        <li>
                            <a class="block px-3 py-3 transition duration-100 border-b border-gray-600 opacity-75 hover:opacity-100 hover:bg-gray-800" href="#">Resource</a>
                        </li>
                        <li>
                            <a class="block px-3 py-3 transition duration-100 border-b border-gray-600 opacity-75 hover:opacity-100 hover:bg-gray-800" href="#">Another Resource</a>
                        </li>
                        <li>
                            <a class="block px-3 py-3 transition duration-100 border-b border-gray-600 opacity-75 hover:opacity-100 hover:bg-gray-800" href="#">About Us</a>
                        </li>
                    </ul>

                </li>

            </ul>

        </nav>

    </div>

    <!-- main content -->

    <div class="max-w-6xl px-4 py-12 mx-auto">
        <p>Main content here</p>
    </div>

    <!--  footer -->

</main>

<script src="https://cdnjs.cloudflare.com/ajax/libs/slideout/1.0.1/slideout.min.js"></script>
  • Content: 
    /* Slideout.js styles */
/* Docs: https://github.com/mango/slideout#usage */

body {
  width: 100%;
  height: 100%;
}

.slideout-menu {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 256px;
  min-height: 100vh;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  z-index: 0;
  display: none;
}

.slideout-menu-left {
  left: 0;
}

.slideout-menu-right {
  right: 0;
}

.slideout-panel {
  position: relative;
  z-index: 1;
  will-change: transform;
  background-color: #FFF; /* A background-color is required */
  min-height: 100vh;
}

.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
  overflow: hidden;
}

.slideout-open .slideout-menu {
  display: block;
}

/* More dropdown menu in main navigation */

.dropdown-menu {
  z-index: 200;
}

.dropdown .dropdown-menu {
  display: none;
}
.dropdown:hover .dropdown-menu {
  display: block;
}
  • URL: /components/raw/base-layout/base-layout.css
  • Filesystem Path: components/02-templates/base-layout/base-layout.css
  • Size: 874 Bytes
  • Content: 
    // Slideout.js JS scripts

// Create a new instance with some options

var slideout = new Slideout({
    'panel': document.getElementById('panel'),
    'menu': document.getElementById('menu'),
    'padding': 256,
    'tolerance': 70,
    'side': 'right'
});

// Call the toggle method when clicking on element with toggle class

document.querySelector('.toggle-button').addEventListener('click', function () {
    slideout.toggle();
});

// Close slideout when clicking on main area

function checkOpen(eve) {
    if (slideout.isOpen()) {
        eve.preventDefault();
        slideout.close();
    }
}

function addClick() {
    document.querySelector('#panel').addEventListener('click', checkOpen);
}

function removeClick() {
    document.querySelector('#panel').removeEventListener('click', checkOpen);
}

slideout.on('open', addClick);
slideout.on('close', removeClick);
  • URL: /components/raw/base-layout/base-layout.js
  • Filesystem Path: components/02-templates/base-layout/base-layout.js
  • Size: 877 Bytes 
{{!-- this template has custom CSS in associated assets files --}}

<nav id="menu" class="hidden shadow-md menu">
  {{ render '@slideout-navigation' }}
</nav>

<main id="panel" class="bg-gray-200 slideout-panel slideout-panel-right">

  <!--  nav header-->
  {{ render '@header' }}

  <!--  main navigation -->
  {{ render '@main-navigation-full' }}

  <!-- main content -->

  <div class="max-w-6xl px-4 py-12 mx-auto">
    <p>Main content here</p>
  </div>

  <!--  footer -->
  {{ render '@footer-basic' }}

</main>

<script src="https://cdnjs.cloudflare.com/ajax/libs/slideout/1.0.1/slideout.min.js"></script>

{{!-- this template has custom JS in associated assets files --}}
 
/* No context defined. */