
        <script setup>
        import { computed } from "vue"
        import { Example, PropsTable, PageTitle } from "@viteplay/vue"
        import { useRoute, useRouter } from "vue-router"
            
        let componentProps = {"CGlobalNav":[{"name":"p_ImgSrc","type":"string","required":false,"desc":"プロジェクトロゴ\n@example p_ImgSrc: 'CodelicLogo.svg'"},{"name":"p_ProjectName","type":"string","required":false,"desc":"プロジェクトネーム\n@example p_ProjectName: 'プロジェクトネーム'"},{"name":"p_Color","type":"string","required":false,"desc":"カラーを切り替える\n@example p_Color: '_primary'"},{"name":"linkData","type":"string | boolean","required":false,"desc":"リンクデータv-model\n@example linkData: String or Boolean"},{"name":"emits","type":"any","required":false,"desc":"リンクデータのemitsオプション"},{"name":"targetMenu","type":"array","required":false,"desc":"メニューv-model\n@example linkData: []"}]}
        let route = useRoute()
        let router = useRouter()
        let focusId = computed(() => route.query.focus && route.hash.slice(1))
        let shouldRender = (slug) => {
          return !route.query.focus || slug === focusId.value
        }
        let hiddenCount = computed(() => {
          return ["basic","company","sub-menu"].filter((slug) => !shouldRender(slug)).length
        })

        let showAll = () => {
          router.push({ query: {}, hash: route.hash })
        }

        let openInEditor = (file) => {
           fetch('/__open-in-editor?file=' + encodeURIComponent(file))
        }
        let examples = [
          {
                title: "Basic",
                slug: "basic",
                docs: {"content":"","attrs":{}},
                // encodeURI because the example will contain html tags
                // which will cause this component to be incorrectly parsed
                code: decodeURI("%3Cscript%20setup%3E%0Aimport%20%7B%20ref%20%7D%20from%20'vue'%0Aimport%20CGlobalNav%20from%20'../CGlobalNav.vue'%0A%0A//%20%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E9%85%8D%E5%88%97%0Aconst%20targetMenu%20=%20%5B%0A%20%20%7B%0A%20%20%20%20menuIcon:%20'trending_up',%0A%20%20%20%20menuLink:%20'/CSales',%0A%20%20%20%20menuLabel:%20'%E5%A3%B2%E4%B8%8A%E7%AE%A1%E7%90%86',%0A%20%20%7D,%0A%20%20%7B%0A%20%20%20%20menuIcon:%20'folder_shared',%0A%20%20%20%20menuLink:%20'/CLicense',%0A%20%20%20%20menuLabel:%20'%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B3%E3%82%B9%E4%B8%80%E8%A6%A7',%0A%20%20%7D,%0A%20%20%7B%0A%20%20%20%20menuIcon:%20'business',%0A%20%20%20%20menuLink:%20'/CCompany',%0A%20%20%20%20menuLabel:%20'%E5%A5%91%E7%B4%84%E4%BC%81%E6%A5%AD%E4%B8%80%E8%A6%A7',%0A%20%20%7D,%0A%20%20%7B%0A%20%20%20%20menuIcon:%20'groups',%0A%20%20%20%20menuLink:%20'/CEmployee',%0A%20%20%20%20menuLabel:%20'%E7%A4%BE%E5%93%A1%E4%B8%80%E8%A6%A7',%0A%20%20%7D,%0A%20%20%7B%0A%20%20%20%20menuIcon:%20'source',%0A%20%20%20%20menuLink:%20'/CItem',%0A%20%20%20%20menuLabel:%20'%E5%A4%96%E5%A3%81%E4%B8%80%E8%A6%A7',%0A%20%20%7D,%0A%20%20%7B%0A%20%20%20%20menuIcon:%20'manage_search',%0A%20%20%20%20menuLink:%20'/CPastCases',%0A%20%20%20%20menuLabel:%20'%E9%81%8E%E5%8E%BB%E6%A1%88%E4%BB%B6',%0A%20%20%7D,%0A%20%20%7B%0A%20%20%20%20menuIcon:%20'payments',%0A%20%20%20%20menuLink:%20'/CPaymentHandling',%0A%20%20%20%20menuLabel:%20'%E5%85%A5%E9%87%91%E5%AF%BE%E5%BF%9C%E7%AE%A1%E7%90%86',%0A%20%20%7D,%0A%20%20%7B%0A%20%20%20%20menuIcon:%20'dvr',%0A%20%20%20%20menuLink:%20'/CInformation',%0A%20%20%20%20menuLabel:%20'%E8%87%AA%E7%A4%BE%E6%83%85%E5%A0%B1',%0A%20%20%7D,%0A%20%20%7B%0A%20%20%20%20menuIcon:%20'help_outline',%0A%20%20%20%20menuLink:%20'/CContact',%0A%20%20%20%20menuLabel:%20'%E3%81%8A%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B',%0A%20%20%7D,%0A%5D%0A%0Aconst%20linkData%20=%20ref('')%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%E3%82%B3%E3%83%BC%E3%83%89%E3%83%AA%E3%83%83%E3%82%AF%20model:%20%7B%7B%20linkData%20%7D%7D%0A%20%20%3CCGlobalNav%0A%20%20%20%20v-model:linkData=%22linkData%22%0A%20%20%20%20v-model:targetMenu=%22targetMenu%22%0A%20%20%20%20p_Color=%22_primary%22%0A%20%20%20%20p_ProjectName=%22%E6%97%A5%E6%9C%AC%E8%AA%9E%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E5%90%8D%22%0A%20%20/%3E%0A%3C/template%3E%0A%0A%3Cstyle%3E%0A:root%20%7B%0A%20%20--q-primary:%20#5e421d;%0A%7D%0A%3C/style%3E"),
                iframeUrl: "/__iframe/CGlobalNav-basic.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CGlobalNav/examples/Basic.vue") 
                  : undefined 
              },{
                title: "Company",
                slug: "company",
                docs: {"content":"","attrs":{}},
                // encodeURI because the example will contain html tags
                // which will cause this component to be incorrectly parsed
                code: decodeURI("%3Cscript%20setup%3E%0Aimport%20%7B%20ref%20%7D%20from%20'vue'%0Aimport%20CGlobalNav%20from%20'../CGlobalNav.vue'%0A%0A//%20%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E9%85%8D%E5%88%97%0Aconst%20targetMenu%20=%20%5B%0A%20%20%7B%0A%20%20%20%20menuIcon:%20'trending_up',%0A%20%20%20%20menuLink:%20'/CSales',%0A%20%20%20%20menuLabel:%20'%E5%A3%B2%E4%B8%8A%E7%AE%A1%E7%90%86',%0A%20%20%7D,%0A%20%20%7B%0A%20%20%20%20menuIcon:%20'groups',%0A%20%20%20%20menuLink:%20'/CEmployee',%0A%20%20%20%20menuLabel:%20'%E7%A4%BE%E5%93%A1%E4%B8%80%E8%A6%A7',%0A%20%20%7D,%0A%20%20%7B%0A%20%20%20%20menuIcon:%20'source',%0A%20%20%20%20menuLink:%20'/CItem',%0A%20%20%20%20menuLabel:%20'%E5%A4%96%E5%A3%81%E4%B8%80%E8%A6%A7',%0A%20%20%7D,%0A%20%20%7B%0A%20%20%20%20menuIcon:%20'manage_search',%0A%20%20%20%20menuLink:%20'/CPastCases',%0A%20%20%20%20menuLabel:%20'%E9%81%8E%E5%8E%BB%E6%A1%88%E4%BB%B6',%0A%20%20%7D,%0A%20%20%7B%0A%20%20%20%20menuIcon:%20'folder_shared',%0A%20%20%20%20menuLink:%20'/CLicense',%0A%20%20%20%20menuLabel:%20'%E8%AB%8B%E6%B1%82%E7%AE%A1%E7%90%86',%0A%20%20%7D,%0A%20%20%7B%0A%20%20%20%20menuIcon:%20'dvr',%0A%20%20%20%20menuLink:%20'/CInformation',%0A%20%20%20%20menuLabel:%20'%E8%87%AA%E7%A4%BE%E6%83%85%E5%A0%B1',%0A%20%20%7D,%0A%20%20%7B%0A%20%20%20%20menuIcon:%20'help_outline',%0A%20%20%20%20menuLink:%20'/CContact',%0A%20%20%20%20menuLabel:%20'%E3%81%8A%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B',%0A%20%20%7D,%0A%20%20%7B%0A%20%20%20%20menuIcon:%20'computer',%0A%20%20%20%20menuLink:%20'/CSystem',%0A%20%20%20%20menuLabel:%20'%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E7%AE%A1%E7%90%86',%0A%20%20%20%20subMenu:%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20menuIcon:%20'fiber_manual_record',%0A%20%20%20%20%20%20%20%20subMenuLink:%20'/CTestSub1',%0A%20%20%20%20%20%20%20%20menuLabel:%20'%E3%83%86%E3%82%B9%E3%83%88%E3%82%B5%E3%83%961',%0A%20%20%20%20%20%20%7D,%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20menuIcon:%20'fiber_manual_record',%0A%20%20%20%20%20%20%20%20subMenuLink:%20'/CTestSub2',%0A%20%20%20%20%20%20%20%20menuLabel:%20'%E3%83%86%E3%82%B9%E3%83%88%E3%82%B5%E3%83%962',%0A%20%20%20%20%20%20%7D,%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20menuIcon:%20'fiber_manual_record',%0A%20%20%20%20%20%20%20%20subMenuLink:%20'/CTestSub3',%0A%20%20%20%20%20%20%20%20menuLabel:%20'%E3%83%86%E3%82%B9%E3%83%88%E3%82%B5%E3%83%963',%0A%20%20%20%20%20%20%7D,%0A%20%20%20%20%5D,%0A%20%20%7D,%0A%5D%0A%0Aconst%20linkData%20=%20ref('')%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%E5%A5%91%E7%B4%84%E4%BC%81%E6%A5%AD%20model:%20%7B%7B%20linkData%20%7D%7D%0A%20%20%3CCGlobalNav%20v-model:linkData=%22linkData%22%20v-model:targetMenu=%22targetMenu%22%20p_Color=%22_primary%22%20/%3E%0A%3C/template%3E%0A%0A%3Cstyle%3E%0A:root%20%7B%0A%20%20--q-primary:%20#5e421d;%0A%7D%0A%3C/style%3E"),
                iframeUrl: "/__iframe/CGlobalNav-company.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CGlobalNav/examples/Company.vue") 
                  : undefined 
              },{
                title: "SubMenu",
                slug: "sub-menu",
                docs: {"content":"","attrs":{}},
                // encodeURI because the example will contain html tags
                // which will cause this component to be incorrectly parsed
                code: decodeURI("%3Cscript%20setup%3E%0Aimport%20%7B%20ref%20%7D%20from%20'vue'%0Aimport%20CGlobalNav%20from%20'../CGlobalNav.vue'%0A%0A//%20%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E9%85%8D%E5%88%97%0Aconst%20targetMenu%20=%20%5B%0A%20%20%7B%0A%20%20%20%20menuIcon:%20'trending_up',%0A%20%20%20%20menuLink:%20'/CSales',%0A%20%20%20%20menuLabel:%20'%E5%A3%B2%E4%B8%8A%E7%AE%A1%E7%90%86',%0A%20%20%20%20subMenu:%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20menuIcon:%20'fiber_manual_record',%0A%20%20%20%20%20%20%20%20subMenuLink:%20'/CTestSub1',%0A%20%20%20%20%20%20%20%20menuLabel:%20'%E3%83%86%E3%82%B9%E3%83%88%E3%82%B5%E3%83%961',%0A%20%20%20%20%20%20%7D,%0A%20%20%20%20%5D,%0A%20%20%7D,%0A%20%20%7B%0A%20%20%20%20menuIcon:%20'folder_shared',%0A%20%20%20%20menuLink:%20'/CLicense',%0A%20%20%20%20menuLabel:%20'%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B3%E3%82%B9%E4%B8%80%E8%A6%A7',%0A%20%20%7D,%0A%20%20%7B%0A%20%20%20%20menuIcon:%20'business',%0A%20%20%20%20menuLink:%20'/CCompany',%0A%20%20%20%20menuLabel:%20'%E5%A5%91%E7%B4%84%E4%BC%81%E6%A5%AD%E4%B8%80%E8%A6%A7',%0A%20%20%7D,%0A%20%20%7B%0A%20%20%20%20menuIcon:%20'groups',%0A%20%20%20%20menuLink:%20'/CEmployee',%0A%20%20%20%20menuLabel:%20'%E7%A4%BE%E5%93%A1%E4%B8%80%E8%A6%A7',%0A%20%20%7D,%0A%20%20%7B%0A%20%20%20%20menuIcon:%20'source',%0A%20%20%20%20menuLink:%20'/CItem',%0A%20%20%20%20menuLabel:%20'%E5%A4%96%E5%A3%81%E4%B8%80%E8%A6%A7',%0A%20%20%20%20subMenu:%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20menuIcon:%20'fiber_manual_record',%0A%20%20%20%20%20%20%20%20subMenuLink:%20'/CTestSub2',%0A%20%20%20%20%20%20%20%20menuLabel:%20'%E3%83%86%E3%82%B9%E3%83%88%E3%82%B5%E3%83%962',%0A%20%20%20%20%20%20%7D,%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20menuIcon:%20'fiber_manual_record',%0A%20%20%20%20%20%20%20%20subMenuLink:%20'/CTestSub3',%0A%20%20%20%20%20%20%20%20menuLabel:%20'%E3%83%86%E3%82%B9%E3%83%88%E3%82%B5%E3%83%963',%0A%20%20%20%20%20%20%7D,%0A%20%20%20%20%5D,%0A%20%20%7D,%0A%20%20%7B%0A%20%20%20%20menuIcon:%20'manage_search',%0A%20%20%20%20menuLink:%20'/CPastCases',%0A%20%20%20%20menuLabel:%20'%E9%81%8E%E5%8E%BB%E6%A1%88%E4%BB%B6',%0A%20%20%7D,%0A%20%20%7B%0A%20%20%20%20menuIcon:%20'payments',%0A%20%20%20%20menuLink:%20'/CPaymentHandling',%0A%20%20%20%20menuLabel:%20'%E5%85%A5%E9%87%91%E5%AF%BE%E5%BF%9C%E7%AE%A1%E7%90%86',%0A%20%20%7D,%0A%20%20%7B%0A%20%20%20%20menuIcon:%20'dvr',%0A%20%20%20%20menuLink:%20'/CInformation',%0A%20%20%20%20menuLabel:%20'%E8%87%AA%E7%A4%BE%E6%83%85%E5%A0%B1',%0A%20%20%7D,%0A%20%20%7B%0A%20%20%20%20menuIcon:%20'help_outline',%0A%20%20%20%20menuLink:%20'/CContact',%0A%20%20%20%20menuLabel:%20'%E3%81%8A%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B',%0A%20%20%20%20subMenu:%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20menuIcon:%20'fiber_manual_record',%0A%20%20%20%20%20%20%20%20subMenuLink:%20'/CTestSub4',%0A%20%20%20%20%20%20%20%20menuLabel:%20'%E3%83%86%E3%82%B9%E3%83%88%E3%82%B5%E3%83%964',%0A%20%20%20%20%20%20%7D,%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20menuIcon:%20'fiber_manual_record',%0A%20%20%20%20%20%20%20%20subMenuLink:%20'/CTestSub5',%0A%20%20%20%20%20%20%20%20menuLabel:%20'%E3%83%86%E3%82%B9%E3%83%88%E3%82%B5%E3%83%965',%0A%20%20%20%20%20%20%7D,%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20menuIcon:%20'fiber_manual_record',%0A%20%20%20%20%20%20%20%20subMenuLink:%20'/CTestSub6',%0A%20%20%20%20%20%20%20%20menuLabel:%20'%E3%83%86%E3%82%B9%E3%83%88%E3%82%B5%E3%83%966',%0A%20%20%20%20%20%20%7D,%0A%20%20%20%20%5D,%0A%20%20%7D,%0A%5D%0A%0Aconst%20linkData%20=%20ref('')%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%E3%82%B5%E3%83%96%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E8%BF%BD%E5%8A%A0%20model:%20%7B%7B%20linkData%20%7D%7D%0A%20%20%3CCGlobalNav%20v-model:linkData=%22linkData%22%20v-model:targetMenu=%22targetMenu%22%20p_Color=%22_primary%22%20/%3E%0A%3C/template%3E%0A%0A%3Cstyle%3E%0A:root%20%7B%0A%20%20--q-primary:%20#5e421d;%0A%7D%0A%3C/style%3E"),
                iframeUrl: "/__iframe/CGlobalNav-sub-menu.html",
                openInEditor: import.meta.env.DEV 
                  ? () => openInEditor("/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CGlobalNav/examples/SubMenu.vue") 
                  : undefined 
              }
        ]
        </script>
        <template>
          <PageTitle title="CGlobalNav" :openInEditor="() => openInEditor('/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CGlobalNav/CGlobalNav.vue')" />
          <div v-if="hiddenCount > 0" class="hidden-examples-info">
            {{ hiddenCount }} example{{ hiddenCount > 1 ? "s" : null }} hidden, <a class="viteplay-link" type="button" @click.prevent="showAll">show all</a>
          </div>
          <PropsTable componentName="CGlobalNav" :componentProps="componentProps" />
          <template  
            v-for="example in examples" 
            :key="example.slug">
            <Example 
              v-if="shouldRender(example.slug)"
              :example="example" 
              :componentProps="componentProps" />
          </template>
        </template>

<style scoped>
.hidden-examples-info {
  margin: 20px 0;
}
</style>
      