Get page name correctly (data-barba-namespace with Barba.JS and Wordpress)

Question

Right now, i'm using Sage 9 to create a theme. I've installed Barba and it works fine except for one thing. I'm trying to get the page name correctly in my data-barba-namespace. For now, i was using the following:

data-barba-namespace="{{ get_post_field('post_name', $post_id) }}"

But for one page called "Work" (that shows works from a custom post type i've created using CPT UI), i've created a template (template-work.blade.php) and in it i have different queries for different works in different categories. My main issue is that my previous code on this page returns the name of one work/project in my data-barba-namespace and not the name of the page... I can't figure out why

So i've tried to use the following code:

<?php
      $pagename = get_query_var('pagename');
      if ( !$pagename && $id > 0 ) {
      $post = $wp_query->get_queried_object();
      $pagename = $post->post_name;
      }
?> 

And so

data-barba-namespace="{{ $pagename }}"

But the issue with this is since i'm using a static front page (created a front-page.blade.php file), the data-barba-namespace is empty for the homepage, even though it works for the other pages. And this solution doesn't get the work pages names correctly as get_post_field('post_name', $post_id) does.

My last issue is with the custom post type Work i've created. When using my first solution, then i have the issue mentioned with my work page (putting the name of a work instead of "work" in the data-barba-namespace) and another one that's obvious: in the data-barba-namespace, i have the name of the project. Which should be great except how i have to create a barba transition for all of the projects.. which is bad even for a beginner like me. i'd rather have a "work-page" or something like this in my data-barba-namespace to create only one transition for all my work pages, But i have no clue how to do this. i couldn't find nothing..

Any help would be much much appreciated!

EDIT: EDIT: Using the second solution, i figured out i could just add a conditional statement to check if it's the homepage. For some reasons, it didn't work the first time.. Here is what i'm using:

@php
      if( is_home() || is_front_page() ){
        $pagename = "home";
      } else {
        $pagename = get_query_var('pagename');
        if ( !$pagename && $id > 0 ) {
          // If a static page is set as the front page, $pagename will not be set. Retrieve it from the queried object
          $post = $wp_query->get_queried_object();

          $pagename = $post->post_name;
        }
      }
@endphp

But i still have trouble to find a solution for the work pages, so to give them a unique namespace name

Answer 1

Problem solved: I've used the following :

@php
    function is_post_type($type){
      global $wp_query;
      if($type == get_post_type($wp_query->post->ID))
          return true;
      return false;
    }

      if( is_home() || is_front_page() ){
        $pagename = "home";
      } elseif (is_single() && is_post_type('work')){
        $pagename = "work-item";
      } else {
        $pagename = get_query_var('pagename');
        if ( !$pagename && $id > 0 ) {
          // If a static page is set as the front page, $pagename will not be set. Retrieve it from the queried object
          $post = $wp_query->get_queried_object();

          $pagename = $post->post_name;
        }
      }
@endphp