documentation structure

src/components/layouts/CategoryLayout.vue

@@ -1,34 +1,35 @@
 <template>
   <main class="app-container">
-    <header>
-      <h2>Header Component</h2>
-    </header>
+    <Header />
     <section class="category-wrapper">
-      <aside>
-        <h3>Sidebar Component</h3>
-      </aside>
-      <router-view />
+      <Sidebar />
+      <div class="category-page">
+        <router-view />
+      </div>
     </section>
+    <Toast position="bottom-right"
+      :closeButtonProps="{ style: { justifyContent: 'flex-end', right: '0', margin: '0', outline: 'none', border: 'none' } }"
+      :pt="{
+        message: {
+          style: {
+            borderRadius: '10px'
+          }
+        },
+        messageContent: {
+          style: {
+            alignItems: 'center'
+          }
+        },
+        messageIcon: {
+          style: {
+            display: 'none'
+          }
+        }
+      }" />
   </main>
 </template>
 
 <script setup lang="ts">
-// Layout component for category pages
-</script>
-
-<style scoped>
-.app-container {
-  display: flex;
-  flex-direction: column;
-}
-
-.category-wrapper {
-  display: flex;
-}
-
-aside {
-  width: 250px;
-  background-color: #f5f5f5;
-  padding: 1rem;
-}
-</style>
+import Header from '../navs/Header.vue';
+import Sidebar from '../navs/Sidebar.vue';
+</script>