fix: some navbar styling issues and CSS organization

src/lib/components/organisms/navmenu/NavMenu.tsx

@@ -106,7 +106,7 @@ export const ResponsiveNavMenu: FC<NeoNavMenuProps> = ({
           }}
         >
           <span className={styles.tbsui_ssr_header_item}>{headerItem}</span>
-          <span className={[styles.nav_check_container, responsive.lg_or_smaller].join(' ')}>
+          <span className={[styles.nav_check_container].join(' ')}>
             <label className={styles.nav_check_label} htmlFor={styles.tbsui_ssr_navmenu_toggle}>
               <svg className={styles.nav_check_icon} viewBox="0 0 24 24">
                 <rect className={styles.nav_check_rect} x="0" y="0" width="24" height="24" rx={12}></rect>
@@ -120,7 +120,7 @@ export const ResponsiveNavMenu: FC<NeoNavMenuProps> = ({
               </svg>
             </label>
           </span>
-          <span className={responsive.lg_or_larger}>
+          <span className={styles.nav_links_wrapper}>
             <span className={styles.nav_links_hor}>
               {links.map((link, index) => {
                 if (!('category' in link) && !('elements' in link)) {

src/lib/components/organisms/navmenu/navmenu.module.scss

@@ -1,3 +1,5 @@
+@import '../../../styles/responsive.module.scss';
+
 @mixin transition {
   @keyframes navmenu_transition_i {
     0% {
@@ -239,9 +241,11 @@
 }
 
 .nav_check_container {
-  display: grid;
-  place-items: center;
-  height: 100%;
+  @include size_or_smaller($lg) {
+    display: grid;
+    place-items: center;
+    height: 100%;
+  }
 }
 
 .nav_menu_list {
@@ -314,6 +318,12 @@
   }
 }
 
+.nav_links_wrapper {
+  @include size_or_larger($lg) {
+    display: block;
+  }
+}
+
 .nav_links_hor {
   display: flex;
   flex-direction: row;

src/lib/styles/responsive.module.scss

@@ -1,55 +1,81 @@
+$md: 768px;
+$lg: 1024px;
+$sm: 640px;
+$xs: 320px;
+
 .md_or_larger {
   display: none;
-  @media screen and (min-width: 768px) {
+  @media screen and (min-width: $md) {
     display: block;
   }
 }
 
 .md_or_smaller {
   display: block;
-  @media screen and (min-width: 768px) {
+  @media screen and (min-width: $md) {
     display: none;
   }
 }
 
 .lg_or_larger {
   display: none;
-  @media screen and (min-width: 1024px) {
+  @media screen and (min-width: $lg) {
     display: block;
   }
 }
 
 .lg_or_smaller {
   display: block;
-  @media screen and (min-width: 1024px) {
+  @media screen and (min-width: $lg) {
     display: none !important;
   }
 }
 
 .sm_or_larger {
   display: none;
-  @media screen and (min-width: 640px) {
+  @media screen and (min-width: $sm) {
     display: block;
   }
 }
 
 .sm_or_smaller {
   display: block;
-  @media screen and (min-width: 640px) {
+  @media screen and (min-width: $sm) {
     display: none;
   }
 }
 
 .xs_or_larger {
   display: none;
-  @media screen and (min-width: 320px) {
+  @media screen and (min-width: $xs) {
     display: block;
   }
 }
 
 .xs_or_smaller {
   display: block;
-  @media screen and (min-width: 320px) {
+  @media screen and (min-width: $xs) {
+    display: none;
+  }
+}
+
+@mixin size_or_larger($size) {
+  display: none;
+  @media screen and (min-width: $size) {
+    display: block;
+  }
+}
+
+@mixin size_or_smaller($size) {
+  @content;
+  @media screen and (min-width: $size) {
     display: none;
   }
 }
+
+@mixin size_or_larger($size) {
+  display: none;
+  @media screen and (min-width: $size) {
+    @content;
+  }
+}