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] 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>