mirror of
https://github.com/Dadechin/XRoomDashboardFront.git
synced 2025-07-16 23:24:34 +00:00
462 lines
9.4 KiB
Vue
462 lines
9.4 KiB
Vue
<template>
|
||
<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="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>
|
||
|
||
<!-- 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>
|
||
|
||
|
||
</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() {
|
||
const user = localStorage.getItem('user');
|
||
return user ? JSON.parse(user) : null;
|
||
},
|
||
customer() {
|
||
const customer = localStorage.getItem('customer');
|
||
return customer ? JSON.parse(customer) : null;
|
||
},
|
||
fullName() {
|
||
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}`;
|
||
},
|
||
isMobile() {
|
||
return window.innerWidth <= 768;
|
||
}
|
||
},
|
||
methods: {
|
||
isActive(path) {
|
||
return this.$route.path === path;
|
||
},
|
||
handleImageError(event) {
|
||
event.target.src = this.defaultProfileImage;
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* Base styles for common elements */
|
||
.sidebar {
|
||
background-color: #101010;
|
||
position: fixed;
|
||
top: 0;
|
||
right: 0;
|
||
height: 100vh;
|
||
direction: rtl;
|
||
overflow-x: hidden;
|
||
overflow-y: auto;
|
||
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 {
|
||
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 {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.text-wrapper-13 {
|
||
font-family: "IRANSansXFaNum-Medium", Helvetica;
|
||
color: #e6e6e6;
|
||
font-size: 12px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.logo {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.clip-path-group-wrapper {
|
||
width: 100px;
|
||
height: 100px;
|
||
}
|
||
|
||
.clip-path-group {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.profile-link {
|
||
text-decoration: none;
|
||
color: inherit;
|
||
}
|
||
|
||
.notifications {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 10px;
|
||
}
|
||
|
||
.notification-badge {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 25px;
|
||
height: 25px;
|
||
background-color: #dc3434;
|
||
border-radius: 50%;
|
||
font-family: "IRANSansXFaNum-DemiBold", Helvetica;
|
||
font-weight: 700;
|
||
color: #ffffff;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.text-wrapper {
|
||
font-family: "IRANSansXFaNum-Medium", Helvetica;
|
||
font-weight: 500;
|
||
color: white;
|
||
font-size: 18px;
|
||
text-align: right;
|
||
line-height: 25.2px;
|
||
}
|
||
|
||
.img {
|
||
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> |