revise blog

Author: judell

blog/src/Main.xmlui

@@ -10,6 +10,7 @@
         image: "blog-scrabble.png"
       }
     ]}`>
+    <Button variant="ghost" label="toggle threshold" padding="$space-1" onClick="toggleThreshold()" />
     <AppState
         id="navState"
         initialValue="{{
@@ -21,17 +22,17 @@
         <property name="logoTemplate">
           <CHStack height="$space-6">
             <Logo />
-            <Text variant="em">Tutorials, tips, best practices</Text>
           </CHStack>
         </property>
         <property name="profileMenuTemplate">
+            <Text variant="em">Tutorials, tips, best practices</Text>
             <SpaceFiller />
             <Link when="{!['/', '/blog'].includes($pathname)}" to="/">
                 <Button height="$space-6" padding="$space-2" label="All Posts" />
             </Link>
         </property>
     </AppHeader>
-    <NavPanel>
+    <NavPanel when="{showNav()}" >
        <NavGroup label="Recent posts" to="/blog">
             <NavLink
                 label="Welcome to the XMLUI blog!"

blog/src/Main.xmlui.xs

@@ -1,3 +1,11 @@
 function showNav() {
     return posts.length > showNavPanelThreshold && mediaSize.sizeIndex > 2;
+}
+
+function toggleThreshold() {
+    if (showNavPanelThreshold> 0) {
+        showNavPanelThreshold = 0
+    } else {
+        showNavPanelThreshold = 6
+    }
 }

blog/src/components/BlogOverview.xmlui

@@ -1,4 +1,5 @@
 <Component name="BlogOverview">
+  <Debug />
   <CVStack>
     <VStack width="100%">
       <List  data="{

blog/src/components/BlogPage.xmlui

@@ -1,4 +1,5 @@
 <Component name="BlogPage">
+    <Debug />
     <VStack gap="0">
       <H1>{$props.post.title}</H1>
       <Text>{$props.post.date} • {$props.post.author}</Text>

blog/src/components/Debug.xmlui

@@ -1,6 +1,8 @@
 <Component name="Debug">
+<!--
   <AppState id="navState" />
   <Text>
     navState: {JSON.stringify(navState.value)},  sizeIndex {JSON.stringify(mediaSize.sizeIndex)}, path {$pathname}
   </Text>
+-->
 </Component>