Merge pull request #2137 from appwrite/fix-mobile-breakpoints-and-broken-client-routing

fix(docs): header display breakpoints and client side routing

Author: TorstenDittmann

src/lib/layouts/SidebarNavButton.svelte

@@ -10,7 +10,6 @@
     class:is-selected={page.url?.pathname === groupItem.href}
     href={groupItem.href}
     target={groupItem.openInNewTab ? '_blank' : undefined}
-    data-sveltekit-reload
 >
     {#if groupItem.icon}
         <span class="icon {groupItem.icon}" aria-hidden="true"></span>

src/scss/7-components/_main-header.scss

@@ -100,9 +100,18 @@
         --p-main-header-border-color: rgb(0, 0, 0, 0.1);
     }
 
-    @media  #{$break1} {
+    @media  #{$break2} {
         display: none;
     }
+    
+    @media  #{$break1} {
+        [data-variant="two-side-navs"] & {
+            display: none;
+        }
+        [data-variant="expanded"] & {
+            display: none;
+        }
+    }
 
     &.is-hidden {
         transform: translateY(-100%);

src/scss/7-components/_mobile-header.scss

@@ -29,7 +29,7 @@
         -webkit-backdrop-filter: blur(pxToRem(8));
         backdrop-filter: blur(pxToRem(8));
     }
-    @media #{$break2open} {
+    @media #{$break3open} {
         display: none;
     }