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>

VUE JS drag modal popup

   VUE JS drag modal popup

Reference: https://dev.to/mandrewcito/vue-js-draggable-div-3mee

<template>

  <div ref="draggableContainer" id="draggable-container">

    <div id="draggable-header" @mousedown="dragMouseDown">

      <slot name="header"></slot>

    </div>

    <slot name="main"></slot>

    <slot name="footer"></slot>

  </div>

</template>

<script>

export default {

  name: 'DraggableDiv',

  data: function () {

    return {

      positions: {

        clientX: undefined,

        clientY: undefined,

        movementX: 0,

        movementY: 0

      }

    }

  },

  methods: {

    dragMouseDown: function (event) {

      event.preventDefault()

      // get the mouse cursor position at startup:

      this.positions.clientX = event.clientX

      this.positions.clientY = event.clientY

      document.onmousemove = this.elementDrag

      document.onmouseup = this.closeDragElement

    },

    elementDrag: function (event) {

      event.preventDefault()

      this.positions.movementX = this.positions.clientX - event.clientX

      this.positions.movementY = this.positions.clientY - event.clientY

      this.positions.clientX = event.clientX

      this.positions.clientY = event.clientY

      // set the element's new position:

      this.$refs.draggableContainer.style.top = (this.$refs.draggableContainer.offsetTop - this.positions.movementY) + 'px'

      this.$refs.draggableContainer.style.left = (this.$refs.draggableContainer.offsetLeft - this.positions.movementX) + 'px'

    },

    closeDragElement () {

      document.onmouseup = null

      document.onmousemove = null

    }

  }

}

</script>

<style>

#draggable-container {

  position: absolute;

  z-index: 9;

}

#draggable-header {

  z-index: 10;

}

</style>

====== utilized in main page ==========

<!-- Start:popup code below -->

      <div v-show="msgDialog2" class="web_dialog_overlay"></div>

      <DraggableDiv v-show="msgDialog2" class="draggable">

    <template slot="header">

      <div class="col-lg-12 popupTitle">

          <div class="row">

            <div

              class="col-lg-11"

              @mousedown="dragMouseDown"

            >

              {{ mdlDialogTitle2 }}

            </div>

            <div class="col-lg-1 text-right">

              <a

                id="closeApproveX"

                v-on:click="showHideMessage2"

                style="cursor: pointer"

                >&#10006;</a

              >

            </div>

          </div>

        </div>

    </template>

    <template slot="main" >

This is main datat

</template>  

</DraggableDiv>

<template>
  <DraggableDiv class="col-11">
    <template slot="header">
      [[[ SOME CONTENT HERE]]]
    </template>
    <template slot="main" >
      [[[ SOME CONTENT HERE]]]
    </template>
    <template slot="footer">
      [[[ SOME CONTENT HERE]]]
    </template>
  </DraggableDiv>
</template>

<script>
import DraggableDiv from './DraggableDiv'
export default {
  components: {
    DraggableDiv
  }
}
</script>

CHECK USER IN ACTIVE DIRRECTORY GROUP C#

 CHECK USER IN ACTIVE DIRRECTORY GROUP C#

public static bool EnsureUserInADGroup(string groupName, string userName)

        {

            bool retValue = false;

            try

            {

                userName = userName.Replace(Constants.AMAT + "\\", "");

 

                PrincipalContext ctx = new PrincipalContext(ContextType.Domain, Constants.AMAT);

                UserPrincipal user = UserPrincipal.FindByIdentity(ctx, userName);

                GroupPrincipal grp = GroupPrincipal.FindByIdentity(ctx, groupName);

                if (user != null && grp != null)

                    retValue = grp.GetMembers(true).Contains(user);

                grp.Dispose();

            }

            catch (Exception e1)

            { retValue = false; }

            return retValue;

        }

        public static UserPrincipal GetUserDetailsPrincipal(string userName)
        {
            using (var context = new PrincipalContext(ContextType.Domain))
            {
                var usr = UserPrincipal.FindByIdentity(context, userName);
                return usr;
            }
        }

in helper.cs

where you want emp id

UserPrincipal userPrincipal = Helper.GetUserDetailsPrincipal(User.Identity.Name);

userPrincipal.EmployeeId