fix-header

src/components/Nav/Header.tsx

@@ -8,7 +8,7 @@ import { t } from '../../utils/intl'
 import { useModalStore, showModal, useWarningsStore } from '../../stores/ui'
 import { useStore } from '@nanostores/solid'
 import { session as ssession } from '../../stores/auth'
-import { route, resource } from '../../stores/router'
+import { route, router } from '../../stores/router'
 import './Header.scss'
 
 const resources = [
@@ -26,7 +26,8 @@ export const Header = () => {
   const { getWarnings } = useWarningsStore()
   const session = useStore(ssession)
   const { getModal } = useModalStore()
-  const subpath = useStore(resource)
+  const routing = useStore(router)
+  const subpath = createMemo(() => routing().path)
   // methods
   const toggleWarnings = () => setVisibleWarnings(!visibleWarnings())
   const toggleFixed = () => setFixed(!fixed())
@@ -58,7 +59,7 @@ export const Header = () => {
           <ul class="col main-navigation text-xl inline-flex" classList={{ fixed: fixed() }}>
             <For each={resources}>
               {(r: { href: string; name: string }) => (
-                <li classList={{ selected: r.href.startsWith(subpath()) }}>
+                <li classList={{ selected: r.href === subpath() }}>
                   <a href={r.href} onClick={route}>
                     {r.name}
                   </a>

src/components/Views/ArticlePage.tsx

@@ -1,11 +1,10 @@
-import { createEffect, createSignal, Show, Suspense } from 'solid-js'
+import { createEffect, createMemo, createSignal, Show, Suspense } from 'solid-js'
 import { FullArticle } from '../Article/FullArticle'
 import { t } from '../../utils/intl'
 
 import type { Reaction, Shout } from '../../graphql/types.gen'
 import { useCurrentArticleStore } from '../../stores/zine/currentArticle'
 import { loadArticleReactions, useReactionsStore } from '../../stores/zine/reactions'
-import { slug as slugstore } from '../../stores/router'
 
 import '../../styles/Article.scss'
 import { useStore } from '@nanostores/solid'
@@ -22,7 +21,7 @@ export const ArticlePage = (props: ArticlePageProps) => {
   const { getCurrentArticle } = useCurrentArticleStore({ currentArticle: props.article })
   const [getCommentsPage] = createSignal(1)
   const [getIsCommentsLoading, setIsCommentsLoading] = createSignal(false)
-  const slug = useStore(slugstore)
+  const slug = createMemo(() => props.slug)
   const reactionslist = useReactionsStore(props.reactions)
 
   createEffect(async () => {

src/stores/router.ts

@@ -1,5 +1,5 @@
 import { createRouter, createSearchParams } from '@nanostores/router'
-import { atom, onMount } from 'nanostores'
+import { atom, computed, onMount } from 'nanostores'
 import { createEffect } from 'solid-js'
 import { isServer } from 'solid-js/web'
 
@@ -19,8 +19,6 @@ interface Routes {
   topic: 'slug'
 }
 
-export const resource = atom<string>('')
-export const slug = atom<string>('')
 export const params = createSearchParams()
 export const router = createRouter<Routes>(
   {
@@ -65,13 +63,3 @@ if (!isServer) {
   console.log('[router] client runtime')
   createEffect(() => router.open(window.location.pathname), [window.location])
 }
-
-onMount(router, () => {
-  router.listen((r) => {
-    resource.set(r.path)
-    const last = resource.get().split('/').pop().split('?').at(0)
-    if (Boolean(last) && router.routes.filter((x) => x[0] === last).length === 0) {
-      slug.set(last || '')
-    }
-  })
-})