[{"data":1,"prerenderedAt":517},["Reactive",2],{"$KyeTl6nybl":3,"page-data":4,"page-tree":492,"doc-page-nav":512},[],{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9,"description":8,"body":10,"_type":487,"_id":488,"_source":489,"_file":490,"_extension":491},"/documentation/setup/add-a-layout","setup",false,"","Add a layout",{"type":11,"children":12,"toc":484},"root",[13,479],{"type":14,"tag":15,"props":16,"children":18},"element","doc-component-demo",{"title":17},"Enable a Tairo layout layer",[19,26,40,57,444,448,453],{"type":14,"tag":20,"props":21,"children":22},"p",{},[23],{"type":24,"value":25},"text","Tairo Layouts are provided by dedicated layers, allowing you to opt-in for the layouts you need. Each layout has its own set of components, composables, configuration and dependencies.",{"type":14,"tag":20,"props":27,"children":28},{},[29,31,38],{"type":24,"value":30},"Layout layers reside in the ",{"type":14,"tag":32,"props":33,"children":35},"code",{"className":34},[],[36],{"type":24,"value":37},"layers/",{"type":24,"value":39}," directory of the Tairo repository. Here is a list of available layout layers:",{"type":14,"tag":41,"props":42,"children":43},"code-group",{},[44],{"type":14,"tag":45,"props":46,"children":52},"pre",{"className":47,"code":49,"filename":50,"language":51,"meta":8},[48],"language-bash","├── layers/\n│   ├── tairo-layout-sidebar/\n│   ├── tairo-layout-collapse/\n│   ├── tairo-layout-topnav/\n│   └── tairo-layout-iconnav/\n","Terminal","bash",[53],{"type":14,"tag":32,"props":54,"children":55},{"__ignoreMap":8},[56],{"type":24,"value":49},{"type":14,"tag":58,"props":59,"children":62},"code-timeline",{"className":60},[61],"mt-12",[63,231,276,337,386,418],{"type":14,"tag":64,"props":65,"children":67},"code-timeline-item",{":vertical":66,"vertical":8},"true",[68,206,212,223],{"type":14,"tag":69,"props":70,"children":72},"table",{"style":71},"--tw-prose-td-borders: rgb(var(--color-muted-200));",[73],{"type":14,"tag":74,"props":75,"children":76},"tbody",{},[77,116,143,175],{"type":14,"tag":78,"props":79,"children":80},"tr",{},[81,104],{"type":14,"tag":82,"props":83,"children":87},"td",{"className":84},[85,86],"align-top","w-1/3",[88,94,99],{"type":14,"tag":89,"props":90,"children":91},"strong",{},[92],{"type":24,"value":93},"tairo-layout-sidebar",{"type":14,"tag":20,"props":95,"children":96},{},[97],{"type":24,"value":98},"Default layout used on the demo app.",{"type":14,"tag":20,"props":100,"children":101},{},[102],{"type":24,"value":103},"+ pro:\nlarge number of navigation items",{"type":14,"tag":82,"props":105,"children":107},{"className":106},[85],[108],{"type":14,"tag":109,"props":110,"children":115},"doc-image",{"className":111,"src":113,"srcDark":114},[112],"not-prose","/img/apps/tairo-subsidebar.png","/img/apps/tairo-subsidebar-dark.png",[],{"type":14,"tag":78,"props":117,"children":118},{},[119,133],{"type":14,"tag":82,"props":120,"children":122},{"className":121},[85,86],[123,128],{"type":14,"tag":89,"props":124,"children":125},{},[126],{"type":24,"value":127},"tairo-layout-collapse",{"type":14,"tag":20,"props":129,"children":130},{},[131],{"type":24,"value":132},"+ pro:\nwell balanced navigation",{"type":14,"tag":82,"props":134,"children":136},{"className":135},[85],[137],{"type":14,"tag":109,"props":138,"children":142},{"className":139,"src":140,"srcDark":141},[112],"/img/apps/tairo-layout-collapse.png","/img/apps/tairo-layout-collapse-dark.png",[],{"type":14,"tag":78,"props":144,"children":145},{},[146,165],{"type":14,"tag":82,"props":147,"children":149},{"className":148},[85,86],[150,155,160],{"type":14,"tag":89,"props":151,"children":152},{},[153],{"type":24,"value":154},"tairo-layout-topnav",{"type":14,"tag":20,"props":156,"children":157},{},[158],{"type":24,"value":159},"+ pro:\nwide screen content",{"type":14,"tag":20,"props":161,"children":162},{},[163],{"type":24,"value":164},"- con:\nfew number of navigation items",{"type":14,"tag":82,"props":166,"children":168},{"className":167},[85],[169],{"type":14,"tag":109,"props":170,"children":174},{"className":171,"src":172,"srcDark":173},[112],"/img/apps/tairo-layout-topnav.png","/img/apps/tairo-layout-topnav-dark.png",[],{"type":14,"tag":78,"props":176,"children":177},{},[178,196],{"type":14,"tag":82,"props":179,"children":181},{"className":180},[85,86],[182,187,191],{"type":14,"tag":89,"props":183,"children":184},{},[185],{"type":24,"value":186},"tairo-layout-iconnav",{"type":14,"tag":20,"props":188,"children":189},{},[190],{"type":24,"value":159},{"type":14,"tag":20,"props":192,"children":193},{},[194],{"type":24,"value":195},"- con:\nlow number of navigation items",{"type":14,"tag":82,"props":197,"children":199},{"className":198},[85],[200],{"type":14,"tag":109,"props":201,"children":205},{"className":202,"src":203,"srcDark":204},[112],"/img/apps/tairo-layout-iconnav.png","/img/apps/tairo-layout-iconnav-dark.png",[],{"type":14,"tag":207,"props":208,"children":211},"doc-customizer-button",{"className":209},[210],"mb-24",[],{"type":14,"tag":213,"props":214,"children":215},"template",{"v-slot:title":8},[216],{"type":14,"tag":217,"props":218,"children":222},"tairo-toc-anchor",{":level":219,"label":220,"prefix":221},"3","Choose a layout"," ",[],{"type":14,"tag":213,"props":224,"children":225},{"v-slot:description":8},[226],{"type":14,"tag":20,"props":227,"children":228},{},[229],{"type":24,"value":230},"You can choose a layout that fits your project requirements. Each layout has its own navigation experience.",{"type":14,"tag":64,"props":232,"children":233},{":vertical":66,"vertical":8},[234,261,268],{"type":14,"tag":41,"props":235,"children":238},{"className":236},[237],"mb-12",[239,251],{"type":14,"tag":45,"props":240,"children":246},{"className":241,"code":243,"filename":244,"language":245,"meta":8},[242],"language-ts","export default defineNuxtConfig({\n  extends: [\n    // enable the sidebar layout layer\n    [\"gh:cssninjaStudio/tairo/layers/tairo-layout-sidebar#1.5.0\", {\n      install: true,\n      auth: import.meta.env.GITHUB_TOKEN,\n    }],\n\n    // required base layer\n    [\"gh:cssninjaStudio/tairo/layers/tairo#1.5.0\", {\n      install: true,\n      auth: import.meta.env.GITHUB_TOKEN,\n    }],\n  ]\n})\n","\u003Capp>/nuxt.config.ts (github layers)","ts",[247],{"type":14,"tag":32,"props":248,"children":249},{"__ignoreMap":8},[250],{"type":24,"value":243},{"type":14,"tag":45,"props":252,"children":256},{"className":253,"code":254,"filename":255,"language":245,"meta":8},[242],"export default defineNuxtConfig({\n  extends: [\n    // enable the sidebar layout layer\n    '../layers/tairo-layout-sidebar',\n    \n    // required base layer\n    '../layers/tairo',\n  ],\n})\n","\u003Capp>/nuxt.config.ts (source)",[257],{"type":14,"tag":32,"props":258,"children":259},{"__ignoreMap":8},[260],{"type":24,"value":254},{"type":14,"tag":213,"props":262,"children":263},{"v-slot:title":8},[264],{"type":14,"tag":217,"props":265,"children":267},{":level":219,"label":266,"prefix":221},"Add the layout to your project",[],{"type":14,"tag":213,"props":269,"children":270},{"v-slot:description":8},[271],{"type":14,"tag":20,"props":272,"children":273},{},[274],{"type":24,"value":275},"Depending if you are running from source or with github layers, you can add the layout to your project.\nNote that you can add as many as layout as you need.",{"type":14,"tag":64,"props":277,"children":278},{":vertical":66,"vertical":8},[279,294,322,329],{"type":14,"tag":41,"props":280,"children":281},{},[282],{"type":14,"tag":45,"props":283,"children":289},{"className":284,"code":286,"filename":287,"language":288,"meta":8},[285],"language-vue","\u003Ctemplate>\n  \u003CTairoSidebarLayout>\n    \u003Cslot />\n  \u003C/TairoSidebarLayout>\n\u003C/template>\n","\u003Capp>/layouts/default.vue","vue",[290],{"type":14,"tag":32,"props":291,"children":292},{"__ignoreMap":8},[293],{"type":24,"value":286},{"type":14,"tag":295,"props":296,"children":300},"doc-message",{"className":297,"color":298,"icon":299},[237],"muted-contrast","ph:info",[301],{"type":14,"tag":20,"props":302,"children":303},{},[304,306,312,314,320],{"type":24,"value":305},"You can create additional layouts in the ",{"type":14,"tag":32,"props":307,"children":309},{"className":308},[],[310],{"type":24,"value":311},"\u003Capp>/layouts/",{"type":24,"value":313}," directory. And use ",{"type":14,"tag":32,"props":315,"children":317},{"className":316},[],[318],{"type":24,"value":319},"definePageMeta",{"type":24,"value":321}," in your pages to assign a layout.",{"type":14,"tag":213,"props":323,"children":324},{"v-slot:title":8},[325],{"type":14,"tag":217,"props":326,"children":328},{":level":219,"label":327,"prefix":221},"Create the default layout",[],{"type":14,"tag":213,"props":330,"children":331},{"v-slot:description":8},[332],{"type":14,"tag":20,"props":333,"children":334},{},[335],{"type":24,"value":336},"By creating the default layout, every pages will use this layout unless specified otherwise.",{"type":14,"tag":64,"props":338,"children":339},{":vertical":66,"vertical":8},[340,353,371,378],{"type":14,"tag":41,"props":341,"children":342},{},[343],{"type":14,"tag":45,"props":344,"children":348},{"className":345,"code":346,"filename":347,"language":245,"meta":8},[242],"export default defineAppConfig({\n  tairo: {\n    title: 'داشبورد من',\n\n    sidebar: {\n      navigation: {\n        enabled: true,\n        startOpen: true,\n        logo: {\n          // sidebar logo configuration\n        },\n        items: [\n          // navigation items configuration\n        ],\n      },\n    },\n  },\n})\n","\u003Capp>/app.config.ts",[349],{"type":14,"tag":32,"props":350,"children":351},{"__ignoreMap":8},[352],{"type":24,"value":346},{"type":14,"tag":295,"props":354,"children":356},{"className":355,"color":298,"icon":299},[237],[357],{"type":14,"tag":20,"props":358,"children":359},{},[360,362,369],{"type":24,"value":361},"You may find that the configuration does not allows you to behave as you need (ex: show items for only logged users, translate items, etc...),\nread ",{"type":14,"tag":363,"props":364,"children":366},"a",{"href":365},"/documentation/guides/extending-tairo-components",[367],{"type":24,"value":368},"Extending Tairo Layers",{"type":24,"value":370}," guide to learn how to extend the layout.",{"type":14,"tag":213,"props":372,"children":373},{"v-slot:title":8},[374],{"type":14,"tag":217,"props":375,"children":377},{":level":219,"label":376,"prefix":221},"Configure the layout",[],{"type":14,"tag":213,"props":379,"children":380},{"v-slot:description":8},[381],{"type":14,"tag":20,"props":382,"children":383},{},[384],{"type":24,"value":385},"Each layers has its own configuration, you can find more information in the dedicated layout documentation.",{"type":14,"tag":64,"props":387,"children":388},{":vertical":66,"vertical":8},[389,403,410],{"type":14,"tag":41,"props":390,"children":392},{"className":391},[237],[393],{"type":14,"tag":45,"props":394,"children":398},{"className":395,"code":396,"filename":397,"language":288,"meta":8},[285],"\u003Cscript setup lang=\"ts\">\nconst app = useAppConfig()\n\n// global meta information can be added to the head\nuseHead({\n  titleTemplate: (titleChunk) => {\n    return titleChunk\n      ? `${titleChunk} - ${app.tairo?.title}`\n      : `${app.tairo?.title}`\n  },\n  htmlAttrs: {\n    lang: 'en',\n    dir: 'ltr',\n  },\n  link: [\n    {\n      rel: 'icon',\n      type: 'image/png',\n      href: '/img/favicon.png',\n    },\n  ],\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003CNuxtLayout>\n      \u003CNuxtLoadingIndicator color=\"rgb(var(--color-primary-500))\" />\n      \u003CNuxtPage />\n    \u003C/NuxtLayout>\n  \u003C/div>\n\u003C/template>\n","\u003Capp>/app.vue",[399],{"type":14,"tag":32,"props":400,"children":401},{"__ignoreMap":8},[402],{"type":24,"value":396},{"type":14,"tag":213,"props":404,"children":405},{"v-slot:title":8},[406],{"type":14,"tag":217,"props":407,"children":409},{":level":219,"label":408,"prefix":221},"Update the default app component",[],{"type":14,"tag":213,"props":411,"children":412},{"v-slot:description":8},[413],{"type":14,"tag":20,"props":414,"children":415},{},[416],{"type":24,"value":417},"Replace the welcome message with the layout component.",{"type":14,"tag":64,"props":419,"children":420},{":vertical":66,"vertical":8},[421,428],{"type":14,"tag":213,"props":422,"children":423},{"v-slot:title":8},[424],{"type":14,"tag":217,"props":425,"children":427},{":level":219,"label":426,"prefix":221},"Done!",[],{"type":14,"tag":213,"props":429,"children":430},{"v-slot:description":8},[431],{"type":14,"tag":20,"props":432,"children":433},{},[434,436,442],{"type":24,"value":435},"You have successfully added a layout to your project. You can now ",{"type":14,"tag":363,"props":437,"children":439},{"href":438},"/documentation/setup/first-page",[440],{"type":24,"value":441},"create your first page",{"type":24,"value":443},".",{"type":14,"tag":445,"props":446,"children":447},"hr",{},[],{"type":14,"tag":20,"props":449,"children":450},{},[451],{"type":24,"value":452},"Useful resources:",{"type":14,"tag":454,"props":455,"children":456},"ul",{},[457,469],{"type":14,"tag":458,"props":459,"children":460},"li",{},[461],{"type":14,"tag":363,"props":462,"children":466},{"href":463,"rel":464},"https://nuxt.com/docs/migration/pages-and-layouts",[465],"nofollow",[467],{"type":24,"value":468},"Read pages and layouts guide on nuxt.com",{"type":14,"tag":458,"props":470,"children":471},{},[472],{"type":14,"tag":363,"props":473,"children":476},{"href":474,"rel":475},"https://nuxt.com/docs/guide/directory-structure/layouts",[465],[477],{"type":24,"value":478},"Learn about layouts directory on nuxt.com",{"type":14,"tag":480,"props":481,"children":483},"doc-nav",{"next":438,"prev":482},"/documentation/setup/installation",[],{"title":8,"searchDepth":485,"depth":485,"links":486},2,[],"markdown","content:documentation:10.setup:4.add-a-layout.md","content","documentation/10.setup/4.add-a-layout.md","md",[493,499,506],{"_path":494,"_dir":8,"_draft":7,"_partial":7,"_locale":8,"title":495,"description":8,"toc":496,"_type":487,"_id":497,"_source":489,"_file":498,"_extension":491},"/documentation","مرکز مستندات",true,"content:documentation:1.index.md","documentation/1.index.md",{"_path":500,"_dir":6,"_draft":7,"_partial":496,"_locale":8,"title":501,"_id":502,"_type":503,"_source":489,"_file":504,"_extension":505},"/documentation/setup/_dir","Setup","content:documentation:10.setup:_dir.yml","yaml","documentation/10.setup/_dir.yml","yml",{"_path":507,"_dir":508,"_draft":7,"_partial":7,"_locale":8,"title":509,"description":8,"_type":487,"_id":510,"_source":489,"_file":511,"_extension":491},"/documentation/setup","documentation","Prerequisites","content:documentation:10.setup:1.index.md","documentation/10.setup/1.index.md",[513,515],{"_path":482,"title":514},"Installation",{"_path":438,"title":516},"Your first page",1779173522838]