From a0ce43189297f40029dd31045109c923210d65f4 Mon Sep 17 00:00:00 2001 From: Lorin Werthen Date: Mon, 31 Oct 2016 17:51:52 +0100 Subject: [PATCH] hamburger menu \o/ --- content/assets/scripts/search.coffee | 4 ++++ .../assets/stylesheets/includes/general.scss | 19 +++++++++++++++++++ layouts/default.erb | 2 ++ layouts/partials/_navbar.erb | 18 ++++++++++++++---- 4 files changed, 39 insertions(+), 4 deletions(-) diff --git a/content/assets/scripts/search.coffee b/content/assets/scripts/search.coffee index dce58ed..e044929 100644 --- a/content/assets/scripts/search.coffee +++ b/content/assets/scripts/search.coffee @@ -4,3 +4,7 @@ $ -> $('#tipue_search_input_field').focusout -> $('#tipue_search_input').removeClass("focused") + + $('.nav-toggle').click -> + $('.nav-menu').toggleClass('open') + console.log 'heuj' diff --git a/content/assets/stylesheets/includes/general.scss b/content/assets/stylesheets/includes/general.scss index cc8dc6b..88eefe6 100644 --- a/content/assets/stylesheets/includes/general.scss +++ b/content/assets/stylesheets/includes/general.scss @@ -107,6 +107,25 @@ footer.footer { background-color: $turquoise; } + +// For better centering on mobile +@media screen and (max-width: 768px) { + #tipue_search_input { + margin: 5px; + } + + .nav-menu { + flex-direction: column; + max-height: 0; + overflow: hidden; + transition: all 0.30s ease-in-out; + + &.open { + max-height: 250px; + } + } +} + #tipue_search_input { background: none; padding: 12px; diff --git a/layouts/default.erb b/layouts/default.erb index 1403d0e..2ae06a7 100644 --- a/layouts/default.erb +++ b/layouts/default.erb @@ -41,6 +41,8 @@ + + <%= content_for(@item, :head) %> diff --git a/layouts/partials/_navbar.erb b/layouts/partials/_navbar.erb index 2a97683..3d86b9b 100644 --- a/layouts/partials/_navbar.erb +++ b/layouts/partials/_navbar.erb @@ -7,10 +7,10 @@