feat: add ripple effect, update theme styles and layout

src/App.vue

@@ -1,10 +1,35 @@
 <script setup>
-import Main from './components/Main.vue'
+import { ref } from 'vue'
+import Header from './components/Header.vue'
+import Footer from './components/Footer.vue'
+import Sidebar from './components/Sidebar.vue'
+
+const isSidebarOpen = ref(true)
 </script>
 
 <template>
-  <Main />
+  <Header @toggle-sidebar="isSidebarOpen = !isSidebarOpen" />
+  <div class="app-body">
+    <Sidebar :is-open="isSidebarOpen" />
+    <main class="main-content">
+      <router-view />
+    </main>
+  </div>
+  <Footer />
 </template>
 
 <style scoped>
+.app-body {
+  display: flex;
+  flex: 1;
+  width: 100%;
+  position: relative;
+}
+
+.main-content {
+  flex: 1;
+  padding: 2rem;
+  width: 100%;
+  max-width: 100%; /* Ensure it doesn't overflow */
+}
 </style>