From 4a023cd2913171fc4914f46048854301b0883277 Mon Sep 17 00:00:00 2001
From: lazyseal <49525095+lazyseal@users.noreply.github.com>
Date: Mon, 22 May 2023 19:40:54 +0100
Subject: [PATCH 1/2] Update NavbarDefault.vue

---
 src/examples/navbars/NavbarDefault.vue | 382 -------------------------
 1 file changed, 382 deletions(-)

diff --git a/src/examples/navbars/NavbarDefault.vue b/src/examples/navbars/NavbarDefault.vue
index 38403b5..8b13789 100644
--- a/src/examples/navbars/NavbarDefault.vue
+++ b/src/examples/navbars/NavbarDefault.vue
@@ -1,383 +1 @@
-<script setup>
-import { RouterLink } from "vue-router";
-import { ref, watch, computed } from "vue";
-import { useWindowsWidth } from "../../assets/js/useWindowsWidth";
 
-// images
-import ArrDark from "@/assets/img/down-arrow-dark.svg";
-
-import DownArrWhite from "@/assets/img/down-arrow-white.svg";
-
-const isAuthenticated = computed(() => !!sessionStorage.getItem('access_token')); // Computed property to check if the user is authenticated
-
-const props = defineProps({
-  action: {
-    type: Object,
-    route: String,
-    color: String,
-    label: String,
-    default: () => ({
-      route: "/pages/landing-pages/basic",
-      color: "bg-gradient-success",
-      label: "Вход / Регистрация"
-    })
-  },
-  transparent: {
-    type: Boolean,
-    default: false
-  },
-  light: {
-    type: Boolean,
-    default: false
-  },
-  dark: {
-    type: Boolean,
-    default: false
-  },
-  sticky: {
-    type: Boolean,
-    default: false
-  },
-  darkText: {
-    type: Boolean,
-    default: false
-  }
-});
-
-// set arrow  color
-function getArrowColor() {
-  if (props.transparent && textDark.value) {
-    return ArrDark;
-  } else if (props.transparent) {
-    return DownArrWhite;
-  } else {
-    return ArrDark;
-  }
-}
-
-// set text color
-const getTextColor = () => {
-  let color;
-  if (props.transparent && textDark.value) {
-    color = "text-dark";
-  } else if (props.transparent) {
-    color = "text-white";
-  } else {
-    color = "text-dark";
-  }
-
-  return color;
-};
-
-// set nav color on mobile && desktop
-
-let textDark = ref(props.darkText);
-const { type } = useWindowsWidth();
-
-if (type.value === "mobile") {
-  textDark.value = true;
-} else if (type.value === "desktop" && textDark.value == false) {
-  textDark.value = false;
-}
-
-watch(
-  () => type.value,
-  (newValue) => {
-    if (newValue === "mobile") {
-      textDark.value = true;
-    } else {
-      textDark.value = false;
-    }
-  }
-);
-</script>
-<template>
-  <nav
-    class="navbar navbar-expand-lg top-0"
-    :class="{
-      'z-index-3 w-100 shadow-none navbar-transparent position-absolute my-3':
-        props.transparent,
-      'my-3 blur border-radius-lg z-index-3 py-2 shadow py-2 start-0 end-0 mx-4 position-absolute mt-4':
-        props.sticky,
-      'navbar-light bg-white py-3': props.light,
-      ' navbar-dark bg-gradient-dark z-index-3 py-3': props.dark
-    }"
-  >
-    <div
-      :class="
-        props.transparent || props.light || props.dark
-          ? 'container'
-          : 'container-fluid px-0'
-      "
-    >
-      <RouterLink
-        class="navbar-brand d-none d-md-block"
-        :class="[
-          (props.transparent && textDark.value) || !props.transparent
-            ? 'text-dark font-weight-bolder ms-sm-3'
-            : 'text-white font-weight-bolder ms-sm-3'
-        ]"
-        :to="{ name: 'presentation' }"
-        rel="tooltip"
-        data-placement="bottom"
-      >
-        LinkedMin
-      </RouterLink>
-      <RouterLink
-        class="navbar-brand d-block d-md-none"
-        :class="
-          props.transparent || props.dark
-            ? 'text-white'
-            : 'font-weight-bolder ms-sm-3'
-        "
-        to="/"
-        rel="tooltip"
-        data-placement="bottom"
-      >
-      LinkedMin
-      </RouterLink>
-      <a
-        href="/pages/landing-pages/basic"
-        class="btn btn-sm bg-gradient-success mb-0 ms-auto d-lg-none d-block"
-        >Вход/Регистрация</a
-      >
-      <button
-        class="navbar-toggler shadow-none ms-2"
-        type="button"
-        data-bs-toggle="collapse"
-        data-bs-target="#navigation"
-        aria-controls="navigation"
-        aria-expanded="false"
-        aria-label="Toggle navigation"
-      >
-        <span class="navbar-toggler-icon mt-2">
-          <span class="navbar-toggler-bar bar1"></span>
-          <span class="navbar-toggler-bar bar2"></span>
-          <span class="navbar-toggler-bar bar3"></span>
-        </span>
-      </button>
-      <div
-        class="collapse navbar-collapse w-100 pt-3 pb-2 py-lg-0"
-        id="navigation"
-      >
-        <ul class="navbar-nav navbar-nav-hover ms-auto">
-          <li class="nav-item dropdown dropdown-hover mx-2">
-            <a
-              role="button"
-              class="nav-link ps-2 d-flex cursor-pointer align-items-center"
-              :class="getTextColor()"
-              id="dropdownMenuPages"
-              data-bs-toggle="dropdown"
-              aria-expanded="false"
-            >
-             <!-- <i
-                class="material-icons opacity-6 me-2 text-md"
-                :class="getTextColor()"
-                >dashboard</i
-              >-->
-
-              Пользователи          
-
-              <!--<img
-                :src="getArrowColor()"
-                alt="down-arrow"
-                class="arrow ms-2 d-lg-block d-none"
-              />
-              <img
-                :src="getArrowColor()"
-                alt="down-arrow"
-                class="arrow ms-1 d-lg-none d-block ms-auto"
-              />-->
-            </a>
-            <div
-              class="dropdown-menu dropdown-menu-animation ms-n3 dropdown-md p-3 border-radius-xl mt-0 mt-lg-3"
-              aria-labelledby="dropdownMenuPages">
-
-              <div class="row d-none d-lg-block">
-                <div class="col-12 px-4 py-2">
-                  <div class="row">
-                    <div class="position-relative">
-                      <RouterLink
-                        :to="{ name: 'profiles' }"
-                        class="dropdown-item border-radius-md">
-                        <span>Все пользователи</span>
-                      </RouterLink>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div class="d-lg-none">
-                <RouterLink
-                  :to="{ name: 'profiles' }"
-                  class="dropdown-item border-radius-md">
-                  <span>Все пользователи</span>
-                </RouterLink>
-              </div>
-            </div>
-          </li>
-
-
-          <li class="nav-item dropdown dropdown-hover mx-2">
-            <a
-              role="button"
-              class="nav-link ps-2 d-flex cursor-pointer align-items-center"
-              :class="getTextColor()"
-              id="dropdownMenuPages"
-              data-bs-toggle="dropdown"
-              aria-expanded="false"
-            >
-              <!--<i
-                class="material-icons opacity-6 me-2 text-md"
-                :class="getTextColor()"
-                >dashboard</i
-              >-->
-              Проекты
-              <!--<img
-                :src="getArrowColor()"
-                alt="down-arrow"
-                class="arrow ms-2 d-lg-block d-none"
-              />
-              <img
-                :src="getArrowColor()"
-                alt="down-arrow"
-                class="arrow ms-1 d-lg-none d-block ms-auto"
-              />-->
-            </a>
-            <div
-              class="dropdown-menu dropdown-menu-animation ms-n3 dropdown-md p-3 border-radius-xl mt-0 mt-lg-3"
-              aria-labelledby="dropdownMenuPages"
-            >
-              <div class="row d-none d-lg-block">
-                <div class="col-12 px-4 py-2">
-                  <div class="row">
-                    <div class="position-relative">
-                      <RouterLink
-                        :to="{ name: 'projects' }"
-                        class="dropdown-item border-radius-md"
-                      >
-                        <span>Все проекты</span>
-                      </RouterLink>
-
-                    </div>
-
-                    <div v-if="isAuthenticated" class="position-relative">
-                      <div
-                        class="dropdown-header text-dark font-weight-bolder d-flex align-items-center px-1"
-                      >
-                        Мои проекты
-                      </div>
-                      <RouterLink
-                        :to="{ name: 'myprojects' }"
-                        class="dropdown-item border-radius-md"
-                      >
-                        <span>Мои проекты</span>
-                      </RouterLink>
-
-                    </div>
-
-                  </div>
-                </div>
-              </div>
-              <div class="d-lg-none">
-                <RouterLink
-                  :to="{ name: 'projects' }"
-                  class="dropdown-item border-radius-md">
-                  <span>Все проекты</span>
-                </RouterLink>
-              
-              </div>
-            </div>
-          </li>
-
-
-
-          <li v-if="isAuthenticated" class="nav-item dropdown dropdown-hover mx-2">
-            <a
-              role="button"
-              class="nav-link ps-2 d-flex cursor-pointer align-items-center"
-              :class="getTextColor()"
-              id="dropdownMenuDocs"
-              data-bs-toggle="dropdown"
-              aria-expanded="false">
-             <!-- <i
-                class="material-icons opacity-6 me-2 text-md"
-                :class="getTextColor()"
-                >article</i
-              >-->
-              Профиль
-              <!--<img
-                :src="getArrowColor()"
-                alt="down-arrow"
-                class="arrow ms-2 d-lg-block d-none"
-              />
-              <img
-                :src="getArrowColor()"
-                alt="down-arrow"
-                class="arrow ms-1 d-lg-none d-block ms-auto"
-              />-->
-            </a>
-            <div
-              class="dropdown-menu dropdown-menu-end dropdown-menu-animation dropdown-md mt-0 mt-lg-3 p-3 border-radius-lg"
-              aria-labelledby="dropdownMenuDocs"
-            >
-              <div class="d-none d-lg-block">
-                <ul class="list-group">
-                  <li class="nav-item list-group-item border-0 p-0">
-                    <a
-                      class="dropdown-item py-2 ps-3 border-radius-md"
-                      href="/ViewMyProfile"
-                    >
-
-                    </a>
-
-                    <a
-                      class="dropdown-item py-2 ps-3 border-radius-md"
-                      href="/CreateProject"
-                    >
-                      <h6
-                        class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0"
-                      >
-                        Создать проект
-                      </h6>
-                      <span class="text-sm"
-                        >Страница добавления проекта</span
-                      >
-                    </a>
-                  </li>
-                </ul>
-              </div>
-
-              <div class="row d-lg-none">
-                <div class="col-md-12 g-0">
-                  <a class="dropdown-item py-2 ps-3 border-radius-md"
-                    href="/ViewMyProfile">
-                    <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">
-                      Мой профиль
-                    </h6>
-
-                  </a>
-                </div>
-                
-              </div>
-              
-            </div>
-          </li>
-          
-        </ul>
-        <ul class="navbar-nav d-lg-block d-none">
-          <li class="nav-item">
-            <a
-              :href="action.route"
-              class="btn btn-sm mb-0"
-              :class="action.color"
-              onclick="smoothToPricing('pricing-soft-ui')"
-              >{{ action.label }}</a
-            >
-          </li>
-        </ul>
-      </div>
-    </div>
-  </nav>
-  <!-- End Navbar -->
-</template>

From 34199d2e1d45a5ead7b92eec7f3392a9a23f07d8 Mon Sep 17 00:00:00 2001
From: lazyseal <49525095+lazyseal@users.noreply.github.com>
Date: Mon, 22 May 2023 19:41:13 +0100
Subject: [PATCH 2/2] Update NavbarDefault.vue

---
 src/examples/navbars/NavbarDefault.vue | 383 +++++++++++++++++++++++++
 1 file changed, 383 insertions(+)

diff --git a/src/examples/navbars/NavbarDefault.vue b/src/examples/navbars/NavbarDefault.vue
index 8b13789..68b45ac 100644
--- a/src/examples/navbars/NavbarDefault.vue
+++ b/src/examples/navbars/NavbarDefault.vue
@@ -1 +1,384 @@
+<script setup>
+import { RouterLink } from "vue-router";
+import { ref, watch, computed } from "vue";
+import { useWindowsWidth } from "../../assets/js/useWindowsWidth";
+
+// images
+import ArrDark from "@/assets/img/down-arrow-dark.svg";
+
+import DownArrWhite from "@/assets/img/down-arrow-white.svg";
+
+const isAuthenticated = computed(() => !!sessionStorage.getItem('access_token')); // Computed property to check if the user is authenticated
+
+const props = defineProps({
+  action: {
+    type: Object,
+    route: String,
+    color: String,
+    label: String,
+    default: () => ({
+      route: "/pages/landing-pages/basic",
+      color: "bg-gradient-success",
+      label: "Вход / Регистрация"
+    })
+  },
+  transparent: {
+    type: Boolean,
+    default: false
+  },
+  light: {
+    type: Boolean,
+    default: false
+  },
+  dark: {
+    type: Boolean,
+    default: false
+  },
+  sticky: {
+    type: Boolean,
+    default: false
+  },
+  darkText: {
+    type: Boolean,
+    default: false
+  }
+});
+
+// set arrow  color
+function getArrowColor() {
+  if (props.transparent && textDark.value) {
+    return ArrDark;
+  } else if (props.transparent) {
+    return DownArrWhite;
+  } else {
+    return ArrDark;
+  }
+}
+
+// set text color
+const getTextColor = () => {
+  let color;
+  if (props.transparent && textDark.value) {
+    color = "text-dark";
+  } else if (props.transparent) {
+    color = "text-white";
+  } else {
+    color = "text-dark";
+  }
+
+  return color;
+};
+
+// set nav color on mobile && desktop
+
+let textDark = ref(props.darkText);
+const { type } = useWindowsWidth();
+
+if (type.value === "mobile") {
+  textDark.value = true;
+} else if (type.value === "desktop" && textDark.value == false) {
+  textDark.value = false;
+}
+
+watch(
+  () => type.value,
+  (newValue) => {
+    if (newValue === "mobile") {
+      textDark.value = true;
+    } else {
+      textDark.value = false;
+    }
+  }
+);
+</script>
+<template>
+  <nav
+    class="navbar navbar-expand-lg top-0"
+    :class="{
+      'z-index-3 w-100 shadow-none navbar-transparent position-absolute my-3':
+        props.transparent,
+      'my-3 blur border-radius-lg z-index-3 py-2 shadow py-2 start-0 end-0 mx-4 position-absolute mt-4':
+        props.sticky,
+      'navbar-light bg-white py-3': props.light,
+      ' navbar-dark bg-gradient-dark z-index-3 py-3': props.dark
+    }"
+  >
+    <div
+      :class="
+        props.transparent || props.light || props.dark
+          ? 'container'
+          : 'container-fluid px-0'
+      "
+    >
+      <RouterLink
+        class="navbar-brand d-none d-md-block"
+        :class="[
+          (props.transparent && textDark.value) || !props.transparent
+            ? 'text-dark font-weight-bolder ms-sm-3'
+            : 'text-white font-weight-bolder ms-sm-3'
+        ]"
+        :to="{ name: 'presentation' }"
+        rel="tooltip"
+        data-placement="bottom"
+      >
+        LinkedMin
+      </RouterLink>
+      <RouterLink
+        class="navbar-brand d-block d-md-none"
+        :class="
+          props.transparent || props.dark
+            ? 'text-white'
+            : 'font-weight-bolder ms-sm-3'
+        "
+        to="/"
+        rel="tooltip"
+        data-placement="bottom"
+      >
+      LinkedMin
+      </RouterLink>
+      <a
+        href="/pages/landing-pages/basic"
+        class="btn btn-sm bg-gradient-success mb-0 ms-auto d-lg-none d-block"
+        >Вход/Регистрация</a
+      >
+      <button
+        class="navbar-toggler shadow-none ms-2"
+        type="button"
+        data-bs-toggle="collapse"
+        data-bs-target="#navigation"
+        aria-controls="navigation"
+        aria-expanded="false"
+        aria-label="Toggle navigation"
+      >
+        <span class="navbar-toggler-icon mt-2">
+          <span class="navbar-toggler-bar bar1"></span>
+          <span class="navbar-toggler-bar bar2"></span>
+          <span class="navbar-toggler-bar bar3"></span>
+        </span>
+      </button>
+      <div
+        class="collapse navbar-collapse w-100 pt-3 pb-2 py-lg-0"
+        id="navigation"
+      >
+        <ul class="navbar-nav navbar-nav-hover ms-auto">
+          <li class="nav-item dropdown dropdown-hover mx-2">
+            <a
+              role="button"
+              class="nav-link ps-2 d-flex cursor-pointer align-items-center"
+              :class="getTextColor()"
+              id="dropdownMenuPages"
+              data-bs-toggle="dropdown"
+              aria-expanded="false"
+            >
+             <!-- <i
+                class="material-icons opacity-6 me-2 text-md"
+                :class="getTextColor()"
+                >dashboard</i
+              >-->
+
+              Пользователи          
+
+              <!--<img
+                :src="getArrowColor()"
+                alt="down-arrow"
+                class="arrow ms-2 d-lg-block d-none"
+              />
+              <img
+                :src="getArrowColor()"
+                alt="down-arrow"
+                class="arrow ms-1 d-lg-none d-block ms-auto"
+              />-->
+            </a>
+            <div
+              class="dropdown-menu dropdown-menu-animation ms-n3 dropdown-md p-3 border-radius-xl mt-0 mt-lg-3"
+              aria-labelledby="dropdownMenuPages">
+
+              <div class="row d-none d-lg-block">
+                <div class="col-12 px-4 py-2">
+                  <div class="row">
+                    <div class="position-relative">
+                      <RouterLink
+                        :to="{ name: 'profiles' }"
+                        class="dropdown-item border-radius-md">
+                        <span>Все пользователи</span>
+                      </RouterLink>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="d-lg-none">
+                <RouterLink
+                  :to="{ name: 'profiles' }"
+                  class="dropdown-item border-radius-md">
+                  <span>Все пользователи</span>
+                </RouterLink>
+              </div>
+            </div>
+          </li>
+
+
+          <li class="nav-item dropdown dropdown-hover mx-2">
+            <a
+              role="button"
+              class="nav-link ps-2 d-flex cursor-pointer align-items-center"
+              :class="getTextColor()"
+              id="dropdownMenuPages"
+              data-bs-toggle="dropdown"
+              aria-expanded="false"
+            >
+              <!--<i
+                class="material-icons opacity-6 me-2 text-md"
+                :class="getTextColor()"
+                >dashboard</i
+              >-->
+              Проекты
+              <!--<img
+                :src="getArrowColor()"
+                alt="down-arrow"
+                class="arrow ms-2 d-lg-block d-none"
+              />
+              <img
+                :src="getArrowColor()"
+                alt="down-arrow"
+                class="arrow ms-1 d-lg-none d-block ms-auto"
+              />-->
+            </a>
+            <div
+              class="dropdown-menu dropdown-menu-animation ms-n3 dropdown-md p-3 border-radius-xl mt-0 mt-lg-3"
+              aria-labelledby="dropdownMenuPages"
+            >
+              <div class="row d-none d-lg-block">
+                <div class="col-12 px-4 py-2">
+                  <div class="row">
+                    <div class="position-relative">
+                      <RouterLink
+                        :to="{ name: 'projects' }"
+                        class="dropdown-item border-radius-md"
+                      >
+                        <span>Все проекты</span>
+                      </RouterLink>
+
+                    </div>
+
+                    <div v-if="isAuthenticated" class="position-relative">
+                      <div
+                        class="dropdown-header text-dark font-weight-bolder d-flex align-items-center px-1"
+                      >
+                        Мои проекты
+                      </div>
+                      <RouterLink
+                        :to="{ name: 'myprojects' }"
+                        class="dropdown-item border-radius-md"
+                      >
+                        <span>Мои проекты</span>
+                      </RouterLink>
+
+                    </div>
+
+                  </div>
+                </div>
+              </div>
+              <div class="d-lg-none">
+                <RouterLink
+                  :to="{ name: 'projects' }"
+                  class="dropdown-item border-radius-md">
+                  <span>Все проекты</span>
+                </RouterLink>
+              
+              </div>
+            </div>
+          </li>
+
+
+
+          <li v-if="isAuthenticated" class="nav-item dropdown dropdown-hover mx-2">
+            <a
+              role="button"
+              class="nav-link ps-2 d-flex cursor-pointer align-items-center"
+              :class="getTextColor()"
+              id="dropdownMenuDocs"
+              data-bs-toggle="dropdown"
+              aria-expanded="false">
+             <!-- <i
+                class="material-icons opacity-6 me-2 text-md"
+                :class="getTextColor()"
+                >article</i
+              >-->
+              Профиль
+              <!--<img
+                :src="getArrowColor()"
+                alt="down-arrow"
+                class="arrow ms-2 d-lg-block d-none"
+              />
+              <img
+                :src="getArrowColor()"
+                alt="down-arrow"
+                class="arrow ms-1 d-lg-none d-block ms-auto"
+              />-->
+            </a>
+            <div
+              class="dropdown-menu dropdown-menu-end dropdown-menu-animation dropdown-md mt-0 mt-lg-3 p-3 border-radius-lg"
+              aria-labelledby="dropdownMenuDocs"
+            >
+              <div class="d-none d-lg-block">
+                <ul class="list-group">
+                  <li class="nav-item list-group-item border-0 p-0">
+                    <a
+                      class="dropdown-item py-2 ps-3 border-radius-md"
+                      href="/ViewMyProfile"
+                    >
+
+                    </a>
+
+                    <a
+                      class="dropdown-item py-2 ps-3 border-radius-md"
+                      href="/CreateProject"
+                    >
+                      <h6
+                        class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0"
+                      >
+                        Создать проект
+                      </h6>
+                      <span class="text-sm"
+                        >Страница добавления проекта</span
+                      >
+                    </a>
+                  </li>
+                </ul>
+              </div>
+
+              <div class="row d-lg-none">
+                <div class="col-md-12 g-0">
+                  <a class="dropdown-item py-2 ps-3 border-radius-md"
+                    href="/ViewMyProfile">
+                    <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">
+                      Мой профиль
+                    </h6>
+
+                  </a>
+                </div>
+                
+              </div>
+              
+            </div>
+          </li>
+          
+        </ul>
+        <ul class="navbar-nav d-lg-block d-none">
+          <li class="nav-item">
+            <a
+              :href="action.route"
+              class="btn btn-sm mb-0"
+              :class="action.color"
+              onclick="smoothToPricing('pricing-soft-ui')"
+              >{{ action.label }}</a
+            >
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+  <!-- End Navbar -->
+</template>