workaround for a bug with hiding view toolbar on specific page on #framework7 #v5

App.svelte

<script>
  import {
    App,
    View,
    Toolbar,
    Views,
    Link, f7ready
  } from 'framework7-svelte';

  import {states} from "./services/store";
  import routes from './routes';
  import {onMount} from "svelte";
  
  let activeRoute = 'home';
  
  onMount(() => {
    f7ready(instance => {
      const tabbar = instance.$('.tabbar-app');

      instance.on('routeChange', (page) => {
        activeRoute = page.route.component.prototype.constructor.name.toLowerCase();
        activeRoute !== 'thread'
          ? tabbar.show()
          : tabbar.hide();
      });
    });
  });
  
  
</script>

<App params={ f7params }>
  <Views>
    <View>
      <Toolbar class="tabbar-app" tabbar position={'bottom'}>
        <Link href="/">Home</Link>
        <Link href="/threads">Chats</Link>
        <Link href="/apartments">Props</Link>
      </Toolbar>
    </View>
  </Views>

</App>

AppSolution2.svelte

<script>
  import {
    App,
    View,
    Views,
    f7ready
  } from 'framework7-svelte';

  import {states} from "./services/store";
  import routes from './routes';
  import {onMount} from "svelte";
  import MainToolbar from './components/MainToolbarSolution2.svelte'

  
  let activeRoute = 'home';
  
  function getComponentNameFromPage(page) {
    return page.route.component.prototype.constructor.name.toLowerCase();
  }
  
  onMount(() => {
    f7ready(instance => {
      appInstance = instance;
      
      instance.on('routeChange', (to, from,router) => {
        try {
          activeRoute = getComponentNameFromPage(to)
        }
        catch (e) { console.log(e); }
        if ($states.loggedIn && activeRoute === 'thread') {
          $states.showMainToolbar = false;
        }
      });
    });
  });
  
  
</script>

<App params={ f7params }>
  <View>
    <MainToolbar activeRoute={activeRoute}/>
  </View>
</App>

MainToolbarSolution2.svelte

<script>
  import {
    Toolbar,
    Icon,
    Link,
  } from 'framework7-svelte';

  import {states} from "../services/store";

  export let activeRoute;

  let user;
  $: user = $states.user || false;

</script>
{#if $states.showMainToolbar}
  {#if user && user.role === 'client'}
      <Toolbar class="tabbar-app" tabbar position={'bottom'}>
        <Link href="/">Home</Link>
        <Link href="/chats">Chats</Link>
      </Toolbar>
  {:else if user && user.role === 'consultant'}
      <Toolbar class="tabbar-app" tabbar position={'bottom'}>
        <Link href="/">Home</Link>
        <Link href="/threads">Chats</Link>
        <Link href="/apartments">Props</Link>
      </Toolbar>
  {/if}
{/if}

@thebestgin, thank you. Yeah, it was mistake. I've updated the gist.
BTW: now I'm using a different approach to show/hide tabbar.