Wednesday, April 13, 2022

Dynamic Table Fixed table Header on scroll and Fixed table column on scroll ***** Complete Code **** PURE CSS


With CSS

<!DOCTYPE html>
<html>
<head>
    <style>
        .testing1, .testing {
            display: none;
        }

        .tbl-container {
            height:600px;
            width:700px;
            overflow:scroll;
        }
        .repeat-table {
            width:120%;
            border-spacing:0;
        }
            .repeat-table th {
                position: sticky;
                top: 0px;
                z-index: 1;
                background-color: lightpink;
            }
            .repeat-table th, .repeat-table td {
                border: 1px solid gray;
            }
                .repeat-table th, .repeat-table td {
                width: 160px;
            }
                .repeat-table th:nth-child(1), .repeat-table td:nth-child(1) {
                    position: sticky;
                    top: 0;
                    left:0;
                    background-color:pink;
                }
                    .repeat-table th:nth-child(1) {
                        position: sticky;
                        top: 0;
                        left: 0;
                        background-color: pink;
                        z-index:4;
                    }
    </style>
</head>
<body>
    <div class="tbl-container">
        <table class="repeat-table">
            <tr>
                <th>abcID</th>
                <th>abcID</th>
                <th>abcID</th>
                <th>abcID</th>
                <th>abcID</th>
                <th>abcID</th>
                <th>abcID</th>
                <th>abcID</th>
                <th>abcID</th>
                <th>abcID</th>
                <th>abcID abcID.</th>
                <th>abcIDTo</th>
                <th>abcIDCust.</th>
                <th>abcID</th>
                <th>345</th>
                <th>abcID</th>
                <th>abcID</th>
                <th colspan="3">Qty</th>
            </tr>
            <tr>
                <td>xyz</td>
                <td>xyz-xyz</td>
                <td>xyz</td>
                <td>xyz-xyz</td>
                <td>xyz</td>
                <td>xyz--xyz</td>
                <td>xyz</td>
                <td>xyz</td>
                <td>xyz</td>
                <td>xyz</td>
                <td>xyz-WX</td>
                <td>xyz</td>
                <td>xyz-WX</td>
                <td>xyz</td>
                <td>01/xyz</td>
                <td>xyz</td>
                <td>xyz</td>
                <td></td>
                <td>
                    
                </td>
                <td>
                    
                </td>
            </tr>
             <tr>
                <td>xyz</td>
                <td>xyz-xyz</td>
                <td>xyz</td>
                <td>xyz-xyz</td>
                <td>xyz</td>
                <td>xyz--xyz</td>
                <td>xyz</td>
                <td>xyz</td>
                <td>xyz</td>
                <td>xyz</td>
                <td>xyz-WX</td>
                <td>xyz</td>
                <td>xyz-WX</td>
                <td>xyz</td>
                <td>01/xyz</td>
                <td>xyz</td>
                <td>xyz</td>
                <td></td>
                <td>
                    
                </td>
                <td>
                    
                </td>
            </tr>
        </table>
    </div>
</body>
</html>


With JavaScript:

Dynamic Table / No limit of column/ Fixed table Header on scroll and Fixed table column on scroll ***** Complete Code ****

<!DOCTYPE html>

<html>

<head>

    <style>


        div.relative {

            position: relative;

            width: 600px;

            height: 250px;

            overflow-x: scroll;

            border: 1px solid #73AD21;

        }


        .ashTest {

            position: absolute;

            background-color: #d59b9b;

        }

        .scrollHead {

            position: absolute;

            background-color: #d59b9b;

        }

    </style>

</head>

<body>

    <div class="mainPar">

        <div class="relative" id="relative" onscroll="xyz()">

            <table class="scrollHead" id="scrollHeadF" style="z-index:1; background-color:brown">

                <tr>

                    <th >TYPE</th>

                </tr>

            </table>

            <table class="scrollHead" id="scrollHead">

                <tr>

                    <th style="width:90px">TYPE</th>

                    <th style="width:90px">AMC</th>

                    <th style="width:90px">AME</th>

                    <th style="width:90px">AMJ</th>

                    <th style="width:90px">AMK</th>

                    <th style="width:90px">AMNA</th>

                    <th style="width:90px">AMSEA</th>

                    <th style="width:90px">AMT</th>

                    <th style="width:90px">OTHERS</th>

                    <th style="width:90px">TYPE</th>

                    <th style="width:90px">AMC</th>

                    <th style="width:90px">AME</th>

                    <th style="width:90px">AMJ</th>

                    <th style="width:90px">AMK</th>

                    <th style="width:90px">AMNA</th>

                    <th style="width:90px">AMSEA</th>

                    <th style="width:90px">AMT</th>

                    <th style="width:90px">OTHERS</th>

                </tr>

            </table>

            <div class="ashTest" id="frozen">

                <table>

                    <tbody>

                        <tr>

                            <th>TYPE</th>

                        </tr>

                        <tr>

                            <th>AShw</th>

                        </tr>

                        <tr>

                            <th>AShw</th>

                        </tr>

                        <tr>

                            <th>AShw</th>

                        </tr>

                        <tr>

                            <th>AShw</th>

                        </tr>

                        <tr>

                            <th>AShw</th>

                        </tr>

                        <tr>

                            <th>AShw</th>

                        </tr>

                        <tr>

                            <th>AShw</th>

                        </tr>

                        <tr>

                            <th>AShw</th>

                        </tr>

                        <tr>

                            <th>AShw</th>

                        </tr>

                        <tr>

                            <th>AShw</th>

                        </tr>

                        <tr>

                            <th>AShw</th>

                        </tr>

                    </tbody>

                </table>

            </div>

            <table>

                <tbody>

                    <tr>

                        <th style="width:90px">TYPE</th>

                        <th style="width:90px">AMC</th>

                        <th style="width:90px">AME</th>

                        <th style="width:90px">AMJ</th>

                        <th style="width:90px">AMK</th>

                        <th style="width:90px">AMNA</th>

                        <th style="width:90px">AMSEA</th>

                        <th style="width:90px">AMT</th>

                        <th style="width:90px">OTHERS</th>

                        <th style="width:90px">TYPE</th>

                        <th style="width:90px">AMC</th>

                        <th style="width:90px">AME</th>

                        <th style="width:90px">AMJ</th>

                        <th style="width:90px">AMK</th>

                        <th style="width:90px">AMNA</th>

                        <th style="width:90px">AMSEA</th>

                        <th style="width:90px">AMT</th>

                        <th style="width:90px">OTHERS</th>

                    </tr>

                    <tr ng-repeat="x in LpRgStk" class="ng-scope">

                        <td>OH</td>

                        <td>4</td>

                        <td>0</td>

                        <td>0</td>

                        <td>4</td>

                        <td>0</td>

                        <td>0</td>

                        <td>5</td>

                        <td>0</td>

                        <td>OH</td>

                        <td>4</td>

                        <td>0</td>

                        <td>0</td>

                        <td>4</td>

                        <td>0</td>

                        <td>0</td>

                        <td>5</td>

                        <td>0</td>

                    </tr>

                    <tr>

                        <td>TYPE</td>

                        <td>AMC</td>

                        <td>AME</td>

                        <td>AMJ</td>

                        <td>AMK</td>

                        <td>AMNA</td>

                        <td>AMSEA</td>

                        <td>AMT</td>

                        <td>OtdERS</td>

                        <td>TYPE</td>

                        <td>AMC</td>

                        <td>AME</td>

                        <td>AMJ</td>

                        <td>AMK</td>

                        <td>AMNA</td>

                        <td>AMSEA</td>

                        <td>AMT</td>

                        <td>OtdERS</td>

                    </tr>

                    <tr ng-repeat="x in LpRgStk" class="ng-scope">

                        <td>OH</td>

                        <td>4</td>

                        <td>0</td>

                        <td>0</td>

                        <td>4</td>

                        <td>0</td>

                        <td>0</td>

                        <td>5</td>

                        <td>0</td>

                        <td>OH</td>

                        <td>4</td>

                        <td>0</td>

                        <td>0</td>

                        <td>4</td>

                        <td>0</td>

                        <td>0</td>

                        <td>5</td>

                        <td>0</td>

                    </tr>

                    <tr>

                        <td>TYPE</td>

                        <td>AMC</td>

                        <td>AME</td>

                        <td>AMJ</td>

                        <td>AMK</td>

                        <td>AMNA</td>

                        <td>AMSEA</td>

                        <td>AMT</td>

                        <td>OtdERS</td>

                        <td>TYPE</td>

                        <td>AMC</td>

                        <td>AME</td>

                        <td>AMJ</td>

                        <td>AMK</td>

                        <td>AMNA</td>

                        <td>AMSEA</td>

                        <td>AMT</td>

                        <td>OtdERS</td>

                    </tr>

                    <tr ng-repeat="x in LpRgStk" class="ng-scope">

                        <td>OH</td>

                        <td>4</td>

                        <td>0</td>

                        <td>0</td>

                        <td>4</td>

                        <td>0</td>

                        <td>0</td>

                        <td>5</td>

                        <td>0</td>

                        <td>OH</td>

                        <td>4</td>

                        <td>0</td>

                        <td>0</td>

                        <td>4</td>

                        <td>0</td>

                        <td>0</td>

                        <td>5</td>

                        <td>0</td>

                    </tr>

                    <tr>

                        <td>TYPE</td>

                        <td>AMC</td>

                        <td>AME</td>

                        <td>AMJ</td>

                        <td>AMK</td>

                        <td>AMNA</td>

                        <td>AMSEA</td>

                        <td>AMT</td>

                        <td>OTHERS</td>

                        <td>TYPE</td>

                        <td>AMC</td>

                        <td>AME</td>

                        <td>AMJ</td>

                        <td>AMK</td>

                        <td>AMNA</td>

                        <td>AMSEA</td>

                        <td>AMT</td>

                        <td>OTHERS</td>

                    </tr>

                    <tr ng-repeat="x in LpRgStk" class="ng-scope">

                        <td>OH</td>

                        <td>4</td>

                        <td>0</td>

                        <td>0</td>

                        <td>4</td>

                        <td>0</td>

                        <td>0</td>

                        <td>5</td>

                        <td>0</td>

                        <td>OH</td>

                        <td>4</td>

                        <td>0</td>

                        <td>0</td>

                        <td>4</td>

                        <td>0</td>

                        <td>0</td>

                        <td>5</td>

                        <td>0</td>

                    </tr>

                    <tr>

                        <td>TYPE</td>

                        <td>AMC</td>

                        <td>AME</td>

                        <td>AMJ</td>

                        <td>AMK</td>

                        <td>AMNA</td>

                        <td>AMSEA</td>

                        <td>AMT</td>

                        <td>OTHERS</td>

                        <td>TYPE</td>

                        <td>AMC</td>

                        <td>AME</td>

                        <td>AMJ</td>

                        <td>AMK</td>

                        <td>AMNA</td>

                        <td>AMSEA</td>

                        <td>AMT</td>

                        <td>OTHERS</td>

                    </tr>

                    <tr ng-repeat="x in LpRgStk" class="ng-scope">

                        <td>OH</td>

                        <td>4</td>

                        <td>0</td>

                        <td>0</td>

                        <td>4</td>

                        <td>0</td>

                        <td>0</td>

                        <td>5</td>

                        <td>0</td>

                        <td>OH</td>

                        <td>4</td>

                        <td>0</td>

                        <td>0</td>

                        <td>4</td>

                        <td>0</td>

                        <td>0</td>

                        <td>5</td>

                        <td>0</td>

                    </tr>

                    <tr>

                        <td>TYPE</td>

                        <td>AMC</td>

                        <td>AME</td>

                        <td>AMJ</td>

                        <td>AMK</td>

                        <td>AMNA</td>

                        <td>AMSEA</td>

                        <td>AMT</td>

                        <td>OTHERS</td>

                        <td>TYPE</td>

                        <td>AMC</td>

                        <td>AME</td>

                        <td>AMJ</td>

                        <td>AMK</td>

                        <td>AMNA</td>

                        <td>AMSEA</td>

                        <td>AMT</td>

                        <td>OTHERS</td>

                    </tr>

                    <tr ng-repeat="x in LpRgStk" class="ng-scope">

                        <td>OH</td>

                        <td>4</td>

                        <td>0</td>

                        <td>0</td>

                        <td>4</td>

                        <td>0</td>

                        <td>0</td>

                        <td>5</td>

                        <td>0</td>

                        <td>OH</td>

                        <td>4</td>

                        <td>0</td>

                        <td>0</td>

                        <td>4</td>

                        <td>0</td>

                        <td>0</td>

                        <td>5</td>

                        <td>0</td>

                    </tr>

                </tbody>

            </table>

        </div>

    </div>

    <script type="text/javascript">

        xyz = function () {

            let x = document.getElementById('relative').scrollLeft;

            document.getElementById('frozen').style.left = x + 'px';


            let y = document.getElementById('relative').scrollTop;

            document.getElementById('scrollHead').style.top = y + 'px';


            document.getElementById('scrollHeadF').style.left = x + 'px';

            document.getElementById('scrollHeadF').style.top = y + 'px';

        }

    </script>

</body>

</html>

Posted by at No comments:

Friday, April 1, 2022

Left Navigation on click on hamburger deeply 3 levels applied in vue js

 

CSS

/*********  navigation  **********/

.nav-class {
    width: 210px;
    margin-left: 0px;
    background: #1f4e77;
    transition: all 0.3s;
    padding: 46px 0 0 0;
    z-index: 1035;
    color: white;
    display: flex;
    flex-direction: column;
    position: fixed !important;
    top: 0;
    height: 100vh !important;
    margin: 0 !important;
    outline: 0;
    transform: translateX(0);
    font-size: 0.75rem;
    font-weight: 400;
}

    .nav-class ul li {
        padding: 6px 10px 6px 10px;
        background: #1f4e77;
    }

    .nav-class > ul {
        padding-left: 15px;
        background: #1f4e77;
    }

    .nav-class ul a {
        font-size: .75rem;
        font-weight: 400;
        padding: 6px 10px 6px 1px;
        border-bottom: 0;
        color: hsla(0,0%,100%,.8);
        position: relative;
        transition: all .3s ease-in-out;
        width: 100%;
    }


.navLvl1 {
    position: relative;
}

    .navLvl1:hover,
    .navLvl2li:hover,
    .navLvl2 li:hover,
    .navLvl3 li:hover,
    #sidebar ul.sidebarCollapse li a:hover {
        background-color: #4599c3 !important;
    }

.navLvl2 {
    border-left: 1px groove gray;
    border-bottom:1px solid gray;
    display: none;
    position: absolute;
    top: 0;
    margin-left: 185px;
    width: 200px;
    z-index: 1;
}

.navLvl3 {
    border-left: 1px groove gray;
    border-bottom:1px solid gray;
    display: none;
    position: absolute;
    top: 0;
    margin-left: 185px;
    width: 200px;
    z-index: 2;
}

.navLvl2 ul,
.navLvl2 ul {
    margin: 0;
    padding: 0;
}

.navLvl1:hover .navLvl2 {
    display: block;
}

.b-sidebar > .b-sidebar-body {
    overflow-y: initial !important;
}

.navLvl2 ul li,
.navLvl3 ul li {
    list-style-type: none;
}

    .navLvl2 ul li:hover,
    .navLvl3 ul li,
    .nav-class ul li {
        list-style-type: none;
    }

.navLvl2li {
    position: relative;
}

    .navLvl2li:hover .navLvl3 {
        display: block;
    }


HTML

<div
          class="nav-class"
          v-bind:style="[
            this.navShowHide ? { display: 'block' } : { display: 'none' },
          ]"
        >
          <!--  v-bind:style="[
            navShowHide
              ? { width: '230px', transition: 'all .3s ease-out' }
              : { width: '0px', transition: 'all .3s ease-out' },
          ]" -->
          <ul>
            <li class="navLvl1">
              <a>Test Parent </a>
              <b-icon
                class="navchild"
                icon="chevron-right"
                style="color: #fff"
              ></b-icon>
              <div class="navLvl2">
                <ul>
                  <li class="navLvl2li">
                    <a href="#" target="_blank">Test child 1 </a>
                    <b-icon
                      class="navchild"
                      icon="chevron-right"
                      style="color: #fff"
                    ></b-icon>
                    <div class="navLvl3">
                      <ul>
                        <li>
                          <a href="#" target="_blank">Test last 1-1</a>
                        </li>
                        <li>
                          <router-link to="leadindicate">Data Mgr</router-link>
                        </li>
                        <li>
                          <a href="#" target="_blank">Test last 1-2</a>
                        </li>
                        <li>
                          <a href="#" target="_blank">Test last 1-3</a>
                        </li>
                      </ul>
                    </div>
                  </li>
                  <li class="navLvl2li">
                    <a target="_blank">Test child 2</a>
                    <b-icon
                      class="navchild"
                      icon="chevron-right"
                      style="color: #fff"
                    ></b-icon>
                    <div class="navLvl3">
                      <ul>
                        <li>
                          <a href="#" target="_blank">Test last 2-1</a>
                        </li>
                        <li>
                          <a href="#" target="_blank">Test last 2-2</a>
                        </li>
                        <li>
                          <a href="#" target="_blank">Test last 2-3</a>
                        </li>
                      </ul>
                    </div>
                  </li>
                  <li class="navLvl2li">
                    <a target="_blank">Test child 3</a>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
Dynamic
<div class="row">
        <!--<b-sidebar
          id="sidebar-1"
          title="Sidebar"
         
          no-header
          shadow
        >
          <!- - Sidebar start - ->
          <nav id="sidebar" v-bind:style="[
            navShowHide
              ? { width: '210px', transition: 'all .3s ease-out' }
              : { width: '0px', transition: 'all .3s ease-out' },
          ]">
            <ul class="sidebarCollapse" id="sidebarLinks">
              <li
                id="jhas"
                v-show="getNavsAMs.length > 0"
                style="position: absolute"
              >
                <a
                  class="collapsed"
                  data-toggle="collapse"
                  data-target="#collapseAMs"
                  aria-expanded="false"
                >
                  <img src="./assets/images/create-jha1.svg" class="icon" alt />
                  Action Messages
                </a>
                <ul
                  class="collapse list-unstyled"
                  id="collapseAMs"
                  aria-labelledby="jhas"
                  data-parent="#sidebarLinks"
                >
                  <li v-for="nav in getNavsAMs" :key="nav.PageName">
                    <router-link
                      :to="{ path: nav.PageName }"
                      v-if="nav.IsNewTab != 'True'"
                      >{{ nav.PageTitle }}</router-link
                    >
                    <a :href="nav.PageName" target="_blank" v-else>{{
                      nav.PageTitle
                    }}</a>
                  </li>
                </ul>
              </li>
              <li id="jhasPlans" v-show="getNavsInvInv.length > 0">
                <a
                  class="collapsed"
                  data-toggle="collapse"
                  data-target="#collapseJhasPlans"
                  aria-expanded="false"
                >
                  <img src="./assets/images/create-jha1.svg" class="icon" alt />
                  Inventory Investment
                </a>
                <ul
                  class="collapse list-unstyled"
                  id="collapseJhasPlans"
                  aria-labelledby="jhasPlans"
                  data-parent="#sidebarLinks"
                >
                  <li v-for="nav in getNavsInvInv" :key="nav.PageName">
                    <router-link
                      :to="{ path: nav.PageName }"
                      v-if="nav.IsNewTab != 'True'"
                      >{{ nav.PageTitle }}</router-link
                    >
                    <a :href="nav.PageName" target="_blank" v-else>{{
                      nav.PageTitle
                    }}</a>
                  </li>
                </ul>
              </li>
              <li id="navDE" v-show="getNavsDataEntry.length > 0">
                <a
                  class="collapsed"
                  data-toggle="collapse"
                  data-target="#collapseNavDE"
                  aria-expanded="false"
                >
                  <img src="./assets/images/create-jha1.svg" class="icon" alt />
                  Data Entry
                </a>
                <ul
                  class="collapse list-unstyled"
                  id="collapseNavDE"
                  aria-labelledby="navDE"
                  data-parent="#sidebarLinks"
                >
                  <li v-for="nav in getNavsDataEntry" :key="nav.PageName">
                    <router-link
                      :to="{ path: nav.PageName }"
                      v-if="nav.IsNewTab != 'True'"
                      >{{ nav.PageTitle }}</router-link
                    >
                    <a :href="nav.PageName" target="_blank" v-else>{{
                      nav.PageTitle
                    }}</a>
                  </li>
                </ul>
              </li>
              <li id="navEODta" v-show="getNavsEOData.length > 0">
                <a
                  class="collapsed"
                  data-toggle="collapse"
                  data-target="#collapseNavEODta"
                  aria-expanded="false"
                >
                  <img src="./assets/images/create-jha1.svg" class="icon" alt />
                  EO Data Input
                </a>
                <ul
                  class="collapse list-unstyled"
                  id="collapseNavEODta"
                  aria-labelledby="navEODta"
                  data-parent="#sidebarLinks"
                >
                  <li v-for="nav in getNavsEOData" :key="nav.PageName">
                    <router-link
                      :to="{ path: nav.PageName }"
                      v-if="nav.IsNewTab != 'True'"
                      >{{ nav.PageTitle }}</router-link
                    >
                    <a :href="nav.PageName" target="_blank" v-else>{{
                      nav.PageTitle
                    }}</a>
                  </li>
                </ul>
              </li>
              <li id="navMatCmnt" v-show="getNavsMatCmnt.length > 0">
                <a
                  class="collapsed"
                  data-toggle="collapse"
                  data-target="#collapseNavMatCmnt"
                  aria-expanded="false"
                >
                  <img src="./assets/images/create-jha1.svg" class="icon" alt />
                  Material Comments
                </a>
                <ul
                  class="collapse list-unstyled"
                  id="collapseNavMatCmnt"
                  aria-labelledby="navMatCmnt"
                  data-parent="#sidebarLinks"
                >
                  <li v-for="nav in getNavsMatCmnt" :key="nav.PageName">
                    <router-link
                      :to="{ path: nav.PageName }"
                      v-if="nav.IsNewTab != 'True'"
                      >{{ nav.PageTitle }}</router-link
                    >
                    <a :href="nav.PageName" target="_blank" v-else>{{
                      nav.PageTitle
                    }}</a>
                  </li>
                </ul>
              </li>
              <li id="navECOWB" v-show="getNavsECOWB.length > 0">
                <a
                  class="collapsed"
                  data-toggle="collapse"
                  data-target="#collapseNavECOWB"
                  aria-expanded="false"
                >
                  <img src="./assets/images/create-jha1.svg" class="icon" alt />
                  ECO Workbench
                </a>
                <ul
                  class="collapse list-unstyled"
                  id="collapseNavECOWB"
                  aria-labelledby="navECOWB"
                  data-parent="#sidebarLinks"
                >
                  <li v-for="nav in getNavsECOWB" :key="nav.PageName">
                    <router-link
                      :to="{ path: nav.PageName }"
                      v-if="nav.IsNewTab != 'True'"
                      >{{ nav.PageTitle }}</router-link
                    >
                    <a :href="nav.PageName" target="_blank" v-else>{{
                      nav.PageTitle
                    }}</a>
                  </li>
                </ul>
              </li>
              <li id="navTKM2" v-show="getNavsTkm2.length > 0">
                <a
                  class="collapsed"
                  data-toggle="collapse"
                  data-target="#collapseNavTKM2"
                  aria-expanded="false"
                >
                  <img src="./assets/images/create-jha1.svg" class="icon" alt />
                  TKM 2.0
                </a>
                <ul
                  class="collapse list-unstyled"
                  id="collapseNavTKM2"
                  aria-labelledby="navTKM2"
                  data-parent="#sidebarLinks"
                >
                  <li v-for="nav in getNavsTkm2" :key="nav.PageName">
                    <router-link
                      :to="{ path: nav.PageName }"
                      v-if="nav.IsNewTab != 'True'"
                      >{{ nav.PageTitle }}</router-link
                    >
                    <a :href="nav.PageName" target="_blank" v-else>{{
                      nav.PageTitle
                    }}</a>
                  </li>
                </ul>
              </li>
              <li id="navPAT" v-show="getNavsPatConfig.length > 0">
                <a
                  class="collapsed"
                  data-toggle="collapse"
                  data-target="#collapseNavPAT"
                  aria-expanded="false"
                >
                  <img src="./assets/images/create-jha1.svg" class="icon" alt />
                  Predictive Analytics Tool
                </a>
                <ul
                  class="collapse list-unstyled"
                  id="collapseNavPAT"
                  aria-labelledby="navPAT"
                  data-parent="#sidebarLinks"
                >
                  <li v-for="nav in getNavsPatConfig" :key="nav.PageName">
                    <router-link
                      :to="{ path: nav.PageName }"
                      v-if="nav.IsNewTab != 'True'"
                      >{{ nav.PageTitle }}</router-link
                    >
                    <a :href="nav.PageName" target="_blank" v-else>{{
                      nav.PageTitle
                    }}</a>
                  </li>
                </ul>
              </li>
              <li id="nav3" v-show="getNavsDmdMgmt.length > 0">
                <a
                  class="collapsed"
                  data-toggle="collapse"
                  data-target="#collapseNav4"
                  aria-expanded="false"
                >
                  <img src="./assets/images/create-jha1.svg" class="icon" alt />
                  Demand Management
                </a>
                <ul
                  class="collapse list-unstyled"
                  id="collapseNav4"
                  aria-labelledby="nav4"
                  data-parent="#sidebarLinks"
                >
                  <li v-for="nav in getNavsDmdMgmt" :key="nav.PageName">
                    <router-link
                      :to="{ path: nav.PageName }"
                      v-if="nav.IsNewTab != 'True'"
                      >{{ nav.PageTitle }}</router-link
                    >
                    <a :href="nav.PageName" target="_blank" v-else>{{
                      nav.PageTitle
                    }}</a>
                  </li>
                </ul>
              </li>
              <li
                id="adminstration"
                v-show="getNavsAdmin.length > 0"
                class="navLvl1"
              >
                <a
                  class="collapsed"
                  data-toggle="collapse"
                  data-target="#collapseIiConf"
                  aria-expanded="false"
                >
                  <img
                    src="./assets/images/settings.svg"
                    class="icon"
                    alt
                  />Admin
                </a>
                <ul
                  class="collapse list-unstyled"
                  id="collapseIiConf"
                  aria-labelledby="gisHelp"
                  data-parent="#sidebarLinks"
                >
                  <li v-for="nav in getNavsAdmin" :key="nav.PageName">
                    <router-link
                      :to="{ path: nav.PageName }"
                      v-if="nav.IsNewTab != 'True'"
                      >{{ nav.PageTitle }}</router-link
                    >
                    <a :href="nav.PageName" target="_blank" v-else>{{
                      nav.PageTitle
                    }}</a>
                  </li>
                </ul>
                <div class="navLvl2">
                  <ul>
                    <li
                      v-for="(nav, index) in getNavsAdmin"
                      :key="nav.PageName"
                      class="navLvl2li"
                    >
                      <router-link
                        :to="{ path: nav.PageName }"
                        v-if="nav.IsNewTab != 'True'"
                        >{{ nav.PageTitle }}</router-link
                      >
                      <a :href="nav.PageName" target="_blank" v-else>{{
                        nav.PageTitle
                      }}</a>
                      <div class="navLvl3">
                        <ul>
                          <li>
                            <a href="#">{{ nav.PageTitle + ":" + index }}</a>
                          </li>
                        </ul>
                      </div>
                    </li>
                  </ul>
                </div>
              </li>
              <li class="navLvl1">
                <a
                  class="collapsed"
                  data-toggle="collapse"
                  data-target="#collapseIiConf"
                  aria-expanded="false"
                >
                  <img
                    src="./assets/images/settings.svg"
                    class="icon"
                    alt
                  />Test Parent
                </a>
                <div class="navLvl2">
                  <ul>
                    <li class="navLvl2li">
                      <a href="#" target="_blank"
                        >Test child 1
                        <img
                          class="navchild"
                          src="./assets/images/arrow-right.svg"
                        />
                      </a>
                      <div class="navLvl3">
                        <ul>
                          <li>
                            <a href="#" target="_blank">Test last 1-1</a>
                          </li>
                          <li>
                            <router-link to="leadindicate"
                              >Data Mgr</router-link
                            >
                          </li>
                          <li>
                            <a href="#" target="_blank">Test last 1-2</a>
                          </li>
                          <li>
                            <a href="#" target="_blank">Test last 1-3</a>
                          </li>
                        </ul>
                      </div>
                    </li>
                    <li class="navLvl2li">
                      <a href="#" target="_blank">Test child 2</a>
                      <div class="navLvl3">
                        <ul>
                          <li>
                            <a href="#" target="_blank">Test last 2-1</a>
                          </li>
                          <li>
                            <a href="#" target="_blank">Test last 2-2</a>
                          </li>
                          <li>
                            <a href="#" target="_blank">Test last 2-3</a>
                          </li>
                        </ul>
                      </div>
                    </li>
                  </ul>
                </div>
              </li>
              <li id="help">
                <router-link to="/jira">
                  <img
                    src="./assets/images/question.svg"
                    class="icon"
                    alt
                  />Help</router-link
                >
              </li>
            </ul>
          </nav>
          <!- - Sidebar end - ->
        </b-sidebar>-->
        <div
          class="nav-class"
          v-bind:style="[
            this.navShowHide ? { display: 'block' } : { display: 'none' },
          ]"
        >
          <!--  v-bind:style="[
            navShowHide
              ? { width: '230px', transition: 'all .3s ease-out' }
              : { width: '0px', transition: 'all .3s ease-out' },
          ]" -->
          <ul>
            <li v-for="nav in navLevel1List" :key="nav.ID" class="navLvl1">
              <router-link
                :to="{ path: nav.PageName }"
                v-if="nav.IsNewTab != 'True'"
                >{{ nav.PageTitle }}</router-link
              >
              <a :href="nav.PageName" target="_blank" v-else>{{
                nav.PageTitle
              }}</a>
              <b-icon
                class="navchild"
                icon="chevron-right"
                style="color: #fff"
                v-if="navLevel2List(nav.ID).length > 0"
              ></b-icon>
              <div class="navLvl2" v-if="navLevel2List(nav.ID).length > 0">
                <ul>
                  <li
                    v-for="navL2 in navLevel2List(nav.ID)"
                    :key="navL2.ID"
                    class="navLvl2li"
                  >
                    <router-link
                      :to="{ path: navL2.PageName }"
                      v-if="navL2.IsNewTab != 'True'"
                      >{{ navL2.PageTitle }}</router-link
                    >
                    <a :href="navL2.PageName" target="_blank" v-else>{{
                      navL2.PageTitle
                    }}</a>
                    <b-icon
                      class="navchild"
                      icon="chevron-right"
                      style="color: #fff"
                      v-if="navLevel2List(navL2.ID).length > 0"
                    >
                    </b-icon>
                    <div
                      class="navLvl3"
                      v-if="navLevel2List(navL2.ID).length > 0"
                    >
                      <ul>
                        <li
                          v-for="navL3 in navLevel2List(navL2.ID)"
                          :key="navL3.ID"
                        >
                          <router-link
                            :to="{ path: navL3.PageName }"
                            v-if="navL3.IsNewTab != 'True'"
                            >{{ navL3.PageTitle }}</router-link
                          >
                          <a :href="navL3.PageName" target="_blank" v-else>{{
                            navL3.PageTitle
                          }}</a>
                        </li>
                      </ul>
                    </div>
                  </li>
                </ul>
              </div>
            </li>
Posted by at No comments:
Subscribe to: Posts (Atom)