From 22a1d502b37e11e3971ee1d6ad07c95fd68a28cd Mon Sep 17 00:00:00 2001
From: Azat Kashapov <azat.developer@gmail.com>
Date: Fri, 28 Jun 2024 20:23:14 +0200
Subject: [PATCH] feat: rework books list/table

---
 package.json                        |  2 +-
 src/assets/style/tailwind.css       |  2 +-
 src/components/TheSidebar.vue       | 98 ++++++++++++++++++-----------
 src/layouts/LayoutMain.vue          | 35 ++++++-----
 src/layouts/LayoutSidebar.vue       | 27 --------
 src/router.ts                       | 10 +--
 src/views/{ => books}/BookList.vue  |  2 +-
 src/views/{ => books}/BookTable.vue |  2 +-
 src/views/books/BooksMain.vue       | 30 +++++++++
 9 files changed, 116 insertions(+), 92 deletions(-)
 delete mode 100644 src/layouts/LayoutSidebar.vue
 rename src/views/{ => books}/BookList.vue (98%)
 rename src/views/{ => books}/BookTable.vue (99%)
 create mode 100644 src/views/books/BooksMain.vue

diff --git a/package.json b/package.json
index 73a3a30..7faf73d 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "lib-vue",
   "private": true,
-  "version": "1.9.5",
+  "version": "1.10.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src/assets/style/tailwind.css b/src/assets/style/tailwind.css
index 9ca5bd6..e6b0c26 100644
--- a/src/assets/style/tailwind.css
+++ b/src/assets/style/tailwind.css
@@ -77,7 +77,7 @@
         @apply text-teal-400 lg:bg-transparent lg:text-teal-400 lg:p-0 dark:text-teal-400 lg:dark:text-blue-500
     }
     .sidebar-link {
-        @apply flex items-center gap-2 px-2 py-1 rounded lg:hover:bg-transparent lg:border-0 lg:hover:text-teal-300 dark:text-white lg:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent 
+        @apply flex items-center gap-2 px-2 py-1 lg:hover:bg-transparent lg:border-0 lg:hover:text-teal-300 dark:text-white lg:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent 
     }
     .sidebar-link-active {
         @apply text-teal-400 lg:bg-transparent lg:text-teal-400 dark:text-teal-400 lg:dark:text-blue-500
diff --git a/src/components/TheSidebar.vue b/src/components/TheSidebar.vue
index 90a4311..db29544 100644
--- a/src/components/TheSidebar.vue
+++ b/src/components/TheSidebar.vue
@@ -2,7 +2,12 @@
 import { computed } from 'vue';
 import { RouterLink, useRoute } from 'vue-router';
 
-import ThemeSwitcher from '@/components/ThemeSwitcher.vue';
+import IconBurger from '@/components/IconBurger.vue';
+
+const emit = defineEmits(['toggleSidebar']);
+const props = defineProps({
+  expanded: Boolean
+})
 
 const route = useRoute()
 
@@ -15,8 +20,19 @@ const bookID = computed(() => {
 </script>
 
 <template>
-  <aside class="scrollbar bg-white dark:bg-gray-900">
-    <ul class="sticky top-0 w-full gap-3 bg-white dark:text-white dark:bg-gray-900">
+  <div class="sticky top-0 z-30 flex h-8 w-full items-center px-3 dark:bg-gray-900 dark:text-white lg:hidden">
+    <button class="" @click="$emit('toggleSidebar')">
+      <IconBurger class="size-6" :class="{ active: expanded }" />
+    </button>
+    <div id="header-target" class="ml-auto flex items-center gap-1 md:gap-3" />
+  </div>
+
+  <aside
+    v-bind="$attrs"
+    class="fixed -left-40 top-0 z-20 lg:left-0 h-full w-40 bg-white pt-8 lg:pt-0 shadow transition dark:bg-gray-900 dark:text-white"
+    :class="{'translate-x-40': expanded}">
+    <ul
+      class=" gap-3 ">
       <li class="w-full">
         <RouterLink
           :to="{ name: 'books' }"
@@ -72,40 +88,48 @@ const bookID = computed(() => {
           <span>Media</span>
         </RouterLink>
       </li>
-      <!-- <hr class="my-1"> -->
-      <li v-if="route.name === 'books'" class="w-full">
-        <RouterLink
-          :to="{ name: 'book-create' }"
-          class="sidebar-link flex items-center gap-2"
-          active-class="sidebar-link-active">
-          <svg class="inline size-6" fill="none">
-            <use xlink:href="/icons/iconSprite.svg#bookAdd" />
-          </svg>
-          <span>Create</span>
-        </RouterLink>
-      </li>
-      <li v-if="route.name === 'book-update'" class="w-full">
-        <RouterLink
-          :to="{ name: 'book-view' }"
-          class="sidebar-link flex items-center gap-2"
-          active-class="sidebar-link-active">
-          <svg class="inline size-6" fill="none">
-            <use xlink:href="/icons/iconSprite.svg#openBook" />
-          </svg>
-          <span>View</span>
-        </RouterLink>
-      </li>
-      <li v-if="['book-view', 'comics-view'].includes(routeName)" class="w-full">
-        <RouterLink
-          :to="{ name: 'book-update', params: { id: bookID } }"
-          class="sidebar-link flex items-center gap-2"
-          active-class="sidebar-link-active">
-          <svg class="inline size-6" fill="none">
-            <use xlink:href="/icons/iconSprite.svg#openBook" />
-          </svg>
-          <span>Update</span>
-        </RouterLink>
-      </li>
+      <template v-if="route.name === 'books'">
+        <hr class="my-1">
+        <li class="w-full">
+          <RouterLink
+            :to="{ name: 'book-create' }"
+            class="sidebar-link flex items-center gap-2"
+            active-class="sidebar-link-active">
+            <svg class="inline size-6" fill="none">
+              <use xlink:href="/icons/iconSprite.svg#bookAdd" />
+            </svg>
+            <span>Create</span>
+          </RouterLink>
+        </li>
+      </template>
+      <template v-if="route.name === 'book-update'">
+        <hr class="my-1">
+        <li class="w-full">
+          <RouterLink
+            :to="{ name: 'book-view' }"
+            class="sidebar-link flex items-center gap-2"
+            active-class="sidebar-link-active">
+            <svg class="inline size-6" fill="none">
+              <use xlink:href="/icons/iconSprite.svg#openBook" />
+            </svg>
+            <span>View</span>
+          </RouterLink>
+        </li>
+      </template>
+      <template v-if="['book-view', 'comics-view'].includes(routeName)">
+        <hr class="my-1">
+        <li class="w-full">
+          <RouterLink
+            :to="{ name: 'book-update', params: { id: bookID } }"
+            class="sidebar-link flex items-center gap-2"
+            active-class="sidebar-link-active">
+            <svg class="inline size-6" fill="none">
+              <use xlink:href="/icons/iconSprite.svg#openBook" />
+            </svg>
+            <span>Update</span>
+          </RouterLink>
+        </li>
+      </template>
       <hr class="my-1">
 
       <!-- 			<li class="px-4">
diff --git a/src/layouts/LayoutMain.vue b/src/layouts/LayoutMain.vue
index f7e435e..3cb9d5d 100644
--- a/src/layouts/LayoutMain.vue
+++ b/src/layouts/LayoutMain.vue
@@ -1,34 +1,37 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref } from 'vue';
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
 import { useScroll } from '@/composables/scroll';
 
+import TheSidebar from '@/components/TheSidebar.vue';
 import BtnScrollToTop from '@/components/BtnScrollToTop.vue';
-import TheHeader from '@/components/TheHeader.vue';
 
-const { btnTopShow, scrollingProgress, observedElement, scrollTo, throttleScroll } = useScroll();
+
+const { btnTopShow, scrollingProgress, scrollTo, throttleScroll } = useScroll();
+
+const route = useRoute();
+const sidebarShow = ref(false);
+
+watch(
+  () => route.name,
+  () => (sidebarShow.value = false),
+);
 
 onMounted(() => {
-	window.addEventListener('scroll', throttleScroll, { passive: true });
-	observedElement.value = document.documentElement;
+  document.addEventListener('scroll', throttleScroll, { passive: true });
 });
-
 onBeforeUnmount(() => {
-	window.removeEventListener('scroll', throttleScroll);
+  document.removeEventListener('scroll', throttleScroll);
 });
-
 document.documentElement.classList.add('scrollbar-gutter');
 </script>
 <template>
-  <div
-    id="layout"
-    class="min-h-full">
-    <TheHeader class="sticky top-0 z-10" />
-    <router-view
-      :progress="scrollingProgress.progress"
-      class="px-2 lg:px-4" />
+  <div id="layout" class="relative flex min-h-full flex-col lg:flex-row">
+    <TheSidebar class="" :expanded="sidebarShow" @toggle-sidebar="sidebarShow = !sidebarShow" />
+    <router-view :progress="scrollingProgress.progress" class="relative px-2 lg:left-40" />
     <BtnScrollToTop
       v-if="btnTopShow"
-      class="fixed bottom-20 right-5 z-10 flex size-10 items-center justify-center"
+      class="fixed bottom-20 right-10 z-10 flex size-10 items-center justify-center"
       @click="scrollTo()" />
   </div>
 </template>
diff --git a/src/layouts/LayoutSidebar.vue b/src/layouts/LayoutSidebar.vue
deleted file mode 100644
index 50c8871..0000000
--- a/src/layouts/LayoutSidebar.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref } from 'vue';
-import { useScroll } from '@/composables/scroll';
-
-import TheSidebar from '@/components/TheSidebar.vue';
-import BtnScrollToTop from '@/components/BtnScrollToTop.vue';
-
-const { btnTopShow, scrollingProgress, scrollTo, throttleScroll } = useScroll();
-
-onMounted(() => {
-  document.addEventListener('scroll', throttleScroll, { passive: true });
-});
-onBeforeUnmount(() => {
-  document.removeEventListener('scroll', throttleScroll);
-});
-document.documentElement.classList.add('scrollbar-gutter');
-</script>
-<template>
-  <div id="layout" class="relative flex min-h-full gap-2">
-    <TheSidebar class="fixed left-0 top-0 z-10 h-full w-48 overflow-x-hidden overflow-y-scroll dark:bg-gray-900" />
-    <router-view :progress="scrollingProgress.progress" class="relative left-48 w-[calc(100%_-_12rem)] pl-5 pr-1" />
-    <BtnScrollToTop
-      v-if="btnTopShow"
-      class="fixed bottom-20 right-10 z-10 flex size-10 items-center justify-center"
-      @click="scrollTo()" />
-  </div>
-</template>
diff --git a/src/router.ts b/src/router.ts
index 01f5597..4b1c5dd 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -1,15 +1,9 @@
 import { createRouter, createWebHistory, RouteRecordRaw, RouterOptions } from 'vue-router';
-import { isSmallDevice } from './utils/helper';
-
-const LayoutMain = () => import('./layouts/LayoutMain.vue');
-const LayoutSidebar = () => import('./layouts/LayoutSidebar.vue');
-const BookTable = () => import('./views/BookTable.vue');
-const BookList = () => import('./views/BookList.vue');
 
 const routes: RouteRecordRaw[] = [
 	{
 		path: '/',
-		component: isSmallDevice() ? LayoutMain : LayoutSidebar,
+		component: () => import('./layouts/LayoutMain.vue'),
 		children: [
 			{
 				path: '',
@@ -23,7 +17,7 @@ const routes: RouteRecordRaw[] = [
 			{
 				path: '/books',
 				name: 'books',
-				component: isSmallDevice() ? BookList : BookTable,
+				component: () => import('./views/books/BooksMain.vue'),
 			},
 			{
 				path: '/book/:id',
diff --git a/src/views/BookList.vue b/src/views/books/BookList.vue
similarity index 98%
rename from src/views/BookList.vue
rename to src/views/books/BookList.vue
index 91a56e2..e30ab31 100644
--- a/src/views/BookList.vue
+++ b/src/views/books/BookList.vue
@@ -61,7 +61,7 @@ getTags();
         <div class="truncate font-bold">
           {{ book.name }}
         </div>
-        <div class="line-clamp-2 break-all">
+        <div class="line-clamp-2">
           {{ book.description }}
         </div>
       </div>
diff --git a/src/views/BookTable.vue b/src/views/books/BookTable.vue
similarity index 99%
rename from src/views/BookTable.vue
rename to src/views/books/BookTable.vue
index 11725af..64fa5a5 100644
--- a/src/views/BookTable.vue
+++ b/src/views/books/BookTable.vue
@@ -219,7 +219,7 @@ if (!series.value) getSeries({ perPage: 100, page: 1, sort: 'name' });
               </button>
             </div>
           </th>
-          <th class="th sticky top-0" :class="{ '!border-black ': scrolled }">
+          <th class="th sticky top-0 w-24" :class="{ '!border-black ': scrolled }">
             <div
               class="flex flex-row items-center"
               :class="{ 'text-emerald-300': queryBooks.sort.includes('count') }">
diff --git a/src/views/books/BooksMain.vue b/src/views/books/BooksMain.vue
new file mode 100644
index 0000000..d798601
--- /dev/null
+++ b/src/views/books/BooksMain.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import {  defineAsyncComponent, onMounted, onUnmounted, ref } from 'vue'
+import { isSmallDevice } from '../../utils/helper';
+
+const BookTable = defineAsyncComponent(() =>
+  import('./BookTable.vue')
+)
+const BookList = defineAsyncComponent(() =>
+  import('./BookList.vue')
+)
+
+const smallDedice = ref(isSmallDevice());
+
+function updateDeviceSize() {
+    smallDedice.value = isSmallDevice();
+}
+
+onMounted(() => {
+    window.addEventListener('resize', updateDeviceSize);
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', updateDeviceSize);
+  });
+</script>
+
+
+<template>
+  <component :is="smallDedice ? BookList : BookTable" />
+</template>
\ No newline at end of file