init git

components/app/mobile/DrawerMenu.vue

@@ -0,0 +1,40 @@
+<template>
+    <ul class="drawer-menu">
+        <li v-for="(item, i) in items" :key="i">
+            <router-link :to="item.link" @click="sidebar.visible = false">
+                <Button v-bind="item.props" iconPos="right" severity="secondary" text />
+            </router-link>
+        </li>
+    </ul>
+</template>
+
+<script setup>
+const props = defineProps(['menu'])
+const { sidebar } = inject('service')
+
+const items = ref([])
+items.value = props.menu.map((item) => {
+    item.props = { label: item.title, icon: 'isax ' + item.icon }
+    return item
+})
+</script>
+
+<style lang="scss">
+.drawer-menu {
+    @apply rtl w-60 flex flex-col gap-3 px-4 pt-[1.4rem];
+
+    li {
+        button {
+            @apply h-10 py-1.5 justify-end;
+
+            .p-button-icon {
+                @apply text-[#333333] text-2xl ml-3;
+            }
+
+            .p-button-label {
+                @apply text-[#333333] text-lg font-medium font-vazir grow-0 whitespace-nowrap;
+            }
+        }
+    }
+}
+</style>

components/app/mobile/Header.vue

@@ -0,0 +1,51 @@
+<template>
+    <header class="header-mobile">
+        <div>
+            <Button v-if="h.back" v-bind="btns.back.props" @click="$router.go(-1)" />
+            <Button v-if="h.menu" v-bind="btns.menu.props" @click="sidebar.visible = true" />
+            <h2 v-if="h.title" v-text="h.title" />
+            <AppMobileSearchBox v-if="h.search" />
+            <span />
+            <template v-for="(opt, i) in h.options" :key="i">
+                <Button v-bind="opt.props" @click="opt.click" />
+            </template>
+        </div>
+        <AppMobileToolbar v-if="h.toolbar" />
+    </header>
+</template>
+
+<script setup>
+const { btns, navigation } = inject('mobile')
+const { sidebar } = inject('service')
+const { mobile } = inject('config')
+const h = computed(() => mobile.header)
+</script>
+
+<style lang="scss">
+.header-mobile {
+    box-shadow: 0px 2px 20px #004b8224;
+    @apply w-full h-max bg-white shadow border-b pl-3 flex flex-col sticky top-0 z-10;
+
+    &>div {
+        @apply h-[3.3rem] flex items-center;
+
+        &>button {
+            @apply flex items-center text-[#292D32] shrink-0;
+
+            .p-button-icon {
+                @apply text-2xl;
+            }
+        }
+
+        &>h2{
+            @apply text-[#333333] text-sm font-medium font-vazir;
+        }
+
+        &>span {
+            @apply mr-auto;
+        }
+
+
+    }
+}
+</style>

components/app/mobile/Navigation.vue

@@ -0,0 +1,48 @@
+<template>
+    <nav class="bottom-navigation">
+        <ul>
+            <li v-for="(item, i) in navigation" :key="i">
+                <router-link :to="item.to" v-ripple>
+                    <Button v-bind="item.props" />
+                </router-link>
+            </li>
+        </ul>
+    </nav>
+</template>
+
+<script setup>
+const { navigation } = inject('mobile');
+
+const route = useRoute()
+
+Object.keys(navigation).forEach(key => {
+    const item = navigation[key]
+    if (item.to == route.path)
+        item.props.icon += '5'
+});
+</script>
+
+<style lang="scss">
+.bottom-navigation {
+    @apply fixed inset-x-0 bottom-0 h-16 pb-2 bg-white z-10;
+    @apply shadow-[0px_-2px_5px_#0000000a] border-t border-[#F1F2F4];
+
+    ul {
+        @apply w-full h-full flex justify-between items-center;
+
+        li {
+            @apply flex justify-center flex-1;
+
+            a {
+                button span {
+                    @apply text-[#7F7F7F] text-2xl;
+                }
+
+                &.router-link-active button span {
+                    @apply text-primary-600;
+                }
+            }
+        }
+    }
+}
+</style>

components/app/mobile/SearchBox.vue

@@ -0,0 +1,44 @@
+<template>
+    <div class="search-box" @click="active = true">
+        <i class="isax isax-search-normal-1" />
+        <template v-if="active">
+            <InputText v-model="q" :placeholder="$t('searchIn')" autofocus @blur="active = false"
+                @keypress.enter="search" />
+        </template>
+        <template v-else>
+            <span>{{ $t("searchIn") }}</span>
+            <img src="/images/logo-search.svg" />
+        </template>
+    </div>
+</template>
+
+<script setup>
+const route = useRoute()
+const router = useRouter()
+const active = ref(false);
+const q = ref(route.query.q || '');
+
+const search = () => router.push({ path: '/search', query: { q: q.value } })
+</script>
+
+<style lang="scss">
+.search-box {
+    @apply grow flex gap-1.5 items-center h-10 bg-[#F2F2F2] rounded-[0.4rem] px-3;
+
+    input {
+        @apply h-full text-xs px-0 w-auto bg-transparent border-0 rtl focus:border-0 focus:shadow-none #{!important};
+    }
+
+    i {
+        @apply text-lg ml-1.5;
+    }
+
+    span {
+        @apply text-[#5D5D5D] text-xs font-vazir;
+    }
+
+    img {
+        @apply w-24 h-5;
+    }
+}
+</style>

components/app/mobile/Toolbar.vue

@@ -0,0 +1,44 @@
+<template>
+    <ul>
+        <li v-for="({ label, link }, i) in items" :key="i">
+            <router-link :to="link">
+                <span>{{ label }}</span>
+            </router-link>
+        </li>
+    </ul>
+</template>
+
+<script setup>
+const items = reactive([
+    { link: '/panel/seller/store', label: 'فروشگاه', icon: 'isax isax-shop' },
+    { link: '/panel/seller/products', label: 'همه کالاها', icon: 'isax isax-bag' },
+    { link: '/panel/seller/new-product', label: 'معرفی کالا', icon: 'isax isax-bag-cross' },
+    { link: '/panel/seller/orders', label: 'سفارشات', icon: 'isax isax-bag-tick-2' },
+])
+</script>
+
+<style lang="scss">
+.header-mobile>ul {
+    @apply w-full h-8 flex gap-6 px-6;
+
+    li {
+        @apply translate-y-px;
+
+        a {
+
+            @apply h-full w-max text-[#333333] text-xs font-vazir;
+
+            &.router-link-active {
+                @apply text-[#47B556] font-bold;
+            }
+        }
+
+        &:has(.router-link-active) {
+            @apply border-b-2 border-[#47B556];
+        }
+    }
+
+
+
+}
+</style>