responsive header and sidebar in mobile and tablet

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;
+  color: #fff;
-  font-size: 32px;
+  font-size: 2rem; /* 32px, using rem for scalability */
-  font-weight: bold;
+  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 {
+/* Base Content Styles */
-  margin-right: 20rem;
-  padding: 20px;
-  direction: rtl;
-  font-family: IRANSansXFaNum, sans-serif;
-}
-
 .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>

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 `${user.first_name} ${user.last_name}`;
+        ? `${user.first_name} ${user.last_name}`
-      }
+        : 'کاربر مهمان';
-      return 'کاربر مهمان';
     },
-    
     profileIcon() {
       const customer = JSON.parse(localStorage.getItem('customer') || '{}');
-      if (customer.profile_img  ) {
+      return customer.profile_img
-        return `${customer.profile_img}`;
+        ? `${customer.profile_img}`
-      }
+        : 'https://c.animaapp.com/m9nvumalUMfQbN/img/frame.svg';
-      
-      return '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,6 +108,7 @@ export default {
 </script>
 
 <style scoped>
+/* Base styles for all screen sizes */
 .header-container {
   display: flex;
   align-items: center;
@@ -111,17 +117,14 @@ export default {
   border-bottom: 1px solid #eaeaea;
   position: relative;
   z-index: 100;
-    padding-right: 0;
 }
 
-
-/* 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 {
@@ -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>

xroom-dashboard/src/components/SidebarMenu.vue

@@ -1,19 +1,22 @@
-<!-- SidebarMenu.vue -->
 <template>
-  <div class="sidebar">
+  <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="group">
         <!-- Profile Info -->
         <div class="logo-xroom">
-
           <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" />
+              <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">
-          <!-- Dynamic profile image -->
             <img 
               class="profile" 
               :src="profileImageUrl" 
@@ -22,67 +25,70 @@
             />
             <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>
       </div>
 
       <!-- Menu -->
       <div class="frame">
-      <router-link to="/dashboard" class="nav-button" :class="{ active: isActive('/dashboard') }">
+        <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') }">
-      <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"  @click="$emit('close')" :class="{ active: isActive('/dashboard/meetings') }">
-      <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"  @click="$emit('close')" :class="{ active: isActive('/dashboard/download') }">
-      <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"  @click="$emit('close')" :class="{ active: isActive('/dashboard/files') }">
-      <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"  @click="$emit('close')" :class="{ active: isActive('/dashboard/teams') }">
-      <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"  @click="$emit('close')" :class="{ active: isActive('/support') }">
-      <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>
+
+      <!-- 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>
 
 
-
+  </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 {
+/* Base styles for common elements */
-  margin-top: 48px;
-  text-align: center;
-  color: #aaa;
-  font-size: 12px;
-}
 .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;
-
+  z-index: 1000;
-  /* hidden scrollbar */
-  scrollbar-width: none;
-  -ms-overflow-style: none;
 }
 
 .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;
+  display: flex;
-  margin-bottom: 75px;
+  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>