update nested router docs (#2535)

* update nested router docs

* !!!

* fix according to comments

* fix error

website/docs/concepts/router.mdx

@@ -398,24 +398,32 @@ digraph {
 -->
 
 import useBaseUrl from "@docusaurus/useBaseUrl";
-import ThemedImage from '@theme/ThemedImage';
+import ThemedImage from "@theme/ThemedImage";
 
 <ThemedImage
   alt="nested router structure"
   sources={{
-        light: useBaseUrl('/img/nested-router-light.svg'),
-        dark: useBaseUrl('/img/nested-router-dark.svg'),
+    light: useBaseUrl("/img/nested-router-light.svg"),
+    dark: useBaseUrl("/img/nested-router-dark.svg"),
   }}
 />
 
 The nested `SettingsRouter` handles all urls that start with `/settings`. Additionally, it redirects urls that are not
 matched to the main `NotFound` route. So `/settings/gibberish` will redirect to `/404`.
 
+:::caution
+
+Though note that this is still work in progress so the way we do this is not final
+
+:::
+
 It can be implemented with the following code:
 
 ```rust
 use yew::prelude::*;
 use yew_router::prelude::*;
+use gloo::utils::window;
+use wasm_bindgen::UnwrapThrowExt;
 
 #[derive(Clone, Routable, PartialEq)]
 enum MainRoute {
@@ -425,7 +433,9 @@ enum MainRoute {
     News,
     #[at("/contact")]
     Contact,
-    #[at("/settings/:s")]
+    #[at("/settings")]
+    SettingsRoot,
+    #[at("/settings/*")]
     Settings,
     #[not_found]
     #[at("/404")]
@@ -434,7 +444,7 @@ enum MainRoute {
 
 #[derive(Clone, Routable, PartialEq)]
 enum SettingsRoute {
-    #[at("/settings/profile")]
+    #[at("/settings")]
     Profile,
     #[at("/settings/friends")]
     Friends,
@@ -450,9 +460,7 @@ fn switch_main(route: &MainRoute) -> Html {
         MainRoute::Home => html! {<h1>{"Home"}</h1>},
         MainRoute::News => html! {<h1>{"News"}</h1>},
         MainRoute::Contact => html! {<h1>{"Contact"}</h1>},
-        MainRoute::Settings => html! {
-            <Switch<SettingsRoute> render={Switch::render(switch_settings)} />
-        },
+        MainRoute::SettingsRoot | MainRoute::Settings => html! { <Switch<SettingsRoute> render={Switch::render(switch_settings)} /> },
         MainRoute::NotFound => html! {<h1>{"Not Found"}</h1>},
     }
 }
@@ -462,9 +470,7 @@ fn switch_settings(route: &SettingsRoute) -> Html {
         SettingsRoute::Profile => html! {<h1>{"Profile"}</h1>},
         SettingsRoute::Friends => html! {<h1>{"Friends"}</h1>},
         SettingsRoute::Theme => html! {<h1>{"Theme"}</h1>},
-        SettingsRoute::NotFound => html! {
-            <Redirect<MainRoute> to={MainRoute::NotFound}/>
-        }
+        SettingsRoute::NotFound => html! {<Redirect<MainRoute> to={MainRoute::NotFound}/>}
     }
 }
 

website/static/img/nested-router-dark.svg

@@ -55,12 +55,6 @@
 <path fill="grey" stroke="white" d="M271,-36C271,-36 217,-36 217,-36 211,-36 205,-30 205,-24 205,-24 205,-12 205,-12 205,-6 211,0 217,0 217,0 271,0 271,0 277,0 283,-6 283,-12 283,-12 283,-24 283,-24 283,-30 277,-36 271,-36"/>
 <text text-anchor="middle" x="244" y="-14.3" font-family="Times New Roman,serif" font-size="14.00" fill="white">Not Found</text>
 </g>
-<!-- SettingsNotFound&#45;&gt;Not Found -->
-<g id="edge10" class="edge">
-<title>SettingsNotFound&#45;&gt;Not Found</title>
-<path fill="none" stroke="white" d="M248.64,-36.1C250.75,-43.88 253.3,-53.26 255.66,-61.95"/>
-<polygon fill="white" stroke="white" points="252.31,-62.96 258.3,-71.7 259.06,-61.13 252.31,-62.96"/>
-</g>
 <!-- Main Router -->
 <g id="node9" class="node">
 <title>Main Router</title>

website/static/img/nested-router-light.svg

@@ -55,12 +55,6 @@
 <path fill="white" stroke="black" d="M271,-36C271,-36 217,-36 217,-36 211,-36 205,-30 205,-24 205,-24 205,-12 205,-12 205,-6 211,0 217,0 217,0 271,0 271,0 277,0 283,-6 283,-12 283,-12 283,-24 283,-24 283,-30 277,-36 271,-36"/>
 <text text-anchor="middle" x="244" y="-14.3" font-family="Times New Roman,serif" font-size="14.00">Not Found</text>
 </g>
-<!-- SettingsNotFound&#45;&gt;Not Found -->
-<g id="edge10" class="edge">
-<title>SettingsNotFound&#45;&gt;Not Found</title>
-<path fill="none" stroke="black" d="M248.64,-36.1C250.75,-43.88 253.3,-53.26 255.66,-61.95"/>
-<polygon fill="black" stroke="black" points="252.31,-62.96 258.3,-71.7 259.06,-61.13 252.31,-62.96"/>
-</g>
 <!-- Main Router -->
 <g id="node9" class="node">
 <title>Main Router</title>