@ozdao/martyrs 0.2.549 → 0.2.550

package/src/modules/core/views/components/partials/Navigation.vue

@@ -0,0 +1,304 @@
+<script setup>
+import { ref, watch, computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+
+import IconChevronBottom from '@martyrs/src/modules/icons/navigation/IconChevronBottom.vue'
+
+import * as core from '@martyrs/src/modules/core/views/store/core.store.js'
+import * as auth from '@martyrs/src/modules/auth/views/store/auth.js'
+
+const router = useRouter()
+const route = useRoute()
+
+import Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue'
+import Spoiler from '@martyrs/src/components/Spoiler/Spoiler.vue'
+
+const props = defineProps({
+  navigationItems: Array,
+  theme: {
+    type: String,
+    default: "light"
+  },
+  stateSidebar: {
+    type: Boolean,
+    default: false
+  },
+  horizontal: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emits = defineEmits([
+  'closeSidebar'
+])
+
+const expandedSections = ref([])
+
+const toggleSection = (title) => {
+  if (!props.stateSidebar) {
+    if (menuItems.value.flatMap(section => section.items).find(item => item.title === title && item.subItems)) {
+      emits('closeSidebar')
+      setTimeout(() => {
+        expandedSections.value.push(title)
+      }, 50)
+    }
+    return
+  }
+  
+  const index = expandedSections.value.indexOf(title)
+
+  if (index === -1) {
+    expandedSections.value.push(title)
+  } else {
+    expandedSections.value.splice(index, 1)
+  }
+}
+
+const isSectionExpanded = (title) => {
+  return expandedSections.value.includes(title)
+}
+
+// Process route functions with auth data and route
+const processRoute = (routeFn) => {
+  if (typeof routeFn === 'function') {
+    return routeFn(auth.state, route)
+  }
+  return routeFn
+}
+</script>
+
+<template>
+  <nav
+    class="transition-quint-out o-x-visible  h-100"
+    :class="[
+      stateSidebar ? 'pd-small' : 'pd-micro',
+      horizontal ? 'w-100 desktop-only gap-thin flex flex-center flex-nowrap o-y-visible' : 'o-y-scroll gap-medium rows-1',
+    ]"
+  >
+    <div 
+      v-for="section in props.navigationItems" 
+      v-show="!section.visible || (typeof section.visible === 'function' ? section.visible(auth.state, route) : true)"
+      :key="section.category" 
+      class="transition-quint-out"
+      :class="[
+        horizontal ? 'w-max  flex-child-default flex flex-nowrap' : '',
+        stateSidebar && !horizontal ? '' : '',
+      ]"
+    >
+      <div
+        v-if="section.category && stateSidebar && !horizontal"
+        class="uppercase t-medium t-transp p-small"
+        :class="{
+          't-black': theme === 'light',
+          't-white':  theme === 'dark'
+        }"
+      >
+        {{ section.category }}
+      </div>
+
+      <ul 
+        :class="[
+          horizontal ? 'w-100 gap-micro flex flex-nowrap' : 'flex flex-column gap-micro',
+        ]"
+      >
+        <li
+          v-for="item in section.items"
+          v-show="!item.visible || (typeof item.visible === 'function' ? item.visible(auth.state, route) : true)"
+          class="w-100 pos-relative"
+          :key="item.title"
+
+        >
+        <Dropdown
+          v-if="item.subItems && horizontal"
+          class="w-100"
+          align="left"
+          trigger="hover"
+        >
+          <template #label>
+            <button
+              class="transition-quint-out w-100 flex radius-small flex-nowrap cursor-pointer flex-v-center pd-thin"
+              @click="item.route ? router.push(processRoute(item.route)) : null"
+              :class="[
+                item.route && route.path === processRoute(item.route) ? theme === 'light' ? 'bg-light' : 'bg-dark' : '',
+                theme === 'light' ? 'hover-bg-light' : 'hover-bg-dark'
+              ]"
+            >
+              <span class="t-medium">{{ item.title }}</span>
+              <!-- <IconChevronBottom :fill="theme === 'dark' ? 'rgb(var(--white))': 'rgb(var(--black))'" class="i-small mn-l-thin"/> -->
+            </button>
+          </template>
+          <ul class="dropdown-submenu bg-blur-small" :class="theme === 'light' ? 'bg-white-transp-50 ' : 'bg-black-transp-50'">
+            <li v-for="subItem in item.subItems" :key="subItem.title">
+              <a
+                @click="subItem.route ? router.push(processRoute(subItem.route)) : null"
+                href="#"
+                class="transition-quint-out flex flex-v-center flex-nowrap gap-thin pd-thin radius-small"
+                :class="[
+                  subItem.route && route.path === processRoute(subItem.route) ? theme === 'light' ? 'bg-light' : 'bg-dark' : '',
+                  theme === 'light' ? 'hover-bg-light' : 'hover-bg-dark'
+                ]"
+              >
+                <component
+                  v-if="subItem.iconComponent"
+                  :is="subItem.iconComponent"
+                  class="i-medium"
+                  :fill="core.state.theme.darkmode || theme === 'dark' ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)'"
+                />
+                <span v-else class="">{{ subItem.icon }}</span>
+                <span class="w-100">{{ subItem.title }}</span>
+              </a>
+            </li>
+          </ul>
+        </Dropdown>
+        <button
+          v-else
+          class="transition-quint-out w-100 flex radius-small flex-nowrap cursor-pointer flex-v-center"
+          @click="item.route ? (isPhone ? (stateSidebar = false) : null, route.path !== processRoute(item.route) ? router.push(processRoute(item.route)) : null) : null"
+          :class="[
+              horizontal ? 'pd-thin' : '',
+              item.route && route.path === processRoute(item.route) ? theme === 'light' ? 'bg-light' : 'bg-dark' : '',
+              theme === 'light' ? 'hover-bg-light' : 'hover-bg-dark'
+            ]"
+        >
+          <div v-if="!horizontal" class="w-100 flex-child-default w-max-big flex flex-center aspect-1x1">
+            <component
+              v-if="item.iconComponent"
+              :is="item.iconComponent"
+              class="i-medium flex-child-default"
+              :fill="core.state.theme.darkmode || theme === 'dark' ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)'"
+            />
+            <span
+              v-if="!item.iconComponent "
+              class="p-regular"
+            >
+              {{ item.icon }}
+            </span>
+          </div>
+
+          <span
+            class="transition-quint-out w-100 t-left t-medium"
+            :class="{ 'hidden': !stateSidebar && !horizontal, 'visible': stateSidebar || horizontal }"
+          >
+            {{ item.title }}
+          </span>
+
+          <span
+            v-if="item.subItems && stateSidebar && !horizontal"
+            class="mn-l-auto mn-r-small sidebar-dropdown-icon"
+            :class="{ 'rotate-180': isSectionExpanded(item.title) }"
+            @click.stop="toggleSection(item.title)"
+          >
+             <IconChevronBottom :class="{ 'rotate-180 mn-t-micro-negative': isOpen }" :fill=" theme === 'dark' ? 'rgb(var(--white))': 'rgb(var(--black))'" class="i-small"/>
+          </span>
+        </button>
+        <transition
+          enter-active-class="dropdown-enter"
+          leave-active-class="dropdown-leave"
+          enter-from-class="dropdown-enter-from"
+          enter-to-class="dropdown-enter-to"
+          leave-from-class="dropdown-leave-from"
+          leave-to-class="dropdown-leave-to"
+        >
+          <ul
+            v-if="item.subItems && isSectionExpanded(item.title) && stateSidebar && !horizontal"
+            class="mn-l-small mn-t-thin"
+          >
+            <li v-for="subItem in item.subItems" :key="subItem.title">
+
+              <a
+               @click="subItem.route ? (isPhone ? (stateSidebar = false) : null, route.path !== processRoute(subItem.route) ? router.push(processRoute(subItem.route)) : null) : null"
+                href="#"
+                class="transition-quint-out flex flex-v-center flex-nowrap gap-thin pd-thin radius-small"
+                :class="[
+                  subItem.route && route.path === processRoute(subItem.route) ? theme === 'light' ? 'bg-light' : 'bg-dark' : '',
+                    theme === 'light' ? 'hover-bg-light' : 'hover-bg-dark'
+                    ]"
+              >
+                <component
+                  v-if="subItem.iconComponent"
+                  :is="subItem.iconComponent"
+                  class="i-medium"
+                 :fill="core.state.theme.darkmode || theme === 'dark' ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)'"
+                />
+                <span v-else class="">{{ subItem.icon }}</span>
+                <span class="w-100">{{ subItem.title }}</span>
+              </a>
+            </li>
+          </ul>
+        </transition>
+        </li>
+      </ul>
+    </div>
+  </nav>
+</template>
+
+<style scoped>
+
+.rotate-180 {
+  transform: rotate(180deg);
+}
+
+.hidden {
+/*  opacity: 0;*/
+  width: 0;
+  display: none;
+}
+
+.visible {
+/*  opacity: 1;*/
+  display: block;
+}
+
+/* Dropdown animations */
+.dropdown-enter, .dropdown-leave {
+  transition: all 0.3s ease-in-out;
+}
+
+.dropdown-enter-from, .dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-0.5rem);
+}
+
+.dropdown-enter-to, .dropdown-leave-from {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Horizontal dropdown submenu */
+.dropdown-submenu {
+  list-style: none;
+  padding: 0.5rem;
+  margin: 0;
+  min-width: 12rem;
+}
+
+.dropdown-submenu li {
+  width: 100%;
+}
+
+.dropdown-submenu a {
+  display: flex;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+/* Transition for horizontal dropdown */
+:deep(.TransitionTranslateY-enter-active),
+:deep(.TransitionTranslateY-leave-active) {
+  transition: translateY 0.2s ease;
+   transition: opacity 0.2s ease;
+}
+
+:deep(.TransitionTranslateY-enter-from),
+:deep(.TransitionTranslateY-leave-to) {
+  opacity: 0;
+  transform: translateY(-0.5rem);
+}
+
+:deep(.TransitionTranslateY-enter-to),
+:deep(.TransitionTranslateY-leave-from) {
+  opacity: 1;
+  transform: translateY(0);
+}
+</style>

package/src/modules/core/views/components/partials/NavigationBar.vue

@@ -0,0 +1,156 @@
+<template>
+	<header 
+		class="pos-sticky w-100 z-index-3 flex-center flex t-center pd-medium"
+	>
+		<transition name="slideIn"  mode="out-in">
+			<svg 
+				v-if="!route.meta.title_hide"
+				@click="handleBackNavigation()" 
+				class="pos-absolute cursor-pointer i-medium pos-l-medium"
+				width="12"
+				height="22"
+				viewBox="0 0 12 22"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path fill="rgb(var(--main))" d="M9.70312 20.7969C10.125 21.2188 10.8281 21.2188 11.2969 20.7969C11.7188 20.375 11.7188 19.6719 11.2969 19.2031L3.42188 11L11.2969 2.79688C11.7188 2.32813 11.7188 1.625 11.2969 1.20313C10.8281 0.734377 10.125 0.781252 9.70312 1.20313L1.07812 10.2031C0.84375 10.4375 0.75 10.7188 0.75 11C0.75 11.2813 0.84375 11.5625 1.07812 11.7969L9.70312 20.7969Z" />
+			</svg>
+		</transition>
+
+		<transition name="slideIn"  mode="out-in">
+			<div :key="route.meta.title" class="h-2r flex flex-center header-title">
+				<component
+					v-if="props.logotype && route.meta.title_hide"
+				  :is="props.logotype"
+				  :theme="theme"
+				/>
+
+				<span v-else class="t-semi lh-semi h5 d-block" >
+					{{ formateText(core.state.navigation_bar.name || route.meta?.title?.[locale.toLowerCase()] || route.name) }}
+				</span>
+			</div>
+		</transition>
+
+		<div class="flex-nowrap flex gap-regular pos-absolute pos-r-medium">
+			<transition name="slideIn"  mode="out-in">
+				<Button
+					v-if="route.meta.title_hide || route.meta.showShopCart"
+					:submit="a => shopcart.actions.toggleShopcart()" 
+					:counter="shopcart.getters.cartTotalAmount" 
+					:showSucces="false"
+					:showLoader="false"
+					class="cursor-pointer pd-zero "
+					> 
+					<IconShopcart class="i-medium" fill="rgb(var(--main))" />
+				</Button>
+			</transition>
+
+	    <transition-group v-if="actions.length > 0" name="slideIn" class="i-medium" tag="div">
+	      <template v-for="(item, index) in actions" :key="index">
+	        <component
+						v-if="typeof item.condition === 'function' ? item.condition(router, route) : item.condition"
+	          :is="item.component"
+	          v-bind="item.props"
+	          @click="item.action(router, route)"
+	          class="i-medium cursor-pointer "
+	        />
+	      </template>
+	    </transition-group>
+
+			<transition name="slideIn"  mode="out-in">
+				<IconProfile 
+					v-if="route.meta.title_hide"
+					@click="handleToggle()" 
+					class="cursor-pointer i-medium"
+					fill="rgb(var(--main))" 
+				/>
+			</transition>
+		</div>
+	</header>
+</template>
+
+<script setup>
+	import { ref, onMounted, onUnmounted, computed } from 'vue' 
+	import { useRoute, useRouter } from 'vue-router'
+	import { useI18n } from 'vue-i18n'
+	
+  import IconShopcart from '@martyrs/src/modules/icons/entities/IconShopcart.vue'
+	import IconProfile from '@martyrs/src/modules/icons/entities/IconProfile.vue'
+
+	import Button 				from '@martyrs/src/components/Button/Button.vue'
+
+	import * as core from '@martyrs/src/modules/core/views/store/core.store.js'
+	import * as shopcart from '@martyrs/src/modules/orders/store/shopcart.js'
+	import * as auth from '@martyrs/src/modules/auth/views/store/auth.js'
+
+		// Props
+	const props = defineProps({
+    theme: {
+    	type: String,
+	    default: "light"
+    },
+    logotype: {
+	    type: Object
+	  }
+  });
+
+	const router = useRouter()
+	const route = useRoute()
+
+	const { t, mergeLocaleMessage, locale } = useI18n();
+
+	const actions = computed(() => core.state.navigation_bar.actions || route.meta?.actions || [])
+
+	function handleBackNavigation() {
+	    if (route.query?.afterAuth)  { 
+	    	router.push({name: 'Home'}) 
+	    } else {
+	    	router.back();
+	    }
+	}
+
+	function handleToggle() {
+		if (auth.state.access.status === false) {
+			router.push({name: 'Sign In'}) 
+		} else {
+			router.push({ name: 'User Profile', params: { _id: auth.state.user._id }})
+		}
+	}
+</script>
+
+<style lang="scss">
+	.header-shopcart {
+		position: absolute;
+		right: 4.25rem;
+	}
+
+	.header-title {
+		pointer-events: none;
+	}
+
+	.slideIn-enter-active,
+	.slideIn-leave-active {
+		transition: all  0.33s cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	.slideIn-enter-from,
+	.slideIn-leave-to {
+		opacity: 0;
+		transform: translateX(10px);
+
+		span {	position: absolute; } 
+	}
+
+	.slideY-enter-active,
+	.slideY-leave-active {
+		transition: all  0.33s cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	.slideY-enter-from,
+	.slideY-leave-to {
+		opacity: 0;
+		transform: translateY(50px);
+
+		span {	position: absolute; } 
+	}
+</style>

package/src/modules/core/views/components/partials/SearchBar.vue

@@ -0,0 +1,32 @@
+<template>
+  <BlockSearch
+    :collapsible="isMobile"
+    class="mn-r-big mn-l-big"
+  />
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n'
+import BlockSearch from '@martyrs/src/modules/core/views/components/blocks/BlockSearch.vue'
+
+const { t, te } = useI18n({ messages: {
+  "en": {
+    "navigation": {
+      "home": "Home",
+      "catalog": "Catalog",
+      "rents": "My Rents",
+      "community": "Community",
+      "profile": "Profile"
+    }
+  }
+}})
+
+const isMobile = ref(false)
+
+// For SSR environment, we need to check client-side only
+if (typeof window !== 'undefined') {
+  isMobile.value = window.matchMedia('(max-width: 767px)').matches
+}
+</script>

package/src/modules/core/views/components/partials/Sidebar.vue

@@ -0,0 +1,142 @@
+<script setup>
+import { ref, watch } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { useGlobalMixins } from "@martyrs/src/modules/core/views/mixins/mixins.js"
+import * as core from '@martyrs/src/modules/core/views/store/core.store.js'
+
+const props = defineProps({
+  theme: {
+    type: String,
+    default: "light"
+  },
+  stateSidebar: {
+    type: Boolean,
+    default: false
+  },
+  width: {
+    type: String,
+    default: 'w-15r'
+  },
+  widthHidden:{
+    type: String,
+    default: 'w-3r '
+  },
+})
+
+const emits = defineEmits([
+  'closeSidebar'
+])
+
+const { isPhone, isTablet } = useGlobalMixins()
+const router = useRouter()
+const route = useRoute()
+
+const toggleSidebar = () => {
+  emits('closeSidebar')
+}
+
+const handleMouseEnter = () => {
+  if (route.meta?.sidebar_hover && !isPhone() && !isTablet()) {
+    core.state.isOpenSidebar = true
+  }
+}
+
+const handleMouseLeave = () => {
+  if (route.meta?.sidebar_hover && !isPhone() && !isTablet()) {
+    core.state.isOpenSidebar = false
+  }
+}
+
+router.beforeEach((to, from) => {
+   if (isPhone() || isTablet()) {
+    emits('closeSidebar')
+  }
+})
+</script>
+
+<template>
+  <aside
+    class="transition-quint-out w-min-0 o-hidden flex-child-default z-index-2  br-r br-solid  flex flex-column h-100"
+    :class="[
+      stateSidebar
+      ? `${width} w-min-10 tablet:w-min-100 tablet:w-100 mobile:w-min-100 mobile:w-100`
+      : `${widthHidden} mobile:w-0`,
+      //
+      theme === 'light'
+      ? 't-black bg-white br-light'
+      : 't-white bg-black br-dark'
+    ]"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+  >
+    <!-- Slot for header component (e.g., ProfileCard) -->
+    <slot name="header"></slot>
+
+    <!-- Slot for navigation content -->
+    <slot></slot>
+
+    <!-- Slot for footer component (e.g., HelpCard) -->
+    <slot name="footer"></slot>
+    <div v-if="MOBILE_APP" @click="() => toggleSidebar()"  class="pos-relative">
+      <div class="bg-light radius-medium pd-medium">
+        <p  class="t-medium t-black-transp-60">
+          Close Menu
+        </p>
+      </div>
+    </div>
+    <div 
+      class="br-solid w-100 br-t"
+      :class="{ 
+        'pd-micro': !stateSidebar, 
+        'pd-small': stateSidebar,
+        'br-light': theme === 'light',
+        'br-dark':  theme === 'dark'
+      }"
+    >
+      <button
+        @click="() => core.actions.toggleTheme()"
+        class="transition-quint-out flex w-100 flex-center radius-small cursor-pointer flex-nowrap"
+        :class="[
+          stateSidebar ? 'pd-thin justify-between' : 'w-100 justify-center',
+          theme === 'light' ? 'hover-bg-light' : 'hover-bg-dark'
+        ]"
+      >
+        <span 
+          class="w-100 t-nowrap transition-quint-out  t-left t-medium mn-r-thin"
+          :class="{ 'hidden': !stateSidebar, 'visible': stateSidebar }"
+        >
+          Dark Mode
+        </span>
+        <span class="aspect-1x1 flex-child-default w-max-big w-100 flex flex-center ">
+          {{ core.state.theme.darkmode ? '🌙' : '☀️' }}
+        </span>
+      </button>
+    </div>
+  </aside>
+</template>
+
+<style scoped>
+.hidden {
+  opacity: 0;
+  width: 0;
+  display: none;
+}
+.visible {
+  opacity: 1;
+  display: block;
+}
+/* Scrollbar styles */
+::-webkit-scrollbar {
+  width: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background-color: var(--grey-micro);
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--grey-small);
+}
+</style>