feat: wip Notification UI starter

web/components/Notifications/OpenButton.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { useNotificationsStore } from '~/store/notifications';
+
+const notificationsStore = useNotificationsStore();
+</script>
+
+<template>
+  <BrandButton text="My Button" @click="notificationsStore.toggle" />
+
+  <NotificationsSidebar />
+</template>
+

web/components/Notifications/Sidebar.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+
+import { useNotificationsStore } from '~/store/notifications';
+
+const notificationsStore = useNotificationsStore();
+const { isOpen } = storeToRefs(notificationsStore);
+</script>
+
+<template>
+  <div v-if="isOpen" class="h-full w-full max-w-36">
+    This is my sidebar
+  </div>
+</template>

web/components/UserProfile.ce.vue

@@ -127,6 +127,8 @@ onBeforeMount(() => {
 
       <div class="block w-2px h-24px bg-gamma" />
 
+      <NotificationsOpenButton />
+
       <OnClickOutside class="flex items-center justify-end h-full" :options="{ ignore: [clickOutsideIgnoreTarget] }" @trigger="outsideDropdown">
         <UpcDropdownTrigger ref="clickOutsideIgnoreTarget" :t="t" />
         <UpcDropdown ref="clickOutsideTarget" :t="t" />

web/nuxt.config.ts

@@ -55,6 +55,7 @@ export default defineNuxtConfig({
   components: [
     { path: '~/components/Brand', prefix: 'Brand' },
     { path: '~/components/ConnectSettings', prefix: 'ConnectSettings' },
+    { path: '~/components/Notifications', prefix: 'Notifications' },
     { path: '~/components/Ui', prefix: 'Ui' },
     { path: '~/components/UserProfile', prefix: 'Upc' },
     { path: '~/components/UpdateOs', prefix: 'UpdateOs' },

web/store/notifications.ts

@@ -0,0 +1,24 @@
+import { defineStore, createPinia, setActivePinia } from 'pinia';
+/**
+ * @see https://stackoverflow.com/questions/73476371/using-pinia-with-vue-js-web-components
+ * @see https://github.com/vuejs/pinia/discussions/1085
+ */
+setActivePinia(createPinia());
+
+export const useNotificationsStore = defineStore('notifications', () => {
+
+  const isOpen = ref<boolean>(false);
+
+  const title = computed<string>(() => isOpen.value ? 'Notifications Are Open' : 'Notifications Are Closed');
+
+  const toggle = () => isOpen.value = !isOpen.value;
+
+  return {
+    // state
+    isOpen,
+    // getters
+    title,
+    // actions
+    toggle,
+  };
+});