Amin/XRoomDashboardFront
1
0
Fork 0
mirror of https://github.com/Dadechin/XRoomDashboardFront.git synced 2025-07-05 01:34:34 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

added header componnent

Browse Source
This commit is contained in:
mi1468 2025-05-10 17:20:38 +03:30
parent fe41a8afe2
commit 3ed673be9e
2 changed files with 109 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
xroom-dashboard/src/components/Header.vue Normal file
View File

@ -0,0 +1,96 @@
<template>
<header class="header-container">
<img class="line" src="https://c.animaapp.com/m9nvumalUMfQbN/img/line-1.svg" />
<p class="welcome-message">از این داشبورد، کار با XRoom را آغاز کنید.</p>
<div class="user-info-container">
<div class="user-name-container">
<img class="user-icon" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-10.svg" />
<div class="user-name">{{ fullName }}</div>
</div>
<div class="avatar-wrapper">
<img class="user-avatar" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame.svg" />
</div>
</div>
</header>
</template>
<script>
export default {
name: 'AppHeader',
computed: {
fullName() {
// Get user data from localStorage
const user = JSON.parse(localStorage.getItem('user') || '{}');
// Return formatted name or default if not available
if (user.first_name && user.last_name) {
return `${user.first_name} ${user.last_name}`;
}
return 'کاربر مهمان';
}
}
}
</script>
<style scoped>
.header-container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
background-color: #ffffff;
border-bottom: 1px solid #eaeaea;
}
.welcome-message {
font-size: 14px;
color: #666666;
margin: 0 15px;
}
.user-info-container {
display: flex;
align-items: center;
gap: 15px;
}
.user-name-container {
display: flex;
align-items: center;
gap: 8px;
}
.user-icon {
width: 16px;
height: 16px;
}
.user-name {
font-size: 14px;
font-weight: 500;
color: #333333;
}
.avatar-wrapper {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background-color: #f5f5f5;
}
.user-avatar {
width: 100%;
height: 100%;
object-fit: cover;
}
.line {
height: 40px;
width: 1px;
background-color: #eaeaea;
}
</style>

24
xroom-dashboard/src/pages/dashboard/index.vue
View File

@ -4,17 +4,17 @@
<div class="dashboard-page">
<div class="content">
<img class="line" src="https://c.animaapp.com/m9nvumalUMfQbN/img/line-1.svg" />
<p class="p">از این داشبورد، کار با XRoom را آغاز کنید.</p>
<div class="frame-3">
<div class="frame-4">
<img class="img" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-10.svg" />
<div class="text-wrapper-5">دانیال پژوهش کیا</div>
</div>
<div class="frame-wrapper">
<img class="frame-5" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame.svg" />
</div>
</div>
<AppHeader />
<div class="group-2">
<div class="text-wrapper-6">راهنمای شروع</div>
<img class="tutorials" src="https://c.animaapp.com/m9nvumalUMfQbN/img/tutorials.svg" />
@ -98,12 +98,14 @@
<script>
import SidebarMenu from '@/components/SidebarMenu.vue'
import AppHeader from '@/components/Header.vue';
export default {
name: 'DashboardPage',
components: {
SidebarMenu,
AppHeader,
}
}