ini punya ahdan

components/Navbar.vue

@@ -1,25 +1,97 @@
 <template>
-    <div>
-        <v-app-bar>
-        <v-app-bar-title>Hello</v-app-bar-title>
-        <v-spacer />
-        <v-btn @click="toggleTheme">
-          <v-icon>ph:sun</v-icon>
-          toggle thema</v-btn>
-      </v-app-bar>
-    </div>
+   
+      <v-app-bar color="#009244" height="100">
+        <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
+    
+      <img src="assets\img\logo_rssa.png" alt="" style="display: flex; height: 80px;">
+  
+
+     
+   
+      <v-btn v-if="hide==true" @click="navigateTo('/logout')">
+            <v-icon>ph:sign-out</v-icon>
+            logout
+          </v-btn>
+              </v-app-bar>
+              <v-navigation-drawer
+        v-model="drawer"
+         location="left"
+        
+        temporary
+      >
+    
+      <v-list>
+      <v-list-item prepend-icon="mdi-home" title="Home" to="/"></v-list-item>
+
+      <v-list-group value="SimRS">
+        <template v-slot:activator="{ props }">
+          <v-list-item
+            v-bind="props"
+            prepend-icon="mdi-file-outline"
+            title="SimRS"
+          ></v-list-item>
+        </template>
+
+
+          <v-list-item
+           title="Surat Kontrol"
+           to="/Surat-Kontrol"
+          ></v-list-item>
+        
+        </v-list-group>
+        <v-list-group prepend-icon="mdi-cloud-upload" value="Satu Rssa">
+          <template v-slot:activator="{ props }">
+            <v-list-item
+              v-bind="props"
+              title="Satu Rssa"
+            ></v-list-item>
+          </template>
+
+    
+              <v-list-item
+              v-bind="props"
+              title="logapi"
+              to="/satu_rssa/logapi"
+              ></v-list-item>
+
+              <v-list-item
+              v-bind="props"
+              title="Kunjungan Pasien"
+              to="/satu_rssa/kunjungan_pasien"
+              ></v-list-item>
+            
+          
+          </v-list-group>
+    </v-list>
+      </v-navigation-drawer>
+         
+  
 </template>
 
-<script setup lang="ts">
+<script>
 import { ref } from "vue";
 import { useTheme } from "vuetify";
 import { storeToRefs } from "pinia";
 
-const theme = useTheme();
 
-function toggleTheme () {
-  theme.global.name.value = theme.global.current.value.dark ? 'light' : 'myTheme';
-}
+// console.log(hide);
+export default {
+    data: () => ({
+      drawer: false,
+      group: null,
+      
+    }),
+
+    watch: {
+      group () {
+        this.drawer = false
+      },
+    },
+  }
+
+
+
+
 </script>
 
 <style scoped>

components/footer.vue

@@ -0,0 +1,33 @@
+<template>
+  <UFooter :links="links">
+    <template #left>
+      Copyright © {{ new Date().getFullYear() }}
+    </template>
+
+    <template #right>
+      <UButton icon="i-simple-icons-x" color="gray" variant="ghost" to="https://x.com/nuxt_js" target="_blank" />
+      <UButton icon="i-simple-icons-discord" color="gray" variant="ghost" to="https://discord.com/invite/ps2h6QT" target="_blank" />
+      <UButton icon="i-simple-icons-github" color="gray" variant="ghost" to="https://github.com/nuxt/nuxt" target="_blank" />
+    </template>
+  </UFooter>
+</template>
+
+<script lang="ts" setup>
+{
+  name: 'Appfooter'
+}
+
+const links = [{
+  label: 'Nuxt UI',
+  to: 'https://ui.nuxt.com/'
+}, {
+  label: 'Nuxt Docs',
+  to: 'https://nuxt.com'
+}, {
+  label: 'Nuxt Studio',
+  to: 'https://nuxt.studio'
+}]
+</script>
+
+
+

components/sidebar.vue

@@ -0,0 +1,81 @@
+<template>
+   <v-navigation-drawer app v-model="drawer.data" temporary color="light" :width="300">
+        <v-list>
+          <v-list-item prepend-icon="mdi-home" title="Home"></v-list-item>
+
+          <v-list-group value="Users">
+            <template v-slot:activator="{ props }">
+              <v-list-item
+                v-bind="props"
+                prepend-icon="mdi-account-circle"
+                title="Users"
+              ></v-list-item>
+            </template>
+
+            <v-list-group value="Admin">
+              <template v-slot:activator="{ props }">
+                <v-list-item
+                  v-bind="props"
+                  title="Admin"
+                ></v-list-item>
+              </template>
+
+              <v-list-item
+                v-for="([title, icon], i) in admins"
+                :key="i"
+                :prepend-icon="icon"
+                :title="title"
+                :value="title"
+              ></v-list-item>
+            </v-list-group>
+
+            <v-list-group value="Actions">
+              <template v-slot:activator="{ props }">
+                <v-list-item
+                  v-bind="props"
+                  title="Actions"
+                ></v-list-item>
+              </template>
+
+              <v-list-item
+                v-for="([title, icon], i) in cruds"
+                :key="i"
+                :prepend-icon="icon"
+                :title="title"
+                :value="title"
+              ></v-list-item>
+            </v-list-group>
+          </v-list-group>
+        </v-list>
+    </v-navigation-drawer>
+</template>
+<script setup lang="ts">
+import { Link } from "#build/components";
+import {reactive} from "vue";
+const drawer = reactive({
+    data:false
+})
+
+
+const toggleDrawer = () => {
+  if (drawer.data == true) {
+    drawer.data=false
+  }else{
+    drawer.data=true;
+  }
+
+}
+
+
+
+      const admins= [
+        ['Management', 'mdi-account-multiple-outline','/'],
+        ['Settings', 'mdi-cog-outline'],
+      ];
+      const cruds= [
+        ['Create', 'mdi-plus-outline'],
+        ['Read', 'mdi-file-outline'],
+        ['Update', 'mdi-update'],
+        ['Delete', 'mdi-delete'],
+      ];
+</script>