- var page_Title = 'Internationalization';
- var theme_customizer      = true;
- var internationalization  = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var scrollbar             = true;
doctype html
html(lang='en')
  include ../../components/header-files
  body
    include ../../components/loader
    include ../../components/taptop
    // page-wrapper Start
    #pageWrapper.page-wrapper.compact-wrapper
      include ../../components/header
      // Page Body Start
      .page-body-wrapper
        include ../../components/sidebar
        .page-body
          .container.w-full
            .page-title
              .grid.grid-cols-12.mx-2.items-center
                div(class="col-span-6 sm:col-span-12")
                  h3
                    | Internationalization
                div(class="col-span-6 sm:col-span-12")
                  ol.breadcrumb.flex
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item Pages
                    li.breadcrumb-item.active Internationalization
          // Container-fluid starts
          .container
            .grid.grid-cols-12.gap-3
              div(class="col-span-12")
                .site
                  .site-bd
                    .wrapper
                      .card
                        .card-header.language-header
                          h5 Internationalization
                          .main(role='main')
                            select.langChoice.js-languageSelect
                              option English
                              option German
                              option Russian
                              option Arabic
                        .card-body.grid.grid-cols-12.card-gap
                          div(class="col-span-6 sm:col-span-12")
                            h5.hdg.hdg_main.js-languagePageHdg.pb-2 Static Sub Nav
                            .masthead(role='banner')
                              ul.icon-lists.custom-border.navs-icon.hList.hList_loose.masthead-nav.js-languageList
                                li
                                  a(href='#')
                                    span  Base
                                li
                                  a(href='#')
                                    span  Advance
                                  ul.hList.hList_loose.masthead-nav.js-languageList
                                    li.ps-4
                                      a(href='#')
                                        span Scrollable
                                    li.ps-4
                                      a(href='#')
                                        span Tree View
                                    li.ps-4
                                      a(href='#')
                                        span Rating
                                li
                                  a(href='#')
                                    span(data-mlr-text='')  Forms
                                li
                                  a(href='#')
                                    span(data-mlr-text='')  Tables
                          div(class="col-span-6 sm:col-span-12 language-xs")
                            h5.hdg.hdg_main.js-languagePageHdg.pb-2 Static Sub Nav
                            .masthead(role='banner')
                              ul.icon-lists.custom-border.navs-icon.hList.hList_loose.masthead-nav.js-languageList
                                li
                                  a(href='#')
                                    span  Base
                                li
                                  a(href='#')
                                    span  Advance
                                  ul.hList.hList_loose.masthead-nav.js-languageList
                                    li.ps-4
                                      a(href='#')
                                        span Scrollable
                                      span.float-end.badge.badge-primary.text-white New
                                    li.ps-4
                                      a(href='#')
                                        span Tree View
                                      span.float-end.badge.badge-primary.text-white Find
                                    li.ps-4
                                      a(href='#')
                                        span Rating
                                li
                                  a(href='#')
                                    span(data-mlr-text='')  Forms
                                li
                                  a(href='#')
                                    span(data-mlr-text='')  Tables
              div(class="col-span-12")
                .card
                  .card-header
                    h5 How to use it
                    p.f-m-light.mt-1
                      | Add a class 
                      code .hdg, .hdg_main, .js-languagePageHdg, .hList, .hList_loose, .masthead-nav., js-languageList, .langChoice, .js-languageSelect
                      |  class to any tag for language translate.
                  .card-body
                    .language
                      p(class="mb-[16px]") Add a  
                        b language-picker 
                        | plugin js
                      p 
                        b HTML Code
                      pre.mb-0.overflow-auto.custom-scrollbar  &lt;div class="site"&gt;<br />  &lt;div class="site-bd"&gt;<br />    &lt;div class="wrapper"&gt;<br />      &lt;div class="card"&gt;<br />        &lt;div class="card-header"&gt;<br />          &lt;h5 class="hdg hdg_main js-languagePageHdg"&gt;Internationalization&lt;/h5&gt;<br />        &lt;/div&gt;<br />        &lt;div class="main" role="main"&gt;<br />          &lt;select class="langChoice js-languageSelect"&gt;<br />            &lt;option val="0"&gt;English&lt;/option&gt;<br />            &lt;option val="1"&gt;German&lt;/option&gt;<br />            &lt;option val="2"&gt;Russian&lt;/option&gt;<br />            &lt;option val="3"&gt;Arabic&lt;/option&gt;<br />          &lt;/select&gt;<br />        &lt;/div&gt;<br />        &lt;div class="card-body grid grid-cols-12"&gt;<br />          &lt;div class="col-lg-6"&gt;<br />            &lt;h5 class="hdg hdg_main js-languagePageHdg"&gt;Static Sub Nav&lt;/h5&gt;<br />            &lt;div class="masthead" role="banner"&gt;<br />              &lt;ul class="icon-lists border navs-icon hList hList_loose masthead-nav js-languageList"&gt;<br />                &lt;li&gt;<br />                  &lt;a href="#"&gt;&lt;span&gt; Base&lt;/span&gt;&lt;/a&gt;<br />                &lt;/li&gt;<br />                &lt;li&gt;<br />                  &lt;a href="#"&gt;&lt;span&gt; Advance&lt;/span&gt;&lt;/a&gt;<br />                  &lt;ul class="hList hList_loose masthead-nav js-languageList"&gt;<br />                    &lt;li class="ps-4"&gt;&lt;a href="#"&gt;&lt;span&gt;Scrollable&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;<br />                    &lt;li class="ps-4"&gt;&lt;a href="#"&gt;&lt;span&gt;Tree View&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;<br />                    &lt;li class="ps-4"&gt;&lt;a href="#"&gt;&lt;span&gt;Rating&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;<br />                  &lt;/ul&gt;<br />                &lt;/li&gt;<br />                &lt;li&gt;<br />                  &lt;a href="#"&gt;&lt;span data-mlr-text&gt; Forms&lt;/span&gt;&lt;/a&gt;<br />                &lt;/li&gt;<br />                &lt;li&gt;<br />                  &lt;a href="#"&gt;&lt;span data-mlr-text&gt; Tables&lt;/span&gt;&lt;/a&gt;<br />                &lt;/li&gt;<br />              &lt;/ul&gt;<br />            &lt;/div&gt;<br />          &lt;/div&gt;<br />        &lt;/div&gt;<br />      &lt;/div&gt;<br />    &lt;/div&gt;<br />  &lt;/div&gt;<br /> &lt;/div&gt;
              div(class="col-span-12")
                .card
                  .card-header
                    h5 How to add language
                    p.f-m-light.mt-1
                      | You can also add other language according to below in js and add language type in langChoice.
                  .card-body
                    pre.language.px-4.overflow-auto.custom-scrollbar
                      span.font-danger var 
                      | LANGUAGES = {
                      br
                      | "English": {
                      br
                      | "columns": [
                      br
                      | "Base",
                      br
                      | "Advance",
                      br
                      | "scrollable",
                      br
                      | "Tree View",
                      br
                      | "Rating",
                      br
                      | "News",
                      br
                      | "Tables",
                      br
                      | "Base",
                      br
                      | "Advance",
                      br
                      | "scrollable",
                      br
                      | "Tree View",
                      br
                      | "Rating",
                      br
                      | "News",
                      br
                      | "Tables"
                      br
                      | ],
                      br
                      | "heading": "Static Sub Nav",
                      br
                      | },
                      br
                      | "German": {
                      br
                      | "columns": [
                      br
                      | "Basis",
                      br
                      | "Fortschritt",
                      br
                      | "scrollable",
                      br
                      | "Baumansicht",
                      br
                      | "Die Einschaltquote",
                      br
                      | "Nachrichten",
                      br
                      | "Tische",
                      br
                      | "Basis",
                      br
                      | "Fortschritt",
                      br
                      | "scrollable",
                      br
                      | "Baumansicht",
                      br
                      | "Die Einschaltquote",
                      br
                      | "Nachrichten",
                      br
                      | "Tische"
                      br
                      | ],
                      br
                      | "heading": "Statisches U-Boot Nav",
                      br
                      | },
                      br
                      | "Russian": {
                      br
                      | "columns": [
                      br
                      | "Основа",
                      br
                      | "Прогресс",
                      br
                      | "прокручиваемый",
                      br
                      | "Представление Дерева",
                      br
                      | "Оценка",
                      br
                      | "новости",
                      br
                      | "Столы",
                      br
                      | "Основа",
                      br
                      | "Прогресс",
                      br
                      | "прокручиваемый",
                      br
                      | "Представление Дерева",
                      br
                      | "Оценка",
                      br
                      | "новости",
                      br
                      | "Столы"
                      br
                      | ],
                      br
                      | "heading": "Статический Sub Военно - морской",
                      br
                      | },
                      br
                      | "Arabic": {
                      br
                      | "columns": [
                      br
                      | "قاعدة",
                      br
                      | "مقدما",
                      br
                      | "التمرير",
                      br
                      | "عرض الشجرة",
                      br
                      | "تصنيف",
                      br
                      | "أخبار",
                      br
                      | "الجداول",
                      br
                      | "قاعدة",
                      br
                      | "مقدما",
                      br
                      | "التمرير",
                      br
                      | "عرض الشجرة",
                      br
                      | "تصنيف",
                      br
                      | "أخبار",
                      br
                      | "الجداول"
                      br
                      | ],
                      br
                      | "heading": "صافي قيمة الأصول شبه الثابتة",
                      br
                      | }
                      br
                      | };
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
