new funcionality

resources/scss/components/_app-nav.scss

@@ -18,16 +18,16 @@
     max-width: $page-max-width;
     margin: 0 auto;
     display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: $space-4;
+    flex-direction: column;
+    gap: $space-2;
     padding: $space-3 $space-6;
 }
 
-.app-nav__section {
+.app-nav__top {
     display: flex;
     align-items: center;
-    gap: $space-6;
+    justify-content: space-between;
+    gap: $space-4;
 }
 
 .app-nav__brand {
@@ -37,15 +37,9 @@
 }
 
 .app-nav__logo {
-    display: grid;
-    place-items: center;
     height: 1.75rem;
-    width: 1.75rem;
-    border-radius: $radius-md;
-    background: var(--gradient-accent);
-    color: #fff;
-    font-size: 0.7rem;
-    font-weight: 700;
+    width: auto;
+    object-fit: contain;
 }
 
 .app-nav__brand-name {
@@ -57,6 +51,7 @@
 .app-nav__links {
     display: none;
     align-items: center;
+    flex-wrap: wrap;
     gap: $space-1;
 
     @include respond-up($breakpoint-md) {
@@ -70,6 +65,7 @@
     font-size: $font-sm;
     font-weight: 500;
     color: var(--color-text-secondary);
+    white-space: nowrap;
     transition: $transition-fast;
 
     &:hover {