opdavies/oliverdavies.uk
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Use a loop

Browse source
This commit is contained in:
Oliver Davies 2018-02-26 01:32:45 +00:00
parent 3d1862ebb6
commit 04b5c94e40
4 changed files with 46 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
assets/less/components/nav.less
View file

@ -1,49 +0,0 @@
.nav {
@apply .w-full;
}
.nav-item {
@apply .flex;
@apply .items-center;
@apply .-mx-4;
@apply .p-4;
}
.nav-item:first-child {
@apply .border-t .border-grey-lighter;
}
@screen sm {
.nav {
@apply .flex-wrap .justify-end;
}
.nav-item {
@apply .border-b-3;
@apply .border-transparent;
@apply .ml-4;
@apply .mr-0;
@apply .p-0;
}
.nav-item:first-child {
@apply .border-t-0 .border-transparent;
}
.nav-item--active,
.nav-item--active.nav-item:first-child {
@apply .bg-transparent .border-blue;
}
}
@screen md {
.nav {
@apply .w-2/3;
}
}
@screen lg {
.nav {
@apply .w-3/4;
}
}

1
assets/less/main.less
View file

@ -59,7 +59,6 @@ svg {
} }
@import 'components/listing.less'; @import 'components/listing.less';
@import 'components/nav.less';
@import 'components/post.less'; @import 'components/post.less';
@import 'components/post/about-author.less'; @import 'components/post/about-author.less';
@import 'components/post/code.less'; @import 'components/post/code.less';

66
source/_includes/nav.html.twig
View file

@ -15,30 +15,52 @@
</div> </div>
</div> </div>
<nav class="nav hidden sm:flex"> {% set links = [
<a href="/" class="nav-item {{ page.url == '/.' ? 'nav-item--active' }}"> {
About title: 'About',
</a> href: '/',
pattern: '^/.$'
},
{
title: 'Experience',
href: '/experience',
pattern: '^/experience/?$'
},
{
title: 'Talks',
href: '/talks',
pattern: '^/talks/?'
},
{
title: 'Open Source',
href: '/opensource',
pattern: '^/opensource/?$'
},
{
title: 'Blog',
href: '/blog',
pattern: '^/blog/?'
},
{
title: 'Contact',
href: '/contact',
pattern: '^/contact/?'
}
] %}
<a href="/experience" class="nav-item {{ page.url matches '#^/experience/?#' ? 'nav-item--active' }}"> <nav class="hidden w-full md:w-2/3 lg:w-3/4 sm:flex sm:flex-wrap sm:justify-end">
Experience {% for link in links %}
</a> <a
href="{{ link.href }}"
<a href="/talks" class="nav-item {{ page.url matches '#^/talks/?#' ? 'nav-item--active' }}"> class="
Talks flex items-center -mx-4 p-4 sm:border-b-3 sm:border-transparent sm:ml-4 sm:mr-0 sm:p-0
</a> {{ loop.first ? 'border-t border-grey-lighter sm:border-t-0 sm:border-transparent' }}
{{ page.url matches '#' ~ link.pattern ~ '#' ? 'sm:bg-transparent sm:border-blue' }}
<a href="/opensource" class="nav-item {{ page.url matches '#^/opensource/?#' ? 'nav-item--active' }}"> "
Open Source >
</a> {{ link.title }}
<a href="/blog" class="nav-item {{ page.url matches '#^/blog/?#' ? 'nav-item--active' }}">
Blog
</a>
<a href="/contact" class="nav-item {{ page.url matches '#^/contact/?#' ? 'nav-item--active' }}">
Contact
</a> </a>
{% endfor %}
</nav> </nav>
</div> </div>
</header> </header>

2
source/_includes/scripts.html.twig
View file

@ -1,6 +1,6 @@
<script> <script>
document.querySelector('.nav-toggle').onclick = function() { document.querySelector('.nav-toggle').onclick = function() {
document.querySelector('.navbar .nav').classList.toggle('hidden').toggle('block'); document.querySelector('.navbar nav').classList.toggle('hidden').toggle('block');
return false; return false;
}; };
</script> </script>