Skip to content
This repository has been archived by the owner on Nov 17, 2020. It is now read-only.

Implement responsive mobile menu + remove old select-based mobile menu #63

Closed
wants to merge 1 commit into from
Closed

Implement responsive mobile menu + remove old select-based mobile menu #63

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 104 additions & 16 deletions src/assets/css/components/i-page.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,36 +6,124 @@
font-size: 16px;
}

.i-page__sidebar {
.i-page__mobile-toggle {
display: none;
}

.i-page__sidebar {
background: #0b7564;
color: #fff;
}

.i-page__sidebar > * {
padding: 0 20px;
}

.i-page__sidebar a {
color: inherit;
}

.i-page__content {
padding-top: 60px;
background: #f0f0f0;
}

.i-nav-select {
position: fixed;
z-index: 100;
top: 0;
width: 100%;
min-height: 60px;
margin: 0;
padding: 10px 20px;
padding-right: 145px;
background: #f0f0f0;
}
@media (max-width: 991px) {
.i-page__mobile-toggle {
display: block;
position: fixed;
top: 20px;
right: 20px;
z-index: 99;
}

.i-page__mobile-toggle .icon {
width: 60px;
height: 45px;
position: relative;
cursor: pointer;
}

.i-page__mobile-toggle .icon span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background-color: #000;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}

.i-page__mobile-toggle .icon span:nth-child(1) {
top: 0px;
}

.i-page__mobile-toggle .icon span:nth-child(2),
.i-page__mobile-toggle .icon span:nth-child(3) {
top: 18px;
}

.i-page__mobile-toggle .icon span:nth-child(4) {
top: 36px;
}

.i-nav-select select {
padding: 0;
.i-page__mobile-toggle .icon.open span {
background-color: #FFF;
}

.i-page__mobile-toggle .icon.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}

.i-page__mobile-toggle .icon.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

.i-page__mobile-toggle .icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.i-page__mobile-toggle .icon.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}

.i-page__sidebar {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
transform: translateX(-100vw);
transition: transform .25s ease-in-out;
}

.i-page__sidebar.visible {
transform: translateX(0);
}

.i-page__sidebar.visible .theme-sidebar-categories {
overflow-y: auto;
height: 300px; /* default height */
margin-bottom: 15px;
}
}

@media (min-width: 992px) {
Expand All @@ -60,4 +148,4 @@
.i-nav-select {
display: none;
}
}
}
47 changes: 41 additions & 6 deletions src/assets/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,18 +101,53 @@
});
});

// Mobile nav select
$('.i-nav-select').change(function() {
var slug = $(this).find('option:selected').val();
window.location.hash = slug;
});

// Code block toggle
$('.i-code-block__lang.-collapsible').click(function() {
var $lang = $(this);
$lang.find('i').toggleClass('fa-caret-right').toggleClass('fa-caret-down');
$lang.siblings('.i-code-block__content').toggleClass('hidden');
});

// Mobile menu toggle
var menuOpen = false;

function calculateMobileMenuHeight() {
var $categories = $('.i-page__sidebar > .theme-sidebar-categories');
if ($(window).width() < 992 && menuOpen) {
var $rect = $categories[0].getBoundingClientRect();
var $height = $(window).height() - Math.ceil($rect.top) - 50;
$categories[0].style.height = $height + 'px';
} else {
$categories[0].style.height = '';
}
}

function toggleMobileMenu() {
if (menuOpen) {
$('.i-page__sidebar').toggleClass('visible');
$('.i-page__mobile-toggle > .icon').toggleClass('open');
} else {
$('.i-page__sidebar').removeClass('visible');
$('.i-page__mobile-toggle > .icon').removeClass('open');
var $categories = $('.i-page__sidebar > .theme-sidebar-categories');
}
calculateMobileMenuHeight();
}

$(window).resize(function() {
calculateMobileMenuHeight();
})

$('.i-page__mobile-toggle').click(function() {
menuOpen = !menuOpen;
toggleMobileMenu();
});

// Hide mobile menu when clicking sidebar items
$('.i-sidebar-list-item').click(function() {
menuOpen = false;
toggleMobileMenu();
});

});
})(jQuery);
24 changes: 9 additions & 15 deletions src/templates/index.handlebars
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,22 +18,16 @@
{{/each}}
</head>
<body class="overflow-x-off i-page theme-page">
<div class="i-page__content theme-content">

<div class="i-nav-select theme-mobile-nav">
<form class="form">
<select class="form-control form-control-lg theme-mobile-nav-select">
<option disabled selected>Go to…</option>
{{#each groups}}
<optgroup label="{{key}}">
{{#each docs}}
<option value="{{slug}}">{{{name}}}</option>
{{/each}}
</optgroup>
{{/each}}
</select>
</form>
<div class="i-page__mobile-toggle">
<div class="icon">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>

<div class="i-page__content theme-content">

{{#each groups}}
<div id="category-{{slug}}" class="theme-content-category">
Expand Down