diff --git a/wp-content/themes/kolarix-q_movies/.sass-cache/4656c52eedc90bcb70fbb4ba06da9e6a7f671ce1/header.scssc b/wp-content/themes/kolarix-q_movies/.sass-cache/4656c52eedc90bcb70fbb4ba06da9e6a7f671ce1/header.scssc index 776bb58..f054661 100644 Binary files a/wp-content/themes/kolarix-q_movies/.sass-cache/4656c52eedc90bcb70fbb4ba06da9e6a7f671ce1/header.scssc and b/wp-content/themes/kolarix-q_movies/.sass-cache/4656c52eedc90bcb70fbb4ba06da9e6a7f671ce1/header.scssc differ diff --git a/wp-content/themes/kolarix-q_movies/css/header.scss b/wp-content/themes/kolarix-q_movies/css/header.scss index a01857f..ab2c9a9 100644 --- a/wp-content/themes/kolarix-q_movies/css/header.scss +++ b/wp-content/themes/kolarix-q_movies/css/header.scss @@ -25,4 +25,68 @@ &:hover { text-decoration: none; } +} + +.menu { + @media screen and (max-width: 990px) { + display: none; + position: absolute; + top: calc(var(--gap) * 2); + left: var(--gap); + width: calc(100% - var(--gap) * 2); + background: #ffffff; + padding: var(--gap); + text-align: center; + border-radius: 5px; + -webkit-box-shadow: 0 5px 10px 2px rgba(0, 0, 0, 0.2); + box-shadow: 0 5px 10px 2px rgba(0, 0, 0, 0.2); + } + + &-item { + display: block; + + @media screen and (min-width: 991px) { + display: inline-block; + } + + &:not(:last-child) { + @media screen and (max-width: 990px) { + margin-bottom: var(--gap); + } + + @media screen and (min-width: 991px) { + margin-right: var(--gap); + } + } + + a { + font-family: "BarlowCondensed-Bold", sans-serif; + letter-spacing: 2px; + } + } +} + +.mobile-nav { + width: 32px; + height: 32px; + background-image: url("images/icon-hamburger.svg"); + background-position: center; + background-repeat: no-repeat; + background-size: contain; + cursor: pointer; + -webkit-transition: background-image 0.3s ease; + -o-transition: background-image 0.3s ease; + transition: background-image 0.3s ease; + + &.active { + background-image: url("images/icon-close.svg"); + background-size: contain; + -webkit-transition: background-image 0.3s ease; + -o-transition: background-image 0.3s ease; + transition: background-image 0.3s ease; + } + + @media screen and (min-width: 991px) { + display: none; + } } \ No newline at end of file diff --git a/wp-content/themes/kolarix-q_movies/functions.php b/wp-content/themes/kolarix-q_movies/functions.php index 37fc39a..468b052 100644 --- a/wp-content/themes/kolarix-q_movies/functions.php +++ b/wp-content/themes/kolarix-q_movies/functions.php @@ -22,7 +22,8 @@ function q_movies_setup() { * Enqueue styles and scripts. */ add_action( 'wp_enqueue_scripts', 'q_movies_enqueue_styles' ); - wp_enqueue_script( 'q_movies-script', get_template_directory_uri() . '/js/theme.js', array('jquery'), '1.0.0', true ); + wp_enqueue_script( 'qss-connect-script', get_template_directory_uri() . '/js/qss-connect.js', array('jquery'), '1.0.0', true ); + wp_enqueue_script( 'navigation-script', get_template_directory_uri() . '/js/navigation.js', array('jquery'), '1.0.0', true ); /** * Add favicon. diff --git a/wp-content/themes/kolarix-q_movies/header.php b/wp-content/themes/kolarix-q_movies/header.php index 340b036..f7f3e4f 100644 --- a/wp-content/themes/kolarix-q_movies/header.php +++ b/wp-content/themes/kolarix-q_movies/header.php @@ -10,5 +10,12 @@
QMovies +
\ No newline at end of file diff --git a/wp-content/themes/kolarix-q_movies/js/navigation.js b/wp-content/themes/kolarix-q_movies/js/navigation.js new file mode 100644 index 0000000..9f74b9a --- /dev/null +++ b/wp-content/themes/kolarix-q_movies/js/navigation.js @@ -0,0 +1,45 @@ +(function( $ ) { + 'use strict'; + +// Mobile navigation toggle + + let toggleMobileNav = function() { + let menu = $('.menu'), + mobileNav = $('.mobile-nav'), + menuOpen = false; + + // Check if .mobile-nav is visible + if (mobileNav.is(':visible')) { + mobileNav.click(function() { + if (!menuOpen) { + menu.slideDown(); + menuOpen = true; + mobileNav.addClass('active'); + } else { + menu.slideUp(); + menuOpen = false; + mobileNav.removeClass('active'); + } + }); + + $(document).click(function(event) { + if (!$(event.target).closest(menu).length && !$(event.target).closest(mobileNav).length && mobileNav.is(':visible')) { + if (menuOpen) { + menu.slideUp(); + menuOpen = false; + mobileNav.removeClass('active'); + } + } + }); + } else { + menu.show(); + mobileNav.off("click"); + $(document).off("click", "**"); + } + }; + + toggleMobileNav(); + $(window).resize(toggleMobileNav); + + +})( jQuery ); \ No newline at end of file diff --git a/wp-content/themes/kolarix-q_movies/js/theme.js b/wp-content/themes/kolarix-q_movies/js/qss-connect.js similarity index 100% rename from wp-content/themes/kolarix-q_movies/js/theme.js rename to wp-content/themes/kolarix-q_movies/js/qss-connect.js diff --git a/wp-content/themes/kolarix-q_movies/style.css b/wp-content/themes/kolarix-q_movies/style.css index 9ff5790..ebc8189 100644 --- a/wp-content/themes/kolarix-q_movies/style.css +++ b/wp-content/themes/kolarix-q_movies/style.css @@ -28,6 +28,55 @@ Version: 1.1.0 .logo-wrapper:hover { text-decoration: none; } +@media screen and (max-width: 990px) { + .menu { + display: none; + position: absolute; + top: calc(var(--gap) * 2); + left: var(--gap); + width: calc(100% - var(--gap) * 2); + background: #ffffff; + padding: var(--gap); + text-align: center; + border-radius: 5px; + -webkit-box-shadow: 0 5px 10px 2px rgba(0, 0, 0, 0.2); + box-shadow: 0 5px 10px 2px rgba(0, 0, 0, 0.2); } } +.menu-item { + display: block; } + @media screen and (min-width: 991px) { + .menu-item { + display: inline-block; } } + @media screen and (max-width: 990px) { + .menu-item:not(:last-child) { + margin-bottom: var(--gap); } } + @media screen and (min-width: 991px) { + .menu-item:not(:last-child) { + margin-right: var(--gap); } } + .menu-item a { + font-family: "BarlowCondensed-Bold", sans-serif; + letter-spacing: 2px; } + +.mobile-nav { + width: 32px; + height: 32px; + background-image: url("images/icon-hamburger.svg"); + background-position: center; + background-repeat: no-repeat; + background-size: contain; + cursor: pointer; + -webkit-transition: background-image 0.3s ease; + -o-transition: background-image 0.3s ease; + transition: background-image 0.3s ease; } + .mobile-nav.active { + background-image: url("images/icon-close.svg"); + background-size: contain; + -webkit-transition: background-image 0.3s ease; + -o-transition: background-image 0.3s ease; + transition: background-image 0.3s ease; } + @media screen and (min-width: 991px) { + .mobile-nav { + display: none; } } + #main { display: flex; height: 100%; } diff --git a/wp-content/themes/kolarix-q_movies/style.css.map b/wp-content/themes/kolarix-q_movies/style.css.map index 70c032d..e6727a9 100644 --- a/wp-content/themes/kolarix-q_movies/style.css.map +++ b/wp-content/themes/kolarix-q_movies/style.css.map @@ -1,6 +1,6 @@ { "version": 3, -"mappings": "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", +"mappings": "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", "sources": ["style.scss","css/header.scss","css/main.scss"], "names": [], "file": "style.css"