docs: handle route changes and scroll position better

Author: hperrin

INSTALL.md

@@ -14,15 +14,15 @@ You can also [use SMUI in the Svelte REPL](REPL.md).
 
 You will always import Svelte components from the individual packages.
 
-This method will only include the JavaScript. Use this for the Default Theme or the [Easy Styling Method](SASS.md).
+This method will only include the JavaScript. Use this for the Default Theme or the [Easy Styling Method](SASS.md#easy-styling-method).
 
 ```svelte
 <script>
   import Button from '@smui/button';
 </script>
 ```
 
-This method will include Sass files as well. Use this for the [Advanced Styling Method](SASS.md).
+This method will include Sass files as well. Use this for the [Advanced Styling Method](SASS.md#advanced-styling-method).
 
 ```svelte
 <script>

SAPPER.md

@@ -2,7 +2,7 @@
 
 <sub>\* As of 2021-Apr-06, these instructions will now work without a flash of unstyled content!</sub>
 
-These instructions are for the Advanced Styling Method. If you don't need the advantages of this method, it's much easier to use the [Easy Styling Method](SASS.md).
+These instructions are for the Advanced Styling Method. If you don't need the advantages of this method, it's much easier to use the [Easy Styling Method](SASS.md#easy-styling-method).
 
 Install the following packages as dev dependencies.
 

site/src/routes/_layout.svelte

@@ -23,7 +23,7 @@
       </Section>
       <Section align="end" toolbar style="color: var(--mdc-on-surface, #000);">
         {#if activeSection}
-          {#each repos as repo}
+          {#each activeSection.repos || [] as repo}
             <Wrapper>
               <IconButton href={repo} target="_blank">
                 <Icon component={Svg} viewBox="0 0 24 24">
@@ -111,8 +111,7 @@
                   : 'shortcut' in section
                   ? section.shortcut
                   : null}
-                on:click={() => pickSection(section)}
-                activated={'route' in section && section.route === $page.path}
+                activated={section === activeSection}
                 style={section.indent
                   ? 'margin-left: ' + section.indent * 25 + 'px;'
                   : ''}
@@ -494,34 +493,26 @@
     },
   ];
 
-  let activeSection = sections.find(
-    (section) => 'route' in section && section.route === $page.path
+  $: activeSection = sections.find(
+    (section) => 'route' in section && routesEqual(section.route, $page.path)
   );
-  $: repos =
-    activeSection && 'repos' in activeSection ? activeSection.repos : [];
-
-  onMount(setMiniWindow);
-
-  function pickSection(section) {
-    if (!('shortcut' in section) && !('route' in section)) {
-      return;
-    }
-
+  let previousPagePath = null;
+  $: if (mainContent && previousPagePath !== $page.path) {
     drawerOpen = false;
-    mainContent.scrollTop = 0;
+    const top = window.location.hash
+      ? document.querySelector(window.location.hash)?.offsetTop || 0
+      : 0;
+    mainContent.scrollTop = top;
+    previousPagePath = $page.path;
+  }
 
-    // Svelte/Sapper is not updated the components correctly, so I need this.
-    sections.forEach((section) => {
-      if (!section.separator) {
-        section.component.$set({ activated: false });
-      }
-    });
-    section.component.$set({ activated: true });
+  onMount(setMiniWindow);
 
-    activeSection =
-      'shortcut' in section
-        ? sections.find((sec) => sec.route === section.shortcut)
-        : section;
+  function routesEqual(a, b) {
+    return (
+      (a.endsWith('/') ? a.slice(0, -1) : a) ===
+      (b.endsWith('/') ? b.slice(0, -1) : b)
+    );
   }
 
   function setMiniWindow() {