mobilizon/js/tests/unit/specs/components/__snapshots__/navbar.spec.ts.snap

// Vitest Snapshot v1

exports[`App component > renders a Vue component 1`] = `
"<nav class=\\"bg-white border-gray-200 px-2 sm:px-4 py-2.5 dark:bg-zinc-900\\" id=\\"navbar\\">
  <div class=\\"container mx-auto flex flex-wrap items-center mx-auto gap-4\\">
    <router-link to=\\"[object Object]\\" class=\\"flex items-center\\">
      <mobilizon-logo-stub invert=\\"false\\" class=\\"w-40\\"></mobilizon-logo-stub>
    </router-link>
    <!--v-if--><button type=\\"button\\" class=\\"inline-flex items-center p-2 ml-1 text-sm text-zinc-500 rounded-lg md:hidden hover:bg-zinc-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-zinc-400 dark:hover:bg-zinc-700 dark:focus:ring-gray-600\\" aria-controls=\\"mobile-menu-2\\" aria-expanded=\\"false\\"><span class=\\"sr-only\\">Open main menu</span><svg class=\\"w-6 h-6\\" aria-hidden=\\"true\\" fill=\\"currentColor\\" viewBox=\\"0 0 20 20\\" xmlns=\\"http://www.w3.org/2000/svg\\">
        <path fill-rule=\\"evenodd\\" d=\\"M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z\\" clip-rule=\\"evenodd\\"></path>
      </svg></button>
    <div class=\\"justify-between items-center w-full md:flex md:w-auto md:order-1 hidden\\" id=\\"mobile-menu-2\\">
      <ul class=\\"flex flex-col md:flex-row md:space-x-8 mt-2 md:mt-0 md:font-lightbold\\">
        <!--v-if-->
        <!--v-if-->
        <li>
          <router-link to=\\"[object Object]\\" class=\\"block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700\\">Login</router-link>
        </li>
        <li>
          <router-link to=\\"[object Object]\\" class=\\"block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700\\">Register</router-link>
        </li>
      </ul>
    </div>
  </div>
</nav>
<!-- <o-navbar
    id=\\"navbar\\"
    type=\\"is-secondary\\"
    wrapper-class=\\"container mx-auto\\"
    v-model:active=\\"mobileNavbarActive\\"
  >
    <template #brand>
      <o-navbar-item
        tag=\\"router-link\\"
        :to=\\"{ name: RouteName.HOME }\\"
        :aria-label=\\"$t('Home')\\"
      >
        <logo />
      </o-navbar-item>
    </template>
    <template #start>
      <o-navbar-item tag=\\"router-link\\" :to=\\"{ name: RouteName.SEARCH }\\">{{
        $t(\\"Explore\\")
      }}</o-navbar-item>
      <o-navbar-item
        v-if=\\"currentActor.id && currentUser?.isLoggedIn\\"
        tag=\\"router-link\\"
        :to=\\"{ name: RouteName.MY_EVENTS }\\"
        >{{ $t(\\"My events\\") }}</o-navbar-item
      >
      <o-navbar-item
        tag=\\"router-link\\"
        :to=\\"{ name: RouteName.MY_GROUPS }\\"
        v-if=\\"
          config &&
          config.features.groups &&
          currentActor.id &&
          currentUser?.isLoggedIn
        \\"
        >{{ $t(\\"My groups\\") }}</o-navbar-item
      >
      <o-navbar-item
        tag=\\"span\\"
        v-if=\\"
          config &&
          config.features.eventCreation &&
          currentActor.id &&
          currentUser?.isLoggedIn
        \\"
      >
        <o-button
          v-if=\\"!hideCreateEventsButton\\"
          tag=\\"router-link\\"
          :to=\\"{ name: RouteName.CREATE_EVENT }\\"
          variant=\\"primary\\"
          >{{ $t(\\"Create\\") }}</o-button
        >
      </o-navbar-item>
    </template>
    <template #end>
      <o-navbar-item tag=\\"div\\">
        <search-field @navbar-search=\\"mobileNavbarActive = false\\" />
      </o-navbar-item>

      <o-navbar-dropdown
        v-if=\\"currentActor.id && currentUser?.isLoggedIn\\"
        right
        collapsible
        ref=\\"user-dropdown\\"
        tabindex=\\"0\\"
        tag=\\"span\\"
        @keyup.enter=\\"toggleMenu\\"
      >
        <template #label v-if=\\"currentActor\\">
          <div class=\\"identity-wrapper\\">
            <div>
              <figure class=\\"image is-32x32\\" v-if=\\"currentActor.avatar\\">
                <img
                  class=\\"is-rounded\\"
                  alt=\\"avatarUrl\\"
                  :src=\\"currentActor.avatar.url\\"
                />
              </figure>
              <o-icon v-else icon=\\"account-circle\\" />
            </div>
            <div class=\\"media-content is-hidden-desktop\\">
              <span>{{ displayName(currentActor) }}</span>
              <span class=\\"has-text-grey-dark\\" v-if=\\"currentActor.name\\"
                >@{{ currentActor.preferredUsername }}</span
              >
            </div>
          </div>
        </template>

        No identities dropdown if no identities
        <span v-if=\\"identities.length <= 1\\"></span>
        <o-navbar-item
          tag=\\"span\\"
          v-for=\\"identity in identities\\"
          v-else
          :active=\\"identity.id === currentActor.id\\"
          :key=\\"identity.id\\"
          tabindex=\\"0\\"
          @click=\\"setIdentity({
      preferredUsername: identity.preferredUsername,
    })\\"
          @keyup.enter=\\"setIdentity({
      preferredUsername: identity.preferredUsername,
    })\\"
        >
          <span>
            <div class=\\"media-left\\">
              <figure class=\\"image is-32x32\\" v-if=\\"identity.avatar\\">
                <img
                  class=\\"is-rounded\\"
                  loading=\\"lazy\\"
                  :src=\\"identity.avatar.url\\"
                  alt
                />
              </figure>
              <o-icon v-else size=\\"is-medium\\" icon=\\"account-circle\\" />
            </div>

            <div class=\\"media-content\\">
              <span>{{ displayName(identity) }}</span>
              <span class=\\"has-text-grey-dark\\" v-if=\\"identity.name\\"
                >@{{ identity.preferredUsername }}</span
              >
            </div>
          </span>

          <hr class=\\"navbar-divider\\" role=\\"presentation\\" />
        </o-navbar-item>

        <o-navbar-item
          tag=\\"router-link\\"
          :to=\\"{ name: RouteName.UPDATE_IDENTITY }\\"
          >{{ $t(\\"My account\\") }}</o-navbar-item
        >
        <o-navbar-item
          v-if=\\"currentUser.role === ICurrentUserRole.ADMINISTRATOR\\"
          tag=\\"router-link\\"
          :to=\\"{ name: RouteName.ADMIN_DASHBOARD }\\"
          >{{ $t(\\"Administration\\") }}</o-navbar-item
        >

        <o-navbar-item
          tag=\\"span\\"
          tabindex=\\"0\\"
          @click=\\"logout\\"
          @keyup.enter=\\"logout\\"
        >
          <span>{{ $t(\\"Log out\\") }}</span>
        </o-navbar-item>
      </o-navbar-dropdown>

      <o-navbar-item v-else tag=\\"div\\">
        <div class=\\"buttons\\">
          <router-link
            class=\\"button is-primary\\"
            v-if=\\"config && config.registrationsOpen\\"
            :to=\\"{ name: RouteName.REGISTER }\\"
          >
            <strong>{{ $t(\\"Sign up\\") }}</strong>
          </router-link>

          <router-link
            class=\\"button is-light\\"
            :to=\\"{ name: RouteName.LOGIN }\\"
            >{{ $t(\\"Log in\\") }}</router-link
          >
        </div>
      </o-navbar-item>
    </template>
  </o-navbar> -->"
`;