From 2340dddd06cbb5073d8c8408ffdded08ba411980 Mon Sep 17 00:00:00 2001 From: Gregory Ballantine Date: Tue, 17 Jan 2023 02:15:00 -0500 Subject: [PATCH] Added better mobile navigation --- assets/coffee/gargoyle.coffee | 8 ++++ assets/styles/kraken.scss | 85 ++++++++++++++++++++++++++++++++++ views/layout.erb | 2 + views/layout/mobile_navbar.erb | 9 ++++ 4 files changed, 104 insertions(+) create mode 100644 views/layout/mobile_navbar.erb diff --git a/assets/coffee/gargoyle.coffee b/assets/coffee/gargoyle.coffee index 32818cc..485b411 100644 --- a/assets/coffee/gargoyle.coffee +++ b/assets/coffee/gargoyle.coffee @@ -3,6 +3,7 @@ $(document).ready( -> $('#nav-toggle').on('click', toggleNav) if getCookie('navCollapsed') == 'true' $('body').addClass('collapsed') + $('#mobile-nav-toggle').on('click', toggleMobileNav) ) @@ -15,6 +16,13 @@ toggleNav = () -> bodyElem.addClass('collapsed') setCookie('navCollapsed', 'true') +toggleMobileNav = () -> + navElem = $('#mobile-nav') + if navElem.hasClass('expanded') + navElem.removeClass('expanded') + else + navElem.addClass('expanded') + getCookie = (cName) -> name = cName + '=' cDecoded = decodeURIComponent(document.cookie) diff --git a/assets/styles/kraken.scss b/assets/styles/kraken.scss index 3faa503..80e2ea5 100644 --- a/assets/styles/kraken.scss +++ b/assets/styles/kraken.scss @@ -16,6 +16,87 @@ body{ box-shadow: $box-shadow-2; } +@media screen and (max-width: 992px) { + body, + body.collapsed{ + padding-left: 0 !important; + } + #main-nav{ + display: none; + } + #mobile-nav{ + display: block; + } +} + +@media screen and (min-width: 993px) { + #mobile-nav{ + display: none; + } +} + +#mobile-nav{ + width: calc(100% + 16px); + height: 55px; + margin-top: -8px; + margin-left: -8px; + margin-bottom: 15px; + background: #212121; + color: white; + font-size: 3rem; + box-shadow: $box-shadow-1; + overflow-y: hidden; + transition: height 230ms ease-in-out; + + span{ + display: inline-block; + width: 100%; + padding-top: 7px; + } + + ul{ + list-style: none; + + li{ + margin: 0; + border-bottom: 1px solid #999; + + &:first-child{ + border-top: 1px solid #999; + } + + i{ + display: none; + position: absolute; + right: 18px; + margin-top: 5px; + font-size: 3rem; + } + } + + a{ + display: block; + box-sizing: border-box; + width: 100%; + padding: 10px 15px; + color: limegreen; + font-size: 2.5rem; + text-decoration: none; + transition: all 230ms ease-in-out; + + &:hover{ + background: rgba(255, 255, 255, 0.1); + } + } + } +} +#mobile-nav.expanded{ + height: 300px; + i{ + display: inline; + } +} + #main-nav{ position: fixed; top: 0; @@ -130,3 +211,7 @@ body.collapsed #main-nav{ font-style: italic; } } + +.u-text-centered{ + text-align: center; +} diff --git a/views/layout.erb b/views/layout.erb index a25da9f..68b1dc1 100644 --- a/views/layout.erb +++ b/views/layout.erb @@ -13,6 +13,8 @@ <%= erb :'layout/navbar', :locals => locals %> + + <%= erb :'layout/mobile_navbar', :locals => locals %> <%= erb :'layout/actions', :locals => locals %> diff --git a/views/layout/mobile_navbar.erb b/views/layout/mobile_navbar.erb new file mode 100644 index 0000000..04d5fbf --- /dev/null +++ b/views/layout/mobile_navbar.erb @@ -0,0 +1,9 @@ +