From c5d9c1275c1df8ad88032be26e377ee3bcac4f92 Mon Sep 17 00:00:00 2001
From: Diyar Akhgar <diyar.akhgar@gmail.com>
Date: Sun, 1 Jun 2025 01:45:17 +0330
Subject: [PATCH] responsive header and sidebar in mobile and tablet

---
 xroom-dashboard/src/App.vue                   | 109 ++--
 xroom-dashboard/src/assets/img/logo.png       | Bin 8569 -> 9270 bytes
 xroom-dashboard/src/components/Header.vue     | 339 +++++++-----
 .../src/components/SidebarMenu.vue            | 487 ++++++++++++------
 4 files changed, 625 insertions(+), 310 deletions(-)

diff --git a/xroom-dashboard/src/App.vue b/xroom-dashboard/src/App.vue
index 609fac0..4dbd423 100644
--- a/xroom-dashboard/src/App.vue
+++ b/xroom-dashboard/src/App.vue
@@ -1,17 +1,17 @@
 <template>
   <div id="app">
-    <!-- Dashboard LayOut -->
+    <!-- Dashboard Layout -->
     <template v-if="isDashboardLayout">
-      <SidebarMenu />
+      <SidebarMenu :isOpen="isSidebarOpen" @close="isSidebarOpen = false" />
       <div class="dashboard-page">
         <div class="content">
-          <AppHeader :pageTitle="$route.meta.title" />
+          <AppHeader @toggle-sidebar="toggleSidebar" :pageTitle="$route.meta.title" />
           <router-view></router-view>
         </div>
       </div>
     </template>
 
-    <!-- Sample LayOut for SignUp .... -->
+    <!-- Sample Layout for SignUp, etc. -->
     <template v-else>
       <router-view></router-view>
     </template>
@@ -32,82 +32,127 @@ export default {
     SidebarMenu,
     AppHeader,
   },
+  data() {
+    return {
+      isSidebarOpen: false
+    };
+  },
   computed: {
     isDashboardLayout() {
       return this.$route.meta.requiresAuth === true;
-    },
+    }
   },
+  methods: {
+    toggleSidebar() {
+      this.isSidebarOpen = !this.isSidebarOpen;
+    }
+  }
 };
 </script>
 
 <style scoped>
-/* Global Styles */
-
+/* Reset default margins and set base font */
 body {
-  /* font-family: 'Arial', sans-serif; */
-  background-color: #f4f7fa;
   margin: 0;
   padding: 0;
-  font-family: 'Yekan', sans-serif;
-
+  font-family: 'Yekan', 'Arial', sans-serif;
+  background-color: #f4f7fa;
 }
 
-
+/* App title styling */
 .app-title {
-  color: white;
-  font-size: 32px;
-  font-weight: bold;
+  color: #fff;
+  font-size: 2rem; /* 32px, using rem for scalability */
+  font-weight: 700;
   margin: 0;
 }
 
-/* Additional styling for the whole app */
+/* Main app container */
 #app {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
 }
 
+/* Router view content */
 router-view {
   flex-grow: 1;
-  padding: 20px;
+  padding: 1.25rem; /* 20px, using rem for consistency */
 }
 
-
-
-
-
-
 </style>
 
 
 <style>
+/* Font Face Declaration */
 @font-face {
   font-family: 'IRANSans';
   src: url('@/assets/fonts/IRANSansXFaNum-Medium.ttf') format('truetype');
-  font-weight: normal;
+  font-weight: 500;
   font-style: normal;
+  font-display: swap; /* Improves font loading performance */
 }
 
-/* Apply the font globally */
+/* Global Font Application */
 * {
   font-family: 'IRANSans', sans-serif !important;
 }
 
-.dashboard-page {
-  margin-right: 20rem;
-  padding: 20px;
-  direction: rtl;
-  font-family: IRANSansXFaNum, sans-serif;
-}
-
+/* Base Content Styles */
 .content {
   background-color: #f8f9fa;
   border-radius: 20px;
-  padding: 35px 80px !important;
   display: flex;
   flex-direction: column;
   gap: 32px;
+  padding: 35px 80px;
 }
 
+/* Responsive Styles */
+@media (max-width: 520px) {
+  .dashboard-page {
+    padding: 15px 5px;
+    direction: rtl;
+  }
+
+  .content {
+    padding: 5px 15px !important;
+  }
+}
+
+@media (min-width: 521px) and (max-width: 780px) {
+  .dashboard-page {
+    padding:  15px;
+    direction: rtl;
+  }
+
+  .content {
+    padding: 35px 15px !important;
+  }
+}
+
+@media (min-width: 781px) and (max-width: 1024px) {
+  .dashboard-page {
+    margin-right: 20rem;
+    padding: 20px;
+    direction: rtl;
+  }
+
+  .content {
+    padding: 15px 45px 45px 0 !important;
+  }
+}
+
+@media (min-width: 1025px) {
+  .dashboard-page {
+    margin-right: 20rem;
+    padding: 20px;
+    direction: rtl;
+  }
+
+  .content {
+    padding: 35px 80px !important;
+  }
+}
 
 </style>
\ No newline at end of file
diff --git a/xroom-dashboard/src/assets/img/logo.png b/xroom-dashboard/src/assets/img/logo.png
index 1e585e60b7ba5e1de622be5de979edc56c05dbee..abf270ce01f3672069d6b685da20c4db2bbd0079 100644
GIT binary patch
literal 9270
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
YKL9QZhaBc*A^-pY07*qoM6N<$f)WZPHUIzs

literal 8569
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

diff --git a/xroom-dashboard/src/components/Header.vue b/xroom-dashboard/src/components/Header.vue
index 1fc429b..eb2d2b7 100644
--- a/xroom-dashboard/src/components/Header.vue
+++ b/xroom-dashboard/src/components/Header.vue
@@ -1,5 +1,5 @@
 <template>
-  <header class="header-container">
+  <div class="header-container">
     <div class="welcome-container">
       <p class="welcome-message">{{ pageTitle }} </p>
     </div>
@@ -35,12 +35,18 @@
 </div>
       </div>
     </div>
-
+    <button class="menu" @click="toggleSidebar">
+      <span>
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+        </svg>
+      </span>
+    </button>
     <button class="green-button">
       <img :src="require('@/assets/img/shopIcon.png')" alt="Icon" class="button-icon" />
       <span>خرید اشتراک </span>
     </button>
-  </header>
+  </div>
 </template>
 
 
@@ -61,24 +67,20 @@ export default {
   computed: {
     fullName() {
       const user = JSON.parse(localStorage.getItem('user') || '{}');
-      if (user.first_name && user.last_name) {
-        return `${user.first_name} ${user.last_name}`;
-      }
-      return 'کاربر مهمان';
+      return user.first_name && user.last_name
+        ? `${user.first_name} ${user.last_name}`
+        : 'کاربر مهمان';
     },
-    
     profileIcon() {
       const customer = JSON.parse(localStorage.getItem('customer') || '{}');
-      if (customer.profile_img  ) {
-        return `${customer.profile_img}`;
-      }
-      
-      return 'https://c.animaapp.com/m9nvumalUMfQbN/img/frame.svg';
+      return customer.profile_img
+        ? `${customer.profile_img}`
+        : 'https://c.animaapp.com/m9nvumalUMfQbN/img/frame.svg';
     }
   },
   methods: {
     toggleDropdown() {
-      console.log("Dropdown toggled"); // This should now appear in console
+      console.log("Dropdown toggled");
       this.showDropdown = !this.showDropdown;
     },
     logout() {
@@ -90,10 +92,13 @@ export default {
       if (!this.$el.contains(event.target)) {
         this.showDropdown = false;
       }
+    },
+    toggleSidebar() {
+      this.$emit('toggle-sidebar');
     }
   },
   mounted() {
-    console.log("Component mounted"); // Check if this appears
+    console.log("Component mounted");
     document.addEventListener('click', this.closeDropdown);
   },
   beforeUnmount() {
@@ -103,25 +108,23 @@ export default {
 </script>
 
 <style scoped>
+/* Base styles for all screen sizes */
 .header-container {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 20px;
-    border-bottom: 1px solid #eaeaea;
-    position: relative;
-    z-index: 100;
-    padding-right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px;
+  border-bottom: 1px solid #eaeaea;
+  position: relative;
+  z-index: 100;
 }
 
-
-/* New green button styles */
 .green-button {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
-  background-color: #48BB78; /* Green color */
+  background-color: #48BB78;
   color: white;
   border: none;
   padding: 8px 16px;
@@ -132,39 +135,50 @@ export default {
 }
 
 .green-button:hover {
-  background-color: #3e8e41; /* Darker green on hover */
+  background-color: #3e8e41;
 }
 
 .button-icon {
   width: 16px;
   height: 16px;
-  filter: brightness(0) invert(1); /* Make icon white */
+  filter: brightness(0) invert(1);
+}
+
+.menu {
+  background-color: transparent;
+  border: none;
+}
+
+.menu svg {
+  height: 25px;
+  width: 25px;
 }
 
 .welcome-container {
   flex: 1;
-  text-align: right;
-  /* padding-right: 20px; */
 }
 
 .welcome-message {
   color: #111;
   margin: 0;
-  font-size: 19px;
   font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .user-info-container {
   display: flex;
   align-items: center;
   gap: 15px;
-  margin-left: 25px;
+  position: relative;
 }
 
 .user-name-container {
   display: flex;
   align-items: center;
   gap: 8px;
+  position: relative;
 }
 
 .user-icon {
@@ -174,9 +188,9 @@ export default {
 }
 
 .user-name {
-    font-size: 16px;
-    font-weight: 500;
-    color: #101010;
+  font-size: 16px;
+  font-weight: 500;
+  color: #101010;
 }
 
 .avatar-wrapper {
@@ -188,13 +202,11 @@ export default {
   align-items: center;
   justify-content: center;
   background-color: #f5f5f5;
-  position: relative;
   cursor: pointer;
 }
 
 .user-avatar {
   width: 100%;
-  
   height: 55px;
   object-fit: cover;
 }
@@ -205,87 +217,6 @@ export default {
   background-color: #eaeaea;
 }
 
-.dropdown-menu {
-  /* position: absolute; */
-  top: 50px;
-  right: 0;
-  background-color: white;
-  border: 1px solid #eaeaea;
-  border-radius: 8px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-  z-index: 100;
-  min-width: 150px;
-  overflow: hidden;
-}
-
-.dropdown-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 15px;
-  cursor: pointer;
-  transition: background-color 0.2s;
-}
-
-.dropdown-item:hover {
-  background-color: #f5f5f5;
-}
-
-.logout-icon {
-  width: 16px;
-  height: 16px;
-}
-
-
-.user-info-container {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-  margin-left: 25px;
-  position: relative; /* Add this for dropdown positioning */
-}
-
-.user-name-container {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  position: relative; /* Important for dropdown positioning */
-}
-
-.dropdown-menu {
-  position: absolute;
-  top: 100%; /* Position below the user info */
-  right: 0;
-  background-color: white;
-  border: 1px solid #eaeaea;
-  border-radius: 8px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-  z-index: 1000; /* Higher z-index to ensure it's above other elements */
-  min-width: 150px;
-  margin-top: 5px; /* Small gap from the user info */
-}
-
-.dropdown-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 15px;
-  cursor: pointer;
-  transition: background-color 0.2s;
-}
-
-.dropdown-item:hover {
-  background-color: #f5f5f5;
-}
-
-.logout-icon {
-  width: 16px;
-  height: 16px;
-}
-
-/* Ensure header has proper z-index */
-
-
 .dropdown-menu {
   position: absolute;
   top: 100%;
@@ -297,6 +228,7 @@ export default {
   z-index: 1000;
   min-width: 200px;
   padding: 10px 0;
+  margin-top: 5px;
 }
 
 .dropdown-item {
@@ -319,7 +251,7 @@ export default {
 
 .team-name {
   font-size: 14px;
-  color: #3b82f6; /* Tailwind blue-500 */
+  color: #3b82f6;
   text-decoration: none;
   margin-left: 8px;
 }
@@ -331,11 +263,178 @@ export default {
 }
 
 .logout {
-  color: #f56565; /* Tailwind red-500 */
+  color: #f56565;
 }
 
 .logout .dropdown-label {
   color: #f56565;
 }
 
+.logout-icon {
+  width: 16px;
+  height: 16px;
+}
+
+/* Mobile (max-width: 520px) */
+@media (max-width: 520px) {
+  .header-container {
+    padding: 20px 0;
+  }
+
+  .green-button {
+    display: none;
+  }
+
+  .menu {
+    text-align: right;
+    width: 30%;
+  }
+
+  .welcome-container {
+    text-align: left;
+    order: 3;
+    width: 30%;
+  }
+
+  .welcome-message {
+    font-size: 15px;
+    width: 90px;
+  }
+
+  .user-info-container {
+    justify-content: center;
+    order: 2;
+    width: 40%;
+  }
+
+  .avatar-wrapper {
+    display: none;
+  }
+}
+
+/* Small tablet (min-width: 520px and max-width: 780px) */
+@media (min-width: 520px) and (max-width: 780px) {
+  .header-container {
+    padding: 20px 0;
+  }
+
+  .green-button {
+    display: none;
+  }
+
+  .menu {
+    text-align: center;
+    width: 30%;
+  }
+
+  .menu svg {
+    height: 29px;
+    width: 29px;
+  }
+
+  .welcome-container {
+    text-align: center;
+    order: 3;
+    width: 30%;
+  }
+
+  .welcome-message {
+    font-size: 18px;
+    width: 90px;
+    margin: auto;
+    display: block;
+  }
+
+  .user-info-container {
+    justify-content: center;
+    order: 2;
+    width: 40%;
+  }
+
+  .user-icon {
+    width: 18px;
+    height: 18px;
+  }
+
+  .user-name {
+    font-size: 18px;
+  }
+
+  .avatar-wrapper {
+    display: none;
+  }
+}
+
+/* Tablet (min-width: 780px and max-width: 1024px) */
+@media (min-width: 780px) and (max-width: 1024px) {
+  .menu {
+    display: none;
+  }
+
+  .header-container {
+    padding-right: 0;
+  }
+
+  .welcome-container {
+    text-align: right;
+    width: 30%;
+  }
+
+  .welcome-message {
+    font-size: 15px;
+    width: 200px;
+  }
+
+  .user-info-container {
+    margin-left: 25px;
+    width: 40%;
+  }
+}
+
+/* Desktop (min-width: 1025px and max-width: 1280px) */
+@media (min-width: 1025px) and (max-width: 1280px) {
+  .menu {
+    display: none;
+  }
+
+  .header-container {
+    padding-right: 0;
+  }
+
+  .welcome-container {
+    text-align: right;
+  }
+
+  .welcome-message {
+    font-size: 19px;
+  }
+
+  .user-info-container {
+    margin-left: 25px;
+  }
+}
+
+/* Large Desktop (min-width: 1280px) */
+@media (min-width: 1280px) {
+  .menu {
+    display: none;
+  }
+
+  .header-container {
+    padding-right: 0;
+  }
+
+  .welcome-container {
+    text-align: right;
+  }
+
+  .welcome-message {
+    font-size: 19px;
+  }
+
+  .user-info-container {
+    margin-left: 25px;
+  }
+}
+
 </style>
\ No newline at end of file
diff --git a/xroom-dashboard/src/components/SidebarMenu.vue b/xroom-dashboard/src/components/SidebarMenu.vue
index 04b29b7..55f9fd0 100644
--- a/xroom-dashboard/src/components/SidebarMenu.vue
+++ b/xroom-dashboard/src/components/SidebarMenu.vue
@@ -1,88 +1,94 @@
-<!-- SidebarMenu.vue -->
 <template>
-  <div class="sidebar">
-    <div class="group">
-      <!-- Profile Info -->
-      <div class="logo-xroom">
+  <div>
+    <!-- Overlay for mobile when sidebar is open -->
+    <div class="overlay" v-if="isOpen && isMobile" @click="$emit('close')"></div>
+    
+    <div class="sidebar" :class="{ 'open': isOpen }">
 
-        <div class="logo">
-          <div class="clip-path-group-wrapper">
-            <img class="clip-path-group" src="https://c.animaapp.com/m9nvumalUMfQbN/img/clip-path-group.png" />
+
+      <div class="group">
+        <!-- Profile Info -->
+        <div class="logo-xroom">
+          <div class="logo">
+            <div class="clip-path-group-wrapper">
+              <img class="clip-path-group" :src="require('@/assets/img/logo.png')" />
+            </div>
           </div>
         </div>
+        <router-link to="/dashboard/edit-profile" class="profile-link">
+          <div class="profile-container">
+            <img 
+              class="profile" 
+              :src="profileImageUrl" 
+              alt="Profile Image"
+              @error="handleImageError"
+            />
+            <div class="frame-2">
+              <div class="text-wrapper-2">خوش آمدید...</div>
+              <div class="text-wrapper-3">{{ fullName }}</div>
+            </div>
+          </div>
+        </router-link>
       </div>
-      <router-link to="/dashboard/edit-profile" class="profile-link">
-        <div class="profile-container">
-          <!-- Dynamic profile image -->
-          <img 
-            class="profile" 
-            :src="profileImageUrl" 
-            alt="Profile Image"
-            @error="handleImageError"
-          />
-          <div class="frame-2">
-            <div class="text-wrapper-2">خوش آمدید...</div>
-            <!-- Dynamic user name -->
-            <div class="text-wrapper-3">{{ fullName }}</div>
-          </div>
-          <!-- <div class="notifications">
-            <div class="notification-badge">4</div>
-          </div>  -->
-        </div>
-      </router-link>
+
+      <!-- Menu -->
+      <div class="frame">
+        <router-link to="/dashboard" class="nav-button"  @click="$emit('close')" :class="{ active: isActive('/dashboard') }">
+          <img class="img" src="https://c.animaapp.com/m9nvumalUMfQbN/img/property-1-dashboard.svg" />
+          <div class="text-wrapper">داشبورد</div>
+        </router-link>
+        <router-link to="/dashboard/spaces" class="nav-button"  @click="$emit('close')" :class="{ active: isActive('/dashboard/spaces') }">
+          <img class="img" src="https://c.animaapp.com/m9nvumalUMfQbN/img/menu-icon-4.svg" />
+          <div class="text-wrapper">فضاها</div>
+        </router-link>
+        <router-link to="/dashboard/meetings" class="nav-button"  @click="$emit('close')" :class="{ active: isActive('/dashboard/meetings') }">
+          <img class="img" src="https://c.animaapp.com/m9nvumalUMfQbN/img/menu-icon-1.svg" />
+          <div class="text-wrapper">جلسات</div>
+        </router-link>
+        <router-link to="/dashboard/download" class="nav-button"  @click="$emit('close')" :class="{ active: isActive('/dashboard/download') }">
+          <img class="img" src="https://c.animaapp.com/m9nvumalUMfQbN/img/property-1-download.svg" />
+          <div class="text-wrapper">دانلود</div>
+        </router-link>
+        <router-link to="/dashboard/files" class="nav-button"  @click="$emit('close')" :class="{ active: isActive('/dashboard/files') }">
+          <img class="img" src="https://c.animaapp.com/m9nvumalUMfQbN/img/property-1-files.svg" />
+          <div class="text-wrapper">فایل ها</div>
+        </router-link>
+        <router-link to="/dashboard/teams" class="nav-button"  @click="$emit('close')" :class="{ active: isActive('/dashboard/teams') }">
+          <img class="img" src="https://c.animaapp.com/m9nvumalUMfQbN/img/property-1-team.svg" />
+          <div class="text-wrapper">تیم</div>
+        </router-link>
+        <router-link to="/support" class="nav-button"  @click="$emit('close')" :class="{ active: isActive('/support') }">
+          <img class="img" src="https://c.animaapp.com/m9nvumalUMfQbN/img/property-1-support.svg" />
+          <div class="text-wrapper">پشتیبانی</div>
+        </router-link>
+      </div>
+
+      <!-- Close Button for mobile -->
+      <button class="close-button" v-if="isMobile" @click="$emit('close')">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+      </button>
     </div>
- 
-    <!-- Menu -->
-    <div class="frame">
-      <router-link to="/dashboard" class="nav-button" :class="{ active: isActive('/dashboard') }">
-        <img class="img" src="https://c.animaapp.com/m9nvumalUMfQbN/img/property-1-dashboard.svg" />
-        <div class="text-wrapper">داشبورد</div>
-      </router-link>
 
-      <router-link to="/dashboard/spaces" class="nav-button" :class="{ active: isActive('/dashboard/spaces') }">
-        <img class="img" src="https://c.animaapp.com/m9nvumalUMfQbN/img/menu-icon-4.svg" />
-        <div class="text-wrapper">فضاها</div>
-      </router-link>
 
-      <router-link to="/dashboard/meetings" class="nav-button" :class="{ active: isActive('/dashboard/meetings') }">
-        <img class="img" src="https://c.animaapp.com/m9nvumalUMfQbN/img/menu-icon-1.svg" />
-        <div class="text-wrapper">جلسات</div>
-      </router-link>
-
-      <router-link to="/dashboard/download" class="nav-button" :class="{ active: isActive('/dashboard/download') }">
-        <img class="img" src="https://c.animaapp.com/m9nvumalUMfQbN/img/property-1-download.svg" />
-        <div class="text-wrapper">دانلود</div>
-      </router-link>
-
-      <router-link to="/dashboard/files" class="nav-button" :class="{ active: isActive('/dashboard/files') }">
-        <img class="img" src="https://c.animaapp.com/m9nvumalUMfQbN/img/property-1-files.svg" />
-        <div class="text-wrapper">فایل ها</div>
-      </router-link>
-
-      <router-link to="/dashboard/teams" class="nav-button" :class="{ active: isActive('/dashboard/teams') }">
-        <img class="img" src="https://c.animaapp.com/m9nvumalUMfQbN/img/property-1-team.svg" />
-        <div class="text-wrapper">تیم</div>
-      </router-link>
-
-      <router-link to="/support" class="nav-button" :class="{ active: isActive('/support') }">
-        <img class="img" src="https://c.animaapp.com/m9nvumalUMfQbN/img/property-1-support.svg" />
-        <div class="text-wrapper">پشتیبانی</div>
-      </router-link>
-    </div>
   </div>
-
-
-
 </template>
 
 <script>
 export default {
   name: 'SidebarMenu',
+  props: {
+    isOpen: {
+      type: Boolean,
+      default: false
+    }
+  },
   data() {
     return {
       activeMenu: 'dashboard',
       defaultProfileImage: 'https://c.animaapp.com/m9nvumalUMfQbN/img/profile.png'
-    }
+    };
   },
   computed: {
     user() {
@@ -94,13 +100,15 @@ export default {
       return customer ? JSON.parse(customer) : null;
     },
     fullName() {
-      if (!this.user) return 'دانیال پژوهش کیا'; // Default name
+      if (!this.user) return 'دانیال پژوهش کیا';
       return `${this.user.first_name || ''} ${this.user.last_name || ''}`.trim() || 'کاربر';
     },
     profileImageUrl() {
       if (!this.customer?.profile_img) return this.defaultProfileImage;
       return `${this.customer.profile_img}`;
-      // return `http://194.62.43.230:8000/media/${this.customer.profile_img}`;
+    },
+    isMobile() {
+      return window.innerWidth <= 768;
     }
   },
   methods: {
@@ -111,43 +119,149 @@ export default {
       event.target.src = this.defaultProfileImage;
     }
   }
-}
+};
 </script>
 
 <style scoped>
-.footer {
-  margin-top: 48px;
-  text-align: center;
-  color: #aaa;
-  font-size: 12px;
-}
+/* Base styles for common elements */
 .sidebar {
   background-color: #101010;
-  width: 360px;
-  height: 100vh;
   position: fixed;
-  right: 0;
   top: 0;
-  padding: 30px 50px;
+  right: 0;
+  height: 100vh;
   direction: rtl;
-  display: flex;
-  flex-direction: column;
   overflow-x: hidden;
   overflow-y: auto;
-
-  /* hidden scrollbar */
-  scrollbar-width: none;
-  -ms-overflow-style: none;
+  z-index: 1000;
 }
 
 .sidebar::-webkit-scrollbar {
   display: none;
 }
 
+.sidebar {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.sidebar.open {
+  display: flex;
+  flex-direction: column;
+  gap: 3rem;
+}
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+}
+
+.close-button {
+  position: fixed;
+  top: 20px;
+  left: 15px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  background-color: #fff;
+  border-radius: 5px;
+  padding-top: 7px;
+}
+
+.close-button svg {
+  width: 24px;
+  height: 24px;
+  stroke: #333;
+}
+
+.nav-button {
+  all: unset;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+  padding: 16px 24px;
+  background-color: #101010;
+  border-radius: 10px;
+  cursor: pointer;
+  color: white;
+  text-decoration: none;
+  transition: background-color 0.3s;
+}
+
+.nav-button:hover {
+  background-color: #1e1e1e;
+}
+
+.nav-button.active {
+  background-color: #3a57e8;
+}
+
+.frame {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.frame-2 {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 8px;
+}
+
+.text-wrapper-2 {
+  font-family: "IRANSansXFaNum-Medium", Helvetica;
+  font-weight: 500;
+  color: #e6e6e6;
+  font-size: 15px;
+  line-height: 22.4px;
+}
+
+.text-wrapper-3 {
+  font-family: "IRANSansXFaNum-Medium", Helvetica;
+  font-weight: 500;
+  color: white;
+  font-size: 16px;
+  line-height: 26.6px;
+}
+
+.profile {
+  width: 72px;
+  height: 72px;
+  border-radius: 12px;
+  object-fit: none;
+}
+
+.profile-container {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+}
 
 .group {
-  width: 228px;
-  margin-bottom: 75px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  gap: 1rem;
+}
+
+.clip-path-group {
+  width: 10rem;
+}
+
+.footer {
+  margin-top: 48px;
+  text-align: center;
+  color: #aaa;
+  font-size: 12px;
 }
 
 .logo-xroom {
@@ -185,43 +299,6 @@ export default {
   color: inherit;
 }
 
-.profile-container {
-  display: flex;
-  align-items: center;
-  position: relative;
-  padding: 10px 0;
-}
-
-.profile {
-  width: 72px;
-  height: 72px;
-  margin-left: 20px;
-  border-radius: 12px;
-}
-
-.frame-2 {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 8px;
-}
-
-.text-wrapper-2 {
-  font-family: "IRANSansXFaNum-Medium", Helvetica;
-  font-weight: 500;
-  color: #e6e6e6;
-  font-size: 16px;
-  line-height: 22.4px;
-}
-
-.text-wrapper-3 {
-  font-family: "IRANSansXFaNum-Medium", Helvetica;
-  font-weight: 500;
-  color: white;
-  font-size: 19px;
-  line-height: 26.6px;
-}
-
 .notifications {
   position: absolute;
   left: 0;
@@ -242,39 +319,6 @@ export default {
   font-size: 13px;
 }
 
-.frame {
-  display: flex;
-  flex-direction: column;
-  width: 260px;
-  gap: 4px;
-}
-
-.nav-button {
-  all: unset;
-  box-sizing: border-box;
-  display: flex;
-  width: 260px;
-  height: 57px;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 10px;
-  padding: 16px 24px;
-  background-color: #101010;
-  border-radius: 10px;
-  cursor: pointer;
-  color: white;
-  text-decoration: none;
-  transition: background-color 0.3s;
-}
-
-.nav-button:hover {
-  background-color: #1e1e1e;
-}
-
-.nav-button.active {
-  background-color: #3a57e8;
-}
-
 .text-wrapper {
   font-family: "IRANSansXFaNum-Medium", Helvetica;
   font-weight: 500;
@@ -288,4 +332,131 @@ export default {
   width: 24px;
   height: 24px;
 }
+
+/* Media Queries */
+@media (max-width: 520px) {
+  .sidebar {
+    width: 250px;
+    padding: 1rem 1rem 1rem 0.5rem;
+    display: none;
+    transition: transform 0.3s ease-in-out;
+  }
+
+  .nav-button {
+    width: 100%;
+    height: 40px;
+  }
+
+  .group {
+    width: 100%;
+  }
+}
+
+@media (min-width: 520px) and (max-width: 780px) {
+  .sidebar {
+    width: 22rem;
+    padding: 1rem 1rem 1rem 0.5rem;
+    display: none;
+    transition: transform 0.3s ease-in-out;
+  }
+
+  .nav-button {
+    width: 100%;
+    height: 40px;
+  }
+
+  .group {
+    width: 100%;
+  }
+}
+
+@media (min-width: 780px) and (max-width: 1280px) {
+  .sidebar {
+    width: 360px;
+    padding: 30px 50px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .close-button {
+    display: none;
+  }
+
+  .nav-button {
+    width: 260px;
+    height: 57px;
+  }
+
+  .frame {
+    width: 260px;
+    gap: 4px;
+  }
+
+  .group {
+    width: 228px;
+    margin-bottom: 75px;
+  }
+
+  .profile {
+    margin-left: 20px;
+  }
+
+  .profile-container {
+    padding: 10px 0;
+    position: relative;
+  }
+
+  .text-wrapper-2 {
+    font-size: 16px;
+  }
+
+  .text-wrapper-3 {
+    font-size: 19px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .sidebar {
+    width: 360px;
+    padding: 30px 50px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .close-button {
+    display: none;
+  }
+
+  .nav-button {
+    width: 260px;
+    height: 57px;
+  }
+
+  .frame {
+    width: 260px;
+    gap: 4px;
+  }
+
+  .group {
+    width: 228px;
+    margin-bottom: 75px;
+  }
+
+  .profile {
+    margin-left: 20px;
+  }
+
+  .profile-container {
+    padding: 10px 0;
+    position: relative;
+  }
+
+  .text-wrapper-2 {
+    font-size: 16px;
+  }
+
+  .text-wrapper-3 {
+    font-size: 19px;
+  }
+}
 </style>
\ No newline at end of file