removed tabs

Author: yel-hadd

docs/.vuepress/theme/drawer/Drawer.vue

@@ -11,21 +11,15 @@
           <p @click="onCloseDrawer" class="drawer-cross__text">close</p>
         </div>
       </div>
-      <DrawerTabs v-model="selectedTabIndex" :data="tabs"/>
       <main>
-       <div class="drawer-main">
-         <div class="drawer-main__wrapper">
-           <div class="drawer-main__breadcrumb">
-            <!--
-              <p v-if="drawerArticleResult.length" class="drawer-main__breadcrumb__text">Home
-                <img :src="withBase('/arrows/arrow-right-breadcrumb.svg')" alt="breadcrumb icon"/>
-                Documentation
-              </p>
-            -->
-           </div>
-           <DrawerSearchResult :modelValue="modelValue" :data="drawerArticleResult"/>
-         </div>
-       </div>
+        <div class="drawer-main">
+          <div class="drawer-main__wrapper">
+            <div class="drawer-main__breadcrumb">
+              <!-- Optional breadcrumb can stay here -->
+            </div>
+            <DrawerSearchResult :modelValue="modelValue" :data="drawerArticleResult"/>
+          </div>
+        </div>
         <Footer v-if="isOpenDrawer && isMobileWidth" class="drawer-footer__mobile"/>
       </main>
     </div>
@@ -34,10 +28,9 @@
 </template>
 
 <script setup>
-import {withBase} from "@vuepress/client";
+import { withBase } from "@vuepress/client";
 import Footer from "../footer/Footer.vue";
-import {computed, ref, watch} from "vue";
-import DrawerTabs from "./DrawerTabs.vue";
+import { computed, ref, watch } from "vue";
 import DrawerSearchResult from "./DrawerSearchResult.vue";
 
 const props = defineProps({
@@ -46,7 +39,7 @@ const props = defineProps({
     required: true,
     default: false
   },
-  isMobileWidth:{
+  isMobileWidth: {
     type: Boolean,
     required: true,
     default: false
@@ -61,39 +54,21 @@ const props = defineProps({
     required: true,
     default: () => []
   }
-})
-
-
-const emit = defineEmits(['closeDrawer', 'update:modelValue'])
-
-const selectedTabIndex = ref(0);
-
-const tabs = computed(() => {
-    const uniqueTitles = props.homeLayoutSearchResult.reduce((unique, result) => {
-        const title = result.hierarchy?.lvl0;
-        unique[title] = unique[title] || { title, numberResults: 0 };
-        unique[title].numberResults++;
-        return unique;
-    }, {});
-    return Object.values(uniqueTitles);
 });
 
+const emit = defineEmits(['closeDrawer', 'update:modelValue']);
+
 const drawerArticleResult = computed(() => {
-  if (selectedTabIndex.value === -1) {
-    return props.homeLayoutSearchResult || [];
-  }
-  const selectedTab = tabs.value[selectedTabIndex.value];
-  return props.homeLayoutSearchResult.filter(result => result.hierarchy.lvl0 === selectedTab?.title);
-})
+  return props.homeLayoutSearchResult; // Now directly returning all results since there are no tabs
+});
 
 const onCloseDrawer = () => {
-  emit('closeDrawer')
-  selectedTabIndex.value = 0
+  emit('closeDrawer');
 }
 
 watch(() => props.isOpenDrawer, () => {
-  document.body.classList.toggle('disable-scroll', props.isOpenDrawer)
-})
+  document.body.classList.toggle('disable-scroll', props.isOpenDrawer);
+});
 </script>
 
 <style lang="stylus">

docs/.vuepress/theme/drawer/DrawerSearchResult.vue

@@ -1,12 +1,15 @@
 <template>
   <section v-if="data.length" class="drawer-main__search-results">
-    <template v-for="(i) in visibleResults" :key="i">
-      <div class="search-result" @click="gotTo(parseUrl(i.url))">
-        <div class="search-result__title" v-html="getTitleForArticle(i.title)"></div>
-        <div class="search-result__breadcrumb" v-html="getBreadcrumbsForArticle(i.title)"></div>
-        <div class="search-result__text" v-html="formatPreviewMarkdown(i.preview)"></div>
+    <template v-for="(item, index) in visibleResults" :key="item.objectID || index">
+      <div class="search-result" @click="gotTo(parseUrl(item.url))">
+        <div class="search-result__title" v-html="getTitleForArticle(item.title)"></div>
+        <div class="search-result__breadcrumb" v-html="getBreadcrumbsForArticle(item.title)"></div>
+        <div class="search-result__text" v-html="formatPreviewMarkdown(item.preview)"></div>
       </div>
     </template>
+    <div v-if="countOfHiddenResults > 0" class="show-more" @click="showAllHiddenResult">
+      <p>Show {{ countOfHiddenResults }} more results</p>
+    </div>
   </section>
   <div v-else>
     <p v-if="!modelValue.length" class="no_results">Write your search query, then press Enter or click the search button.</p>
@@ -17,10 +20,8 @@
 import { computed, inject, ref } from "vue";
 import { marked } from "marked";
 
-// Create a new renderer instance
 const renderer = new marked.Renderer();
 
-// Redefine how headers are processed
 renderer.heading = function (text) {
   // check if text is a string
   if (typeof text !== "string") {
@@ -29,13 +30,15 @@ renderer.heading = function (text) {
   return `<strong>${text}</strong>`;
 };
 
-// Define image rendering to exclude images
 renderer.image = function () {
-  return ""; // Exclude image tags by returning an empty string
+  return "";
 };
 
 const formatPreviewMarkdown = (markdown) => {
-  return marked(markdown, { renderer });
+  let md = marked(markdown, { renderer });
+  // remove all <br> tags
+  md = md.replace(/<br>/g, "");
+  return md;
 };
 
 const props = defineProps({
@@ -49,7 +52,7 @@ const props = defineProps({
   },
 });
 
-const { MAX_VISIBLE_RESULT, MAX_VISIBLE_ROWS } = inject('themeConfig');
+const { MAX_VISIBLE_RESULT } = inject('themeConfig');
 const isShowAllResult = ref(false);
 
 const gotTo = (url) => {
@@ -82,10 +85,6 @@ const showAllHiddenResult = () => {
   isShowAllResult.value = true;
 };
 
-const collapseResults = () => {
-  isShowAllResult.value = false;
-};
-
 const getTitleForArticle = (title) => {
   let sliced = title.split("->").map((part) => part.trim());
   return sliced.pop();
@@ -102,35 +101,26 @@ const getBreadcrumbsForArticle = (title) => {
 <style lang="stylus">
 @import "../../styles/config.styl";
 
-.algolia-docsearch-suggestion--highlight {
-  background: $drawerHighlightTextBgColor !important;
-  color: $drawerHighlightTextColor !important;
-}
-
 .drawer-main__search-results {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  column-gap: $drawerSearchColumnGap;
-  row-gap: $drawerSearchRowGap;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); // Flexible grid with min width
+  gap: 1.5rem; // Increased gap for better spacing
+  padding: 1rem; // Padding around the results area
 }
 
 .search-result {
   padding: 1rem;
   border: 1px solid $drawerSearchBorderColor;
-  border-radius: 8px;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  gap: $drawerOneSearchResultGap;
-  width: 100%;
-  cursor: pointer;
+  border-radius: 10px; // More rounded corners
+  background: $searchResultBackgroundColor; // Added background color for better visibility
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); // Shadow for elevation
   transition: box-shadow 0.3s ease, transform 0.3s ease;
+  cursor: pointer;
+  overflow: hidden;
 
   &:hover {
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); // Increased shadow on hover
     transform: translateY(-2px);
-
     .search-result__title {
       color: $mainColor;
       text-decoration: underline;
@@ -140,51 +130,54 @@ const getBreadcrumbsForArticle = (title) => {
   &__title {
     font-size: $drawerSearchResultTitleFontSize;
     font-weight: $drawerSearchResultTitleWeight;
-    line-height: $drawerSearchResultTitleLineHeight;
     color: $drawerSearchResultTitleColor;
     margin: 0;
+    line-height: 1.4; // Increased line height for better readability
   }
 
   &__text {
     font-size: $drawerSearchResultTextFontSize;
     line-height: $drawerSearchResultTextLineHeight;
     color: $drawerSearchResultTextColor;
-    margin: 0;
+    margin: 0.5rem 0; // Added margin for spacing
     overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
-    -webkit-line-clamp: v-bind(MAX_VISIBLE_ROWS);
+    -webkit-line-clamp: 3; // Limit preview text lines for coherence
     -webkit-box-decoration-break: clone;
     box-decoration-break: clone;
   }
 
   &__breadcrumb {
     font-size: $drawerSearchResultBreadcrumbTextSize;
-    line-height: $drawerSearchResultBreadcrumbLineHeight;
     color: $drawerSearchResultBreadcrumbColor;
     margin: 0;
   }
 }
 
-.no_results {
-  font-size: 1.5625rem;
+.show-more {
   text-align: center;
+  margin: 1rem 0;
+  cursor: pointer;
 
-  &__link {
+  p {
     color: $mainColor;
-    &:hover {
-      text-decoration: underline;
-    }
+    font-weight: bold;
   }
 }
 
+.no_results {
+  font-size: 1.5625rem;
+  text-align: center;
+}
+
 @media (max-width: $mobileBreakpoint) {
   .drawer-main__search-results {
-    grid-template-columns: repeat(1, 1fr);
+    grid-template-columns: 1fr; // Single column on mobile
   }
 
   .no_results {
     font-size: 1.25rem;
   }
 }
-</style>
+</style>