From 57553e54bfc8ec379ed4b5ea27c324f22e9901bf Mon Sep 17 00:00:00 2001
From: ebremner <ebremner@uwaterloo.ca>
Date: Mon, 23 Dec 2019 14:30:56 -0500
Subject: [PATCH] ISTWCMS-3380: adding horiztonal navigation (not completed)
---
.../03-layouts/navigation/_navigation.scss | 171 ++++++++++++++++++
.../03-layouts/navigation/navigation.twig | 37 +++-
.../03-layouts/navigation/navigation.yml | 123 +++++++++++++
.../site-container/site-container.twig | 3 +
.../site-container/site-container.yml | 89 ++++++++-
source/_patterns/04-components/menu/menu.twig | 33 +++-
source/images/icons/dots.png | Bin 0 -> 215 bytes
source/images/icons/home.png | Bin 0 -> 322 bytes
8 files changed, 449 insertions(+), 7 deletions(-)
create mode 100644 source/_patterns/03-layouts/navigation/_navigation.scss
create mode 100644 source/images/icons/dots.png
create mode 100644 source/images/icons/home.png
diff --git a/source/_patterns/03-layouts/navigation/_navigation.scss b/source/_patterns/03-layouts/navigation/_navigation.scss
new file mode 100644
index 00000000..89bbcf8b
--- /dev/null
+++ b/source/_patterns/03-layouts/navigation/_navigation.scss
@@ -0,0 +1,171 @@
+.has-submenu:hover {
+ .menu__subnav {
+ display: block;
+ }
+}
+
+.uw-main-nav {
+ background-color: #000;
+ display: block;
+ width: 100%;
+
+ .menu--main .menu__subnav .menu__link:hover {
+ background-color: $uw-black;
+ color: $uw-gold;
+ }
+
+ &__wrapper {
+ display: grid;
+ grid-template-columns: 24px auto 30px;
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 63rem;
+ }
+
+ &__home {
+ background: url('../../source/images/icons/home.png') 0 50% no-repeat;
+ grid-column: 1 / 2;
+ }
+
+ &__links {
+ grid-template-columns: 2 / 3;
+ padding: 0 1rem;
+
+ a {
+ color: $uw-white;
+
+ &:hover {
+ color: $uw-gold;
+ }
+ }
+
+ .menu--main {
+ display: flex;
+ flex-wrap: nowrap;
+
+ > .menu__item {
+ > .menu__link {
+ padding: 1rem 0;
+ }
+ }
+
+ .menu__item {
+ flex: 1;
+ text-align: center;
+ }
+
+ .menu__link {
+ padding: 1rem 0;
+ }
+
+ .menu__subnav {
+ background-color: $uw-black;
+ position: inherit;
+
+ &--outside-wrapper {
+ background-color: transparent;
+ left: 0;
+ position: fixed;
+ width: 100%
+ }
+
+ &--inside-wrapper {
+ background-color: $uw-black;
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 63rem;
+ }
+
+ .menu__subnav:hover {
+ display: block;
+ }
+
+ .menu__link {
+ text-align: left;
+ width: 100%;
+ }
+
+ .has-children {
+ .menu__subnav li {
+ padding-left: 1.5rem;
+ }
+ }
+ }
+ }
+
+ .has-submenu > .menu__subnav {
+ background: transparent;
+ margin: 0 -1000em; /* trick from css-tricks comments */
+ padding: 0 1000em; /* trick from css-tricks comments */
+ z-index: 10000;
+ }
+
+ .has-submenu {
+ > a::after {
+ border: solid $uw-white;
+ border-width: 0 3px 3px 0;
+ content: '';
+ display: inline-block;
+ padding: 3px;
+ -webkit-transform: rotate(45deg) translateY(-5px);
+ transform: rotate(45deg) translateY(-5px);
+ }
+ }
+ }
+
+ &__more {
+ background: url('../../source/images/icons/dots.png') 0 50% no-repeat;
+ background-position: center;
+ grid-column: 3 / 4;
+ position: relative;
+
+ &:hover {
+ .menu--main-more {
+ display: block;
+ }
+ }
+
+ .menu--main-more {
+ background: transparent;
+ display: none;
+ margin: 0 -1000em; /* trick from css-tricks comments */
+ padding: 0 1000em; /* trick from css-tricks comments */
+ z-index: 10000;
+ }
+
+ .menu__subnav {
+
+ &--outside-wrapper {
+ background-color: transparent;
+ left: 0;
+ position: fixed;
+ width: 100%;
+ z-index: 10000;
+ }
+
+ &--inside-wrapper {
+ background-color: $uw-black;
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 3rem;
+ max-width: 63rem;
+ padding: 1rem;
+
+ li {
+ padding: 1rem 0;
+ }
+
+ a {
+ color: $uw-white;
+ height: 100%;
+ text-decoration: none;
+ width: 100%;
+
+ &:hover {
+ color: $uw-gold;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/source/_patterns/03-layouts/navigation/navigation.twig b/source/_patterns/03-layouts/navigation/navigation.twig
index 7c9083e8..cfdc77ca 100644
--- a/source/_patterns/03-layouts/navigation/navigation.twig
+++ b/source/_patterns/03-layouts/navigation/navigation.twig
@@ -1,6 +1,33 @@
-<nav class="uw-main-navigation">
- {% include '@components/menu/menu.twig' with {
- 'menu_name': 'main',
- 'items': items
- } %}
+<nav class="uw-main-nav">
+ <div class="uw-main-nav__wrapper">
+ <div class="uw-main-nav__home">
+ <a href="/home" class="uw-site-home__link">
+ <span class="off-screen">Home</span>
+ </a>
+ </div>
+ <div class="uw-main-nav__links">
+ {% if items|length > 5 %}
+ {% set main_links = items|slice(1, 5) %}
+ {% else %}
+ {% set main_links = items %}
+ {% endif %}
+ {% include '@components/menu/menu.twig' with {
+ 'menu_name': 'main',
+ 'items': main_links
+ } %}
+ </div>
+ {% if items|length > 5 %}
+ <div class="uw-main-nav__more">
+ <ul class="menu menu--main-more">
+ <li class="menu__item has-submenu">
+ {% set more_links = items|slice(6, item.length) %}
+ {% include '@components/menu/menu.twig' with {
+ 'menu_name': 'main-more',
+ 'items': more_links
+ } %}
+ </li>
+ </ul>
+ </div>
+ {% endif %}
+ </div>
</nav>
\ No newline at end of file
diff --git a/source/_patterns/03-layouts/navigation/navigation.yml b/source/_patterns/03-layouts/navigation/navigation.yml
index fe21bd3f..13197b22 100644
--- a/source/_patterns/03-layouts/navigation/navigation.yml
+++ b/source/_patterns/03-layouts/navigation/navigation.yml
@@ -28,7 +28,130 @@ items:
attributes:
class: ''
in_active_trail: false
+ submenu:
+ - text: 'Link #1-2-1'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #1-2-2'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #1-2-3'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #1-3'
+ url: '/front'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
- text: 'Link #2'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #3'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #4'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ submenu:
+ - text: 'Link #4-1'
+ url: '/front'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #4-2'
+ url: '/front'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #5'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #6'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ submenu:
+ - text: 'Link #6-1'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #6-2'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ submenu:
+ - text: 'Link #6-2-1'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #6-2-2'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #6-2-3'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #6-3'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #7'
url: 'https://uwaterloo.ca/'
original_link:
options:
diff --git a/source/_patterns/03-layouts/site-container/site-container.twig b/source/_patterns/03-layouts/site-container/site-container.twig
index 8d867322..ccd58647 100644
--- a/source/_patterns/03-layouts/site-container/site-container.twig
+++ b/source/_patterns/03-layouts/site-container/site-container.twig
@@ -4,6 +4,9 @@
'menu_name': header_menu_name,
'items': header_items
} %}
+ {% include "@layouts/navigation/navigation.twig" with {
+ 'items': main_menu
+ }%}
{% include "@layouts/footer/footer.twig" with {
'menu_name': footer_menu_name,
'items': footer_items
diff --git a/source/_patterns/03-layouts/site-container/site-container.yml b/source/_patterns/03-layouts/site-container/site-container.yml
index b5464326..ecaf4534 100644
--- a/source/_patterns/03-layouts/site-container/site-container.yml
+++ b/source/_patterns/03-layouts/site-container/site-container.yml
@@ -115,4 +115,91 @@ social_media:
url: "https://www.instagram.com/uofwaterloo/"
- text: "LinkedIn"
url: "https://www.linkedin.com/edu/school?id=10875"
-social_media_placement: "global-site-footer"
\ No newline at end of file
+social_media_placement: "global-site-footer"
+main_menu:
+ - text: 'Home'
+ url: '/front'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #1'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ submenu:
+ - text: 'Link #1-1'
+ url: '/front'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #1-2'
+ url: '/front'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #2'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #3'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #4'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ submenu:
+ - text: 'Link #4-1'
+ url: '/front'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #4-2'
+ url: '/front'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #5'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #6'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - text: 'Link #7'
+ url: 'https://uwaterloo.ca/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
\ No newline at end of file
diff --git a/source/_patterns/04-components/menu/menu.twig b/source/_patterns/04-components/menu/menu.twig
index 2b0b6414..089a9826 100644
--- a/source/_patterns/04-components/menu/menu.twig
+++ b/source/_patterns/04-components/menu/menu.twig
@@ -18,9 +18,20 @@
'class': additional_classes
} %}
<ul {{ add_attributes(additional_attributes) }}>
+
+ {% if menu_name == 'main-more' %}
+ <div class="menu__subnav--outside-wrapper ML0">
+ <div class="menu__subnav--inside-wrapper ML0">
+ {% endif %}
+
{% else %}
<ul class="menu menu__subnav">
+ {% if menu_level == 1 and menu_name != 'main-more' %}
+ <div class="menu__subnav--outside-wrapper ML1">
+ <div class="menu__subnav--inside-wrapper ML1">
+ {% endif %}
{% endif %}
+
{% for item in items %}
{% set item_classes = ['menu__item'] %}
@@ -52,6 +63,20 @@
{% set link_classes = link_classes|merge(link_class) %}
{% endif %}
+ {% if item.below %}
+ {% if menu_level == 0 %}
+ {% set item_classes = item_classes|merge(['has-submenu']) %}
+ {% elseif menu_level <= 2 %}
+ {% set item_classes = item_classes|merge(['has-children']) %}
+ {% endif %}
+ {% elseif item.submenu %}
+ {% if menu_level == 0 %}
+ {% set item_classes = item_classes|merge(['has-submenu']) %}
+ {% elseif menu_level <= 2 %}
+ {% set item_classes = item_classes|merge(['has-children']) %}
+ {% endif %}
+ {% endif %}
+
{% set additional_item_attributes = {
'class': item_classes
} %}
@@ -75,6 +100,12 @@
{% endif %}
</li>
{% endfor %}
- </ul>
+
+ {% if menu_level == 1 or menu_name == 'main-more' %}
+ </div></div></ul>
+ {% else %}
+ </ul>
+ {% endif %}
+
{% endif %}
{% endmacro %}
diff --git a/source/images/icons/dots.png b/source/images/icons/dots.png
new file mode 100644
index 0000000000000000000000000000000000000000..76509657bf49f826c06ed81c39df691197b8bf97
GIT binary patch
literal 215
zcmeAS@N?(olHy`uVBq!ia0vp^av;pX1|+Qw)-3{3Y)RhkE)4%caKYZ?lYt^Vo-U3d
z9-VI|IdUCx;Bhs+J3a2ey6SJ!oUZHbnaFjHbsl%~m5YH|FW=dpNIEgwU%^n=iDM({
z0`@e8YTW}HR=+;W{XVAgpL0OZYvHRix;7Y?Gu}LN>y%iL*UISD)}6jfKmPf@`2Y6X
zGj6`@F3`DGsAurwkoUO*4^z)%Oh3-*ci?QcPIFk}?j24XimUE0K7Fww{*OccYoNOr
NJYD@<);T3K0RUg|Tc!X2
literal 0
HcmV?d00001
diff --git a/source/images/icons/home.png b/source/images/icons/home.png
new file mode 100644
index 0000000000000000000000000000000000000000..4f71ffd4fa973afb1325f37fbfda24b7caa77e3a
GIT binary patch
literal 322
zcmV-I0lof-P)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv00006VoOIv0RI60
z0RN!9r;`8x0QX5mK~zYI?bER?1W^>m@x5ZVk!U0&It87EMoYyr>_aHF@CsTF;T3E{
ztD(}7P$?7&LbC-w%}LyB%+57-3gJtpIp_QS=iZq!oz9;U1{kyfPB`?bBg{+--otT#
zNAZYS@2BuN3<LOrU2NkiYG;^l3SYuyfF7`s_11A8y(=t#7rug<0Ni4=!gC#-JFJz$
zH{--`fyD{l1)PWX5nFZe9Xv<iwB-H9cRGp8EB304{cJ;^TL;gw-7Ggkf84N-x6Gsz
zo-uO0<6xq(>45S2Y-#wbdP*tPWvBDIPisI5wKkxMe*b{VEh<^n5>M+l_*bny0A*fN
UxssB4n*aa+07*qoM6N<$f^Zy<YXATM
literal 0
HcmV?d00001
--
GitLab