Mobile Profile Page - Copy this Html, Bootstrap Component to your project

<template> <div class="container mt 3 mb 4"> <! Welcome Message > <div class="welcome message"> <h3 class="text center">Welcome, {{ fullName }}</h3> </div> <! Dark Mode Toggle Button > <div class="text center mb 4"> <label class="switch"> <input type="checkbox" @change="toggleDarkMode" :checked="isDarkMode" /> <span class="slider round"></span> </label> <p>{{ isDarkMode ? "Dark Mode" : "Light Mode" }}</p> </div> <! Navigation Buttons > <div class="navigation buttons"> <router link to="/add person" class="btn btn primary btn block mb 2" >Add Person</router link > <router link to="/edit person" class="btn btn secondary btn block mb 2" >Edit Person</router link > <router link to="/edit master data" class="btn btn info btn block mb 2" >Edit Master Data</router link > <router link to="/admin login" class="btn btn danger btn block mb 2" >Admin Login</router link > <router link to="/admin profile update" class="btn btn danger btn block mb 2" >Admin Profile Update</router link > </div> </div> </template> <script> export default { data() { return { fullName: localStorage.getItem("fullName") || "KaryaKarta", isDarkMode: JSON.parse(localStorage.getItem("isDarkMode")) || false, // Retrieve dark mode state from local storage }; }, methods: { toggleDarkMode() { this.isDarkMode = !this.isDarkMode; localStorage.setItem("isDarkMode", JSON.stringify(this.isDarkMode)); this.$bus.emit("toggleDarkMode", this.isDarkMode); // Emit the event globally using EventBus document.body.classList.toggle("dark mode", this.isDarkMode); // Apply dark mode to the body element }, }, mounted() { // Apply the initial dark mode state when the component is mounted if (this.isDarkMode) { document.body.classList.add("dark mode"); } }, }; </script> <style> /* Dark Mode Styling */ .dark mode { background color: #121212; color: #ffffff; } /* Container Styling */ .container { padding: 15px; max width: 100%; /* Ensures the container fits mobile screen */ } .welcome message { text align: center; margin bottom: 20px; } .welcome message h3 { font size: 18px; /* Slightly smaller for mobile screens */ margin bottom: 10px; } .navigation buttons { display: flex; flex direction: column; align items: center; /* Centered buttons on mobile */ } .btn { width: 100%; /* Full width for better mobile experience */ max width: 300px; /* Button max width for larger screens */ margin bottom: 10px; /* Ensure space between buttons */ font size: 14px; padding: 10px 15px; /* Adjusted padding for smaller screens */ } @media (min width: 768px) { /* For larger screens, buttons can be aligned horizontally */ .navigation buttons { flex direction: row; justify content: space around; flex wrap: wrap; } .btn { margin: 10px; width: auto; } } /* Toggle Switch CSS */ .switch { position: relative; display: inline block; width: 34px; height: 20px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background color: #ccc; transition: 0.4s; border radius: 34px; } .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background color: white; transition: 0.4s; border radius: 50%; } input:checked + .slider { background color: #2196f3; } input:checked + .slider:before { transform: translateX(14px); } </style> i need a mobile optimized page with these routes in side swipe navbar which can be opend or closed and profile information in middle