Navbar Align

src/components/shared/navBar.vue

@@ -2,223 +2,233 @@
   <!-- eslint-disable max-len -->
   <nav class="navbar navbar-default navbar-trans navbar-expand-lg fixed-top">
     <div class="container-fluid">
-      <button
-        class="navbar-toggler collapsed"
-        type="button"
-        data-toggle="collapse"
-        data-target="#navbarDefault"
-        aria-controls="navbarDefault"
-        aria-expanded="false"
-        aria-label="Toggle navigation"
-      >
-        <span></span>
-        <span></span>
-        <span></span>
-      </button>
-      <a class="navbar-brand text-brand" @click="routerGoTo('/')">
-        <img
-          class="img-fluid"
-          src="/img/logos/UVProp.png"
-          alt="UVProp logo"
-          style="width:110px;height:60px;"
-        />
-        Uni-Vate
-        <span class="color-b">Properties</span>
-      </a>
-      <button
-        type="button"
-        class="btn btn-link nav-search navbar-toggle-box-collapse d-md-none"
-        data-toggle="collapse"
-        data-target="#navbarTogglerDemo01"
-        aria-expanded="false"
-      >
-        <span class="fa fa-search" aria-hidden="true"></span>
-      </button>
-      <div class="navbar-collapse collapse justify-content-center" id="navbarDefault">
-        <ul class="navbar-nav">
-          <!-- <li class="nav-item">
+      <div class="col-md-2">
+        <button
+          class="navbar-toggler collapsed"
+          type="button"
+          data-toggle="collapse"
+          data-target="#navbarDefault"
+          aria-controls="navbarDefault"
+          aria-expanded="false"
+          aria-label="Toggle navigation"
+        >
+          <span></span>
+          <span></span>
+          <span></span>
+        </button>
+        <a class="navbar-brand text-brand" @click="routerGoTo('/')">
+          <img
+            class="img-fluid"
+            src="/img/logos/UVProp.png"
+            alt="UVProp logo"
+            style="width:110px;height:60px;"
+          />
+          Uni-Vate
+          <span class="color-b">Properties</span>
+        </a>
+        <button
+          type="button"
+          class="btn btn-link nav-search navbar-toggle-box-collapse d-md-none"
+          data-toggle="collapse"
+          data-target="#navbarTogglerDemo01"
+          aria-expanded="false"
+        >
+          <span class="fa fa-search" aria-hidden="true"></span>
+        </button>
+      </div>
+
+      <div class="col-md-8">
+        <div class="navbar-collapse collapse justify-content-center" id="navbarDefault">
+          <ul class="navbar-nav">
+            <!-- <li class="nav-item">
             <a class="nav-link active" @click="routerGoTo('/')">Home</a>
-          </li>-->
-          <li class="nav-item dropdown">
-            <a
-              class="nav-link dropdown-toggle"
-              href="#"
-              id="navbarDropdown"
-              role="button"
-              data-toggle="dropdown"
-              aria-haspopup="true"
-              aria-expanded="false"
-            >Timeshare</a>
-            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/timeshare/buy')">To Buy</a>
-              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/timeshare/sell')">To Sell</a>
-              <a
-                class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/timeshare/sell')"
-              >My Timeshare Weeks</a>
-              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/timeshare/faq')">FAQ</a>
-            </div>
-          </li>
-          <li class="nav-item dropdown">
-            <a
-              class="nav-link dropdown-toggle"
-              href="#"
-              id="navbarDropdown"
-              role="button"
-              data-toggle="dropdown"
-              aria-haspopup="true"
-              aria-expanded="false"
-            >Properties</a>
-            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-              <a
-                class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/property/Commercial/Search')"
-              >
-                <u class="color-b">Search</u> Commercial Properties
-              </a>
+            </li>-->
+            <li class="nav-item dropdown">
               <a
-                class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/property/Commercial/Sale')"
-              >
-                <u class="color-b">To Sell</u> Commercial Properties
-              </a>
+                class="nav-link dropdown-toggle"
+                href="#"
+                id="navbarDropdown"
+                role="button"
+                data-toggle="dropdown"
+                aria-haspopup="true"
+                aria-expanded="false"
+              >Timeshare</a>
+              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+                <a class="dropdown-item cursor-pointer" @click="routerGoTo('/timeshare/buy')">To Buy</a>
+                <a
+                  class="dropdown-item cursor-pointer"
+                  @click="routerGoTo('/timeshare/sell')"
+                >To Sell</a>
+                <a
+                  class="dropdown-item cursor-pointer"
+                  @click="routerGoTo('/timeshare/sell')"
+                >My Timeshare Weeks</a>
+                <a class="dropdown-item cursor-pointer" @click="routerGoTo('/timeshare/faq')">FAQ</a>
+              </div>
+            </li>
+            <li class="nav-item dropdown">
               <a
-                class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/property/Commercial/Rental')"
-              >
-                <u class="color-b">To Rent</u> Commercial Properties
-              </a>
-              <hr />
+                class="nav-link dropdown-toggle"
+                href="#"
+                id="navbarDropdown"
+                role="button"
+                data-toggle="dropdown"
+                aria-haspopup="true"
+                aria-expanded="false"
+              >Properties</a>
+              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+                <a
+                  class="dropdown-item cursor-pointer"
+                  @click="routerGoTo('/property/Commercial/Search')"
+                >
+                  <u class="color-b">Search</u> Commercial Properties
+                </a>
+                <a
+                  class="dropdown-item cursor-pointer"
+                  @click="routerGoTo('/property/Commercial/Sale')"
+                >
+                  <u class="color-b">To Sell</u> Commercial Properties
+                </a>
+                <a
+                  class="dropdown-item cursor-pointer"
+                  @click="routerGoTo('/property/Commercial/Rental')"
+                >
+                  <u class="color-b">To Rent</u> Commercial Properties
+                </a>
+                <hr />
 
-              <a
-                class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/property/Residential/Search')"
-              >
-                <u class="color-b">Search</u> Residential Properties
-              </a>
-              <a
-                class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/property/Residential/Sale')"
-              >
-                <u class="color-b">To Sell</u> Residential Properties
-              </a>
-              <a
-                class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/property/Residential/Rental')"
-              >
-                <u class="color-b">To Rent</u> Residential Properties
-              </a>
-              <hr />
-              <a
-                class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/property/list/Commercial/MyListings')"
-              >
-                <u class="color-b">My</u> Commercial Properties
-              </a>
-              <a
-                class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/property/list/Residential/MyListings')"
-              >
-                <u class="color-b">My</u> Residential Properties
-              </a>
-            </div>
-          </li>
+                <a
+                  class="dropdown-item cursor-pointer"
+                  @click="routerGoTo('/property/Residential/Search')"
+                >
+                  <u class="color-b">Search</u> Residential Properties
+                </a>
+                <a
+                  class="dropdown-item cursor-pointer"
+                  @click="routerGoTo('/property/Residential/Sale')"
+                >
+                  <u class="color-b">To Sell</u> Residential Properties
+                </a>
+                <a
+                  class="dropdown-item cursor-pointer"
+                  @click="routerGoTo('/property/Residential/Rental')"
+                >
+                  <u class="color-b">To Rent</u> Residential Properties
+                </a>
+                <hr />
+                <a
+                  class="dropdown-item cursor-pointer"
+                  @click="routerGoTo('/property/list/Commercial/MyListings')"
+                >
+                  <u class="color-b">My</u> Commercial Properties
+                </a>
+                <a
+                  class="dropdown-item cursor-pointer"
+                  @click="routerGoTo('/property/list/Residential/MyListings')"
+                >
+                  <u class="color-b">My</u> Residential Properties
+                </a>
+              </div>
+            </li>
 
-          <!--  <li class="nav-item">
-            <a class="nav-link" @click="routerGoTo('/contactus')">Contact</a>
-          </li>-->
-          <li class="nav-item dropdown">
-            <a
-              class="nav-link dropdown-toggle"
-              href="#"
-              id="navbarDropdown"
-              role="button"
-              data-toggle="dropdown"
-              aria-haspopup="true"
-              aria-expanded="false"
-            >About</a>
-            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/about/us')">About Us</a>
+            <li class="nav-item dropdown">
               <a
-                class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/about/timeshare')"
-              >About Timeshare</a>
-            </div>
-          </li>
+                class="nav-link dropdown-toggle"
+                href="#"
+                id="navbarDropdown"
+                role="button"
+                data-toggle="dropdown"
+                aria-haspopup="true"
+                aria-expanded="false"
+              >About</a>
+              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+                <a class="dropdown-item cursor-pointer" @click="routerGoTo('/about/us')">About Us</a>
+                <a
+                  class="dropdown-item cursor-pointer"
+                  @click="routerGoTo('/about/timeshare')"
+                >About Timeshare</a>
+              </div>
+            </li>
 
-          <li class="nav-item dropdown">
-            <a
-              class="nav-link dropdown-toggle"
-              href="#"
-              id="navbarDropdown"
-              role="button"
-              data-toggle="dropdown"
-              aria-haspopup="true"
-              aria-expanded="false"
-            >Login</a>
-            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/user/login')">Login</a>
-              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/user/logout')">Logout</a>
-              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/user/register')">Register</a>
-              <a
-                class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/user/registeragency')"
-              >Agency</a>
-            </div>
-          </li>
-          <li class="nav-item dropdown">
-            <a
-              class="nav-link dropdown-toggle"
-              href="#"
-              id="navbarDropdown"
-              role="button"
-              data-toggle="dropdown"
-              aria-haspopup="true"
-              aria-expanded="false"
-            >Admin</a>
-            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/status/list')">Status</a>
-              <a
-                class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/status/timeshareAdmin')"
-              >Timeshare Week Admin</a>
-              <a
-                class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/status/tenderWeekAdmin')"
-              >Tender Week Management</a>
+            <li class="nav-item dropdown">
               <a
-                class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/unitConfiguration/list')"
-              >Unit Configuration</a>
+                class="nav-link dropdown-toggle"
+                href="#"
+                id="navbarDropdown"
+                role="button"
+                data-toggle="dropdown"
+                aria-haspopup="true"
+                aria-expanded="false"
+              >Login</a>
+              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+                <a class="dropdown-item cursor-pointer" @click="routerGoTo('/user/login')">Login</a>
+                <a class="dropdown-item cursor-pointer" @click="routerGoTo('/user/logout')">Logout</a>
+                <a
+                  class="dropdown-item cursor-pointer"
+                  @click="routerGoTo('/user/register')"
+                >Register</a>
+                <a
+                  class="dropdown-item cursor-pointer"
+                  @click="routerGoTo('/user/registeragency')"
+                >Agency</a>
+              </div>
+            </li>
+            <li class="nav-item dropdown">
               <a
-                class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/status/userManagementPage')"
-              >User Management & Access</a>
-              <a
-                class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/status/changeLogPage')"
-              >Changes Logs</a>
-              <a
-                class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/userDefinedGroups/list')"
-              >Property User Defined Groups</a>
-              <a
-                class="dropdown-item cursor-pointer"
-                @click="routerGoTo('/propertyTypes/list')"
-              >Property Types</a>
-            </div>
-          </li>
-        </ul>
+                class="nav-link dropdown-toggle"
+                href="#"
+                id="navbarDropdown"
+                role="button"
+                data-toggle="dropdown"
+                aria-haspopup="true"
+                aria-expanded="false"
+              >Admin</a>
+              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+                <a class="dropdown-item cursor-pointer" @click="routerGoTo('/status/list')">Status</a>
+                <a
+                  class="dropdown-item cursor-pointer"
+                  @click="routerGoTo('/status/timeshareAdmin')"
+                >Timeshare Week Admin</a>
+                <a
+                  class="dropdown-item cursor-pointer"
+                  @click="routerGoTo('/status/tenderWeekAdmin')"
+                >Tender Week Management</a>
+                <a
+                  class="dropdown-item cursor-pointer"
+                  @click="routerGoTo('/unitConfiguration/list')"
+                >Unit Configuration</a>
+                <a
+                  class="dropdown-item cursor-pointer"
+                  @click="routerGoTo('/status/userManagementPage')"
+                >User Management & Access</a>
+                <a
+                  class="dropdown-item cursor-pointer"
+                  @click="routerGoTo('/status/changeLogPage')"
+                >Changes Logs</a>
+                <a
+                  class="dropdown-item cursor-pointer"
+                  @click="routerGoTo('/userDefinedGroups/list')"
+                >Property User Defined Groups</a>
+                <a
+                  class="dropdown-item cursor-pointer"
+                  @click="routerGoTo('/propertyTypes/list')"
+                >Property Types</a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="col-md-2">
+        <button
+          type="button"
+          class="btn btn-b-n navbar-toggle-box-collapse d-none d-md-block"
+          data-toggle="collapse"
+          data-target="#navbarTogglerDemo01"
+          aria-expanded="false"
+        >
+          <span class="fa fa-search" aria-hidden="true"></span>
+        </button>
       </div>
-      <button
-        type="button"
-        class="btn btn-b-n navbar-toggle-box-collapse d-none d-md-block"
-        data-toggle="collapse"
-        data-target="#navbarTogglerDemo01"
-        aria-expanded="false"
-      >
-        <span class="fa fa-search" aria-hidden="true"></span>
-      </button>
     </div>
     <span v-if="showLogout">
       <a @click="logout()">Logout</a>