mirror of
https://github.com/Dadechin/XRoomDashboardFront.git
synced 2025-07-02 00:04:35 +00:00
responsive header and sidebar in mobile and tablet
This commit is contained in:
Diyar Akhgar
parent
a6f9ac7e44
commit
c5d9c1275c
|
|
@ -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>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 8.4 KiB After Width: | Height: | Size: 9.1 KiB |
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user