From 260fc641025a09fa72bcab4aec6c687fb0af222a Mon Sep 17 00:00:00 2001
From: Henrik Hautakoski <henrik.hautakoski@gmail.com>
Date: Sun, 31 Jul 2022 23:43:32 +0200
Subject: [PATCH] app/assets/sass/layout/_navigation.scss: use bootstrap 5.2.0
 mixin for media queries. also skip $navbar-breakpoint-min variable and just
 use "md" breakpoint.

---
 app/assets/sass/layout/_navigation.scss | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/assets/sass/layout/_navigation.scss b/app/assets/sass/layout/_navigation.scss
index 213f8d3..84c9caf 100644
--- a/app/assets/sass/layout/_navigation.scss
+++ b/app/assets/sass/layout/_navigation.scss
@@ -34,9 +34,9 @@
         font-size: 24px;
 
         // Hide for larger view-ports.
-        @media (min-width: $navbar-breakpoint-min) {
-            display: none !important;
-        }
+		@include media-breakpoint-up(md) {
+			@include visually-hidden;
+		}
     }
 
     // Menu
@@ -47,8 +47,7 @@
         > li {
 
             // Inline list for larger viewports.
-            @media (min-width: $navbar-breakpoint-min) {
-
+			@include media-breakpoint-up(md) {
                 display: inline-block;
 
                 a {
@@ -76,7 +75,7 @@
         }
 
         // Only for small viewports.
-        @media (max-width: $navbar-breakpoint-min) {
+        @include media-breakpoint-down(md) {
 
             margin: 1em 0;
 
@@ -99,7 +98,8 @@
     }
 
     // Always show menu for larger viewport.
-    @media (min-width: $navbar-breakpoint-min) {
+
+    @include media-breakpoint-up(md) {
         &-menu.collapse {
             display: block;
         }