Merge branch 'development' of https://github.com/KucingOyenBarbar/sma…

…rtnation.id into development
FarhannDev · Nov 8, 2023 · 4a24899 · 4a24899
2 parents a3453ac + f191c37
commit 4a24899
Show file tree

Hide file tree

Showing 16 changed files with 620 additions and 1,963 deletions.
diff --git a/components/gallery/GalleryCardAlbum.vue b/components/gallery/GalleryCardAlbum.vue
@@ -1,22 +1,22 @@
 <script lang="ts" setup>
-const props = defineProps({ title: { type: String }, created: { type: String }, albumImage: { type: String }, total: { type: Number }, redirect: { type: String } })
+defineProps({ title: { type: String }, created: { type: String }, albumImage: { type: String }, total: { type: Number }, redirect: { type: String } })
 
 
 </script>
 
 <template>
   <div class="card album-card">
-    <NuxtLink :to="redirect" aria-label="Lihat Selengkapnya" title="Lihat Selengkapnya">
+    <NuxtLink :to="`/gallery/${redirect}`" aria-label="Lihat Selengkapnya" :title="`Album ${title}`">
       <NuxtImg class="card-img-top img-fluid album-cover__images" :src="albumImage" alt="Album 1" loading="lazy"
         format="webp" />
     </NuxtLink>
 
 
     <div class="card-body">
       <div class="d-flex flex-column justify-content-start align-self-stretch">
-        <NuxtLink class="album-cover__title" :to="'/gallery/album-isna-2016'" aria-label="Lihat Selengkapnya"
+        <NuxtLink class="album-cover__title" :to="`/gallery/${redirect}`" aria-label="Lihat Selengkapnya"
           title="Lihat Selengkapnya">
-          {{ title }}
+          {{ `Album ${title}` }}
         </NuxtLink>
 
         <h5 class="card-subtitle album-cover__subtitle ">

diff --git a/components/navbar/NavbarFixed.vue b/components/navbar/NavbarFixed.vue
@@ -53,12 +53,14 @@ const { data: categoriesEvents } = await useFetch("/api/categories", {
   },
 });
 
-const toggleMenu = () => {
-  const navbar = document.querySelector(".navbar-collapse");
-  return navbar?.classList.contains("show")
-    ? navbar.classList.remove("show")
-    : navbar?.classList.add("show");
-};
+const toggleMenu = (() => {
+  const navbar = document.querySelector('.navbar-collapse')
+  return navbar?.classList.contains('show')
+    ? navbar.classList.remove('show')
+    : navbar?.classList.add('show')
+})
+
+
 </script>
 
 <template>
@@ -170,20 +172,10 @@ const toggleMenu = () => {
           </li>
 
           <!-- Show Dropdown display in laptop or desktop -->
-          <li
-            @mouseenter="showDropdown(true)"
-            @mouseleave="showDropdown(false)"
-            class="nav-item dropdown d-none d-lg-block"
-          >
-            <NuxtLink
-              :class="`nav-link mx-md-1  ${
-                route.path === '/articles' ? 'active' : ''
-              }`"
-              to="/articles"
-              role="button"
-              data-bs-toggle="dropdown1"
-              aria-expanded="false"
-            >
+          <li @mouseenter="showDropdown(true)" @mouseleave="showDropdown(false)"
+            class="nav-item dropdown d-none d-lg-block">
+            <NuxtLink :class="`nav-link mx-md-1  ${route.path === '/articles' ? 'active' : ''
+              }`" to="/articles" role="button" data-bs-toggle="dropdown1" aria-expanded="false">
               Berita
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -208,20 +200,10 @@ const toggleMenu = () => {
               </li>
             </ul>
           </li>
-          <li
-            @mouseenter="showDropdownEvents(true)"
-            @mouseleave="showDropdownEvents(false)"
-            class="nav-item dropdown d-none d-lg-block"
-          >
-            <NuxtLink
-              :class="`nav-link mx-md-1  ${
-                route.path === '/events' ? 'active' : ''
-              }`"
-              to="/events"
-              role="button"
-              data-bs-toggle="dropdown1"
-              aria-expanded="false"
-            >
+          <li @mouseenter="showDropdownEvents(true)" @mouseleave="showDropdownEvents(false)"
+            class="nav-item dropdown d-none d-lg-block">
+            <NuxtLink :class="`nav-link mx-md-1  ${route.path === '/events' ? 'active' : ''
+              }`" to="/events" role="button" data-bs-toggle="dropdown1" aria-expanded="false">
               Acara
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -249,15 +231,8 @@ const toggleMenu = () => {
 
           <!-- Showing dropdown display in mobile or tablet -->
           <li class="nav-item dropdown d-lg-none d-md-block">
-            <NuxtLink
-              :class="`nav-link mx-md-1  ${
-                route.path === '/articles' ? 'active' : ''
-              }`"
-              to="/articles"
-              role="button"
-              data-bs-toggle="dropdown"
-              aria-expanded="false"
-            >
+            <NuxtLink :class="`nav-link mx-md-1  ${route.path === '/articles' ? 'active' : ''
+              }`" to="/articles" role="button" data-bs-toggle="dropdown" aria-expanded="false">
               Berita
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -282,26 +257,15 @@ const toggleMenu = () => {
                 >
               </li>
               <li v-for="category in categories" :key="category.id">
-                <NuxtLink
-                  @click="toggleMenu()"
-                  class="dropdown-item"
-                  :to="`/category/${category.slug}`"
-                  >{{ category.name }}</NuxtLink
-                >
+                <NuxtLink @click="toggleMenu()" class="dropdown-item" :to="`/category/${category.slug}`">{{ category.name
+                }}</NuxtLink>
               </li>
             </ul>
           </li>
 
           <li class="nav-item dropdown d-lg-none d-md-block">
-            <NuxtLink
-              :class="`nav-link mx-md-1  ${
-                route.path === '/events' ? 'active' : ''
-              }`"
-              to="/events"
-              role="button"
-              data-bs-toggle="dropdown"
-              aria-expanded="false"
-            >
+            <NuxtLink :class="`nav-link mx-md-1  ${route.path === '/events' ? 'active' : ''
+              }`" to="/events" role="button" data-bs-toggle="dropdown" aria-expanded="false">
               Acara
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -336,13 +300,8 @@ const toggleMenu = () => {
           </li>
 
           <li class="nav-item">
-            <NuxtLink
-              @click="toggleMenu()"
-              :class="`nav-link mx-md-1  ${
-                route.path === '/gallery-smartnation' ? 'active' : ''
-              }`"
-              to="/gallery-smartnation"
-              >Galeri
+            <NuxtLink @click="toggleMenu()" :class="`nav-link mx-md-1  ${route.path === '/gallery-smartnation' ? 'active' : ''
+              }`" to="/gallery-smartnation">Galeri
             </NuxtLink>
           </li>
           <li class="nav-item">

diff --git a/components/navbar/NavbarSticky.vue b/components/navbar/NavbarSticky.vue
@@ -13,6 +13,7 @@ const isDropdownEvents: globalThis.Ref<boolean> = ref(false);
 const isDropdownTranslate: globalThis.Ref<boolean> = ref(false);
 const isLanguage: globalThis.Ref<string> = ref("ID");
 
+
 const toggleColorMode = () => {
   const newColorMode: "dark" | "light" =
     colorMode.preference === "dark" ? "light" : "dark";
@@ -78,6 +79,7 @@ const toggleMenu = (() => {
     : navbar?.classList.add('show')
 })
 
+const routePathMenu: globalThis.ComputedRef<string | string[]> = computed(() => route.params.id)
 
 </script>
 
@@ -141,7 +143,8 @@ const toggleMenu = (() => {
           <!-- Show Dropdown display in laptop or desktop -->
           <li @mouseenter="showDropdown(true)" @mouseleave="showDropdown(false)"
             class="nav-item dropdown d-none d-lg-block">
-            <NuxtLink :class="`nav-link mx-md-1  ${route.path === '/articles' ? 'active' : ''
+            <NuxtLink :class="`nav-link mx-md-1  ${route.path === '/articles'
+              || route.path == `/category/${routePathMenu}` ? 'active' : ''
               }`" to="/articles" role="button" data-bs-toggle="dropdown1" aria-expanded="false">
               Berita
               <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="currentColor">
@@ -152,15 +155,18 @@ const toggleMenu = (() => {
             </NuxtLink>
             <ul class="dropdown-menu" :class="{ show: isDropdownVisible }">
               <li v-for="category in categories" :key="category.id">
-                <NuxtLink @click="toggleMenu" class="dropdown-item" :to="`/category/${category.slug}`">{{ category.name }}
+                <NuxtLink @click="toggleMenu" class="dropdown-item" :active-class="`active-menu`"
+                  :to="`/category/${category.slug}`">
+                  {{
+                    category.name }}
                 </NuxtLink>
               </li>
             </ul>
           </li>
           <li @mouseenter="showDropdownEvents(true)" @mouseleave="showDropdownEvents(false)"
             class="nav-item dropdown d-none d-lg-block">
-            <NuxtLink :class="`nav-link mx-md-1  ${route.path === '/events' ? 'active' : ''
-              }`" to="/events" role="button" data-bs-toggle="dropdown1" aria-expanded="false">
+            <NuxtLink :class="`nav-link mx-md-1  ${route.path === '/events' || route.path === `/events/category/${routePathMenu}` ? 'active' : ''
+              }`" to="#" role="button" data-bs-toggle="dropdown1" aria-expanded="false">
               Acara
               <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="currentColor">
                 <path
@@ -170,16 +176,18 @@ const toggleMenu = (() => {
             </NuxtLink>
             <ul class="dropdown-menu" :class="{ show: isDropdownEvents }">
               <li v-for="category in categoriesEvents" :key="category.id">
-                <NuxtLink @click="toggleMenu" class="dropdown-item" :to="`/events/category/${category.slug}`">{{
-                  category.name }}</NuxtLink>
+                <NuxtLink @click="toggleMenu" class="dropdown-item" :active-class="`active-menu`"
+                  :to="`/events/category/${category.slug}`">{{
+                    category.name }}</NuxtLink>
               </li>
 
             </ul>
           </li>
 
           <!-- Showing dropdown display in mobile or tablet -->
           <li class="nav-item dropdown d-lg-none d-md-block">
-            <NuxtLink :class="`nav-link mx-md-1  ${route.path === '/articles' ? 'active' : ''
+            <NuxtLink :class="`nav-link mx-md-1  ${route.path === '/articles'
+              || route.path == `/category/${routePathMenu}` ? 'active' : ''
               }`" to="/articles" role="button" data-bs-toggle="dropdown" aria-expanded="false">
               Berita
               <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
@@ -190,18 +198,20 @@ const toggleMenu = (() => {
             </NuxtLink>
             <ul class="dropdown-menu" :class="{ show: isDropdownVisible }">
               <li>
-                <NuxtLink @click="toggleMenu" class="dropdown-item" :to="`/articles`">Indeks</NuxtLink>
+                <NuxtLink @click="toggleMenu" class="dropdown-item" :active-class="`active-menu`" :to="`/articles`">Indeks
+                </NuxtLink>
               </li>
               <li v-for="category in categories" :key="category.id">
-                <NuxtLink @click="toggleMenu" class="dropdown-item" :to="`/category/${category.slug}`">{{ category.name }}
+                <NuxtLink @click="toggleMenu" class="dropdown-item" :active-class="`active-menu`"
+                  :to="`/category/${category.slug}`">{{ category.name }}
                 </NuxtLink>
               </li>
             </ul>
           </li>
 
           <li class="nav-item dropdown d-lg-none d-md-block">
-            <NuxtLink :class="`nav-link mx-md-1  ${route.path === '/events' ? 'active' : ''
-              }`" to="/events" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+            <NuxtLink :class="`nav-link mx-md-1  ${route.path === '/events' || route.path == `/events/category/${routePathMenu}` ? 'active' : ''
+              }`" to="/#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
               Acara
               <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
                 <path
@@ -210,19 +220,17 @@ const toggleMenu = (() => {
               </svg>
             </NuxtLink>
             <ul class="dropdown-menu" :class="{ show: isDropdownEvents }">
-              <li>
-                <NuxtLink @click="toggleMenu" class="dropdown-item" :to="`/events`">Indeks</NuxtLink>
-              </li>
               <li v-for="category in categoriesEvents" :key="category.id">
-                <NuxtLink @click="toggleMenu" class="dropdown-item" :to="`/events/category/${category.slug}`">{{
-                  category.name }}</NuxtLink>
+                <NuxtLink @click="toggleMenu" class="dropdown-item" :active-class="`active-menu`"
+                  :to="`/events/category/${category.slug}`">{{
+                    category.name }}</NuxtLink>
               </li>
             </ul>
           </li>
 
           <li class="nav-item">
-            <NuxtLink @click="toggleMenu" :class="`nav-link mx-md-1  ${route.path === '/gallery-smartnation' ? 'active' : ''
-              }`" to="/gallery-smartnation">Galeri
+            <NuxtLink @click="toggleMenu" :class="`nav-link mx-md-1  ${route.path === '/gallery' ? 'active' : ''
+              }`" to="/gallery">Galeri
             </NuxtLink>
           </li>
           <li class="nav-item">
@@ -375,8 +383,8 @@ const toggleMenu = (() => {
   color: #d71149 !important;
 }
 
-.dropdown-item.active {
-  color: var(--primary-600, #d71149) !important;
+.dropdown-item.active-menu {
+  color: #d71149 !important;
 }
 
 .navbar-sticky .bi {

diff --git a/pages/[id].vue b/pages/[id].vue
@@ -1,14 +1,12 @@
-<script setup>
-
-definePageMeta({ layout: "content-layout" })
+<script setup lang="ts">
 
+import { ColorModeInstance } from "@nuxtjs/color-mode/dist/runtime/types";
 import { posts } from "~/utils/data/getInitialPostsData"
 
+definePageMeta({ layout: "content-layout" })
 
 const route = useRoute();
-
 const postId = String(route.params.id)
-
 const post = posts.find(post => post.slug === postId)
 
 if (!post) {
@@ -23,11 +21,11 @@ useSeoMeta({
   title: post.title.rendered,
   description: post.excerpt.rendered,
   author: 'Smart Nation',
-  articleAuthor: 'Smart Nation',
-  articlePublishedTime: useFormatter(post.date_gmt),
-  articleModifiedTime: useFormatter(post.date_gmt),
-  articleSection: 'Smart City',
-  articleTag: post.categories,
+  // articleAuthor: 'Smart Nation',
+  // articlePublishedTime: useFormatter(post.date_gmt),
+  // articleModifiedTime: useFormatter(post.date_gmt),
+  // articleSection: 'Smart City',
+  // articleTag: post.categories,
   ogType: 'article',
   ogTitle: post.title.rendered,
   ogDescription: post.excerpt.rendered,
@@ -38,6 +36,9 @@ useSeoMeta({
   ogImageUrl: `https://smartnation.vercel.app/${post.featured_media}`,
 })
 
+
+const colorMode: ColorModeInstance = useColorMode()
+
 </script>
 
 <template>
@@ -69,6 +70,8 @@ useSeoMeta({
       </div>
     </section>
     <!-- section berita detail end -->
+
+    <hr v-if="colorMode.preference === 'dark'" class="text-secondary" />
   </main>
 </template>