Merge pull request #16 from MartinsOnuoha/FEAT-side-panel

✨ feat(appsidepanel.vue): add side panel to view statements

src/assets/styles/color-scheme.scss

@@ -2,6 +2,7 @@ body[color-scheme='dark'] {
   @import '@/components/AppFilter/AppFilter.dark';
   @import '@/components/AppHeader/HeaderActions.dark';
   @import '@/components/AppSideBanner/AppSideBanner.dark';
+  @import '@/components/AppSidePanel/AppSidePanel.dark';
   @import '@/components/AppStatementCard/AppStatementCard.dark';
   @import '@/components/AppToggleDarkMode/AppToggleDarkMode.dark';
   @import '@/views/HomeView.dark';
@@ -12,6 +13,7 @@ body[color-scheme='light'] {
   @import '@/components/AppFilter/AppFilter';
   @import '@/components/AppHeader/HeaderActions';
   @import '@/components/AppSideBanner/AppSideBanner';
+  @import '@/components/AppSidePanel/AppSidePanel';
   @import '@/components/AppStatementCard/AppStatementCard';
   @import '@/components/AppToggleDarkMode/AppToggleDarkMode';
   @import '@/views/HomeView';

src/assets/styles/variables.scss

@@ -1,6 +1,6 @@
 :root {
   --color-dark: #2e2e41;
-  --color-dark-light: #272c3a;
+  --color-dark-darker: #272c3a;
   --color-dark-text: #242424;
   --color-dark-icon: #4b5563;
   --color-ghostwhite: ghostwhite;

src/components/AppSidePanel/AppSidePanel.vue

@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import type { Statement } from '@/stores/db'
+import MdiClose from '@/components/Icons/MdiClose.vue'
+import AppCategory from '@/components/AppCategory/AppCategory.vue'
+import { useDBStore } from '@/stores/db'
+
+const emit = defineEmits(['panel:close'])
+
+const props = defineProps({
+  open: { type: Boolean, default: false },
+  statement: { type: Object as PropType<Statement | null> }
+})
+
+const closePanel = () => {
+  emit('panel:close')
+}
+const getCategories = useDBStore().categories.filter(
+  (category) => props.statement?.categories.includes(category.id)
+)
+</script>
+
+<template>
+  <div v-if="statement" v-show="open" class="AppSidePanel">
+    <div class="AppSidePanel__overlay" @click="closePanel"></div>
+    <div class="AppSidePanel__content">
+      <div class="AppSidePanel__header">
+        <button @click="closePanel"><MdiClose /></button>
+      </div>
+      <h2 class="AppSidePanel__title">{{ statement.description }}</h2>
+      <div class="mt-3 mb-3">
+        <AppCategory v-for="(category, index) in getCategories" :key="index" :category="category" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@import 'AppSidePanel';
+@media (prefers-color-scheme: dark) {
+  @import 'AppSidePanel.dark';
+}
+</style>

src/components/AppSidePanel/_AppSidePanel.dark.scss

@@ -0,0 +1,12 @@
+.AppSidePanel {
+  &__content {
+    @apply bg-[var(--color-dark)] text-gray-300;
+  }
+  &__header {
+    button {
+      &:hover {
+        @apply bg-gray-800;
+      }
+    }
+  }
+}

src/components/AppSidePanel/_AppSidePanel.scss

@@ -0,0 +1,23 @@
+.AppSidePanel {
+  @apply h-screen w-full absolute flex z-50 transition-all;
+  &__overlay {
+    @apply w-full bg-opacity-90 bg-black flex justify-center items-center;
+  }
+  &__content {
+    @apply w-3/6 bg-white shadow-2xl text-gray-800 p-8;
+  }
+  &__header {
+    button {
+      @apply border rounded-full p-2 mb-14 text-lg transition-all;
+      &:hover {
+        @apply bg-[var(--color-ghostwhite)] text-red-500;
+      }
+    }
+  }
+  &__title {
+    @apply text-2xl;
+  }
+  &__description {
+    @apply border mt-5 text-xl text-gray-700 p-5 rounded-lg;
+  }
+}

src/components/AppStatementCard/_AppStatementCard.dark.scss

@@ -2,5 +2,5 @@
   @apply rounded-lg bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 p-1;
 }
 .AppStatementCard {
-  @apply shadow-2xl border-none bg-[var(--color-dark)] text-[var(--color-ghostwhite)] hover:bg-gradient-to-tr from-pink-900 via-[var(--color-dark)] to-[var(--color-dark)];
+  @apply shadow-2xl border-none bg-[var(--color-dark)] text-gray-300 hover:bg-gradient-to-tr from-pink-900 via-[var(--color-dark)] to-[var(--color-dark)];
 }

src/components/Icons/MdiClose.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+    <path
+      fill="currentColor"
+      d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z"
+    ></path>
+  </svg>
+</template>

src/views/HomeView.vue

@@ -1,18 +1,27 @@
 <script setup lang="ts">
-import AppSidePanel from '@/components/AppSideBanner/AppSideBanner.vue'
+import { type Ref, ref } from 'vue'
+import AppSideBanner from '@/components/AppSideBanner/AppSideBanner.vue'
 import AppStatementCard from '@/components/AppStatementCard/AppStatementCard.vue'
 import AppFilter from '@/components/AppFilter/AppFilter.vue'
-import { useDBStore } from '@/stores/db'
+import { type Statement, useDBStore } from '@/stores/db'
 import HeaderActions from '@/components/AppHeader/HeaderActions.vue'
-import { ref } from 'vue'
+import AppSidePanel from '@/components/AppSidePanel/AppSidePanel.vue'
 
 const { formattedStatements } = useDBStore()
 const statementsList = ref(formattedStatements)
+const selectedStatement: Ref<Statement | null> = ref(null)
+
+const selectStatement = (statement: Statement) => {
+  selectedStatement.value = statement
+}
+const deselectStatement = () => {
+  selectedStatement.value = null
+}
 </script>
 
 <template>
   <section class="HomeView">
-    <AppSidePanel class="w-2/4" />
+    <AppSideBanner class="w-2/4" />
     <main>
       <header class="HomeView__header">
         <AppFilter />
@@ -23,9 +32,17 @@ const statementsList = ref(formattedStatements)
           v-for="(statement, index) in statementsList"
           :key="index"
           :statement="statement"
+          @click="selectStatement(statement)"
         />
       </section>
     </main>
+    <AppSidePanel
+      :open="!!selectedStatement"
+      @panel:close="deselectStatement"
+      :statement="selectedStatement"
+    >
+      {{ selectedStatement }}
+    </AppSidePanel>
   </section>
 </template>
 

src/views/_HomeView.scss

@@ -1,5 +1,5 @@
 .HomeView {
-  @apply flex h-screen;
+  @apply flex h-screen relative;
   background-color: var(--color-ghostwhite);
 
   main {