125 lines
3.5 KiB
HTML
125 lines
3.5 KiB
HTML
<aside class="sidebar" [ngClass]="sideBarExpanded ? 'active' : ''" data-sidebar>
|
|
|
|
<div class="sidebar-info">
|
|
|
|
<figure class="avatar-box">
|
|
<img src="./assets/images/my-pic.png" alt="{{model.candidate?.displayName}}" width="80">
|
|
</figure>
|
|
|
|
<div class="info-content">
|
|
<h1 class="name" title="{{model.candidate?.displayName}}">{{model.candidate?.displayName}}</h1>
|
|
|
|
<p class="title">{{model.title}}</p>
|
|
</div>
|
|
|
|
<button class="info_more-btn" (click)="sideBarExpanded = !sideBarExpanded" data-sidebar-btn>
|
|
<span>Show Contacts</span>
|
|
|
|
<i class="fa-regular fa-chevron-down"></i>
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<div class="sidebar-info_more">
|
|
|
|
<div class="separator"></div>
|
|
|
|
<ul class="contacts-list">
|
|
|
|
<li class="contact-item">
|
|
|
|
<div class="icon-box">
|
|
<i class="fa-light fa-envelope"></i>
|
|
</div>
|
|
|
|
<div class="contact-info">
|
|
<p class="contact-title">Email</p>
|
|
|
|
<a href="mailto:{{model.candidate?.email}}" class="contact-link">{{model.candidate?.email}}</a>
|
|
</div>
|
|
|
|
</li>
|
|
|
|
<li class="contact-item">
|
|
|
|
<div class="icon-box">
|
|
<i class="fa-light fa-mobile-notch"></i>
|
|
</div>
|
|
|
|
<div class="contact-info">
|
|
<p class="contact-title">Phone</p>
|
|
|
|
<a href="tel:{{model.candidate?.phone}}" class="contact-link">{{model.candidate?.phone}}</a>
|
|
</div>
|
|
|
|
</li>
|
|
|
|
<li class="contact-item">
|
|
|
|
<div class="icon-box">
|
|
<i class="fa-regular fa-cake-candles"></i>
|
|
</div>
|
|
|
|
<div class="contact-info">
|
|
<p class="contact-title">Birthday</p>
|
|
|
|
<time>{{model.candidate?.dob}}</time>
|
|
</div>
|
|
|
|
</li>
|
|
|
|
<li class="contact-item">
|
|
|
|
<div class="icon-box">
|
|
<i class="fa-light fa-location-dot"></i>
|
|
</div>
|
|
|
|
<div class="contact-info">
|
|
<p class="contact-title">Location</p>
|
|
|
|
<address>{{model.candidate?.address}}</address>
|
|
</div>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
<div class="separator"></div>
|
|
|
|
<ul class="social-list">
|
|
|
|
@if (model.socialLinks?.linkedin) {
|
|
<li class="social-item">
|
|
<a href="{{model.socialLinks?.linkedin}}" target="_blank" class="social-link">
|
|
<i class="fa-brands fa-linkedin"></i>
|
|
</a>
|
|
</li>
|
|
}
|
|
|
|
@if (model.socialLinks?.gitHub) {
|
|
<li class="social-item">
|
|
<a href="{{model.socialLinks?.gitHub}}" target="_blank" class="social-link">
|
|
<i class="fa-brands fa-github"></i>
|
|
</a>
|
|
</li>
|
|
}
|
|
|
|
@if (model.socialLinks?.blogUrl) {
|
|
<li class="social-item">
|
|
<a href="{{model.socialLinks?.blogUrl}}" target="_blank" class="social-link">
|
|
<i class="fa-duotone fa-blog"></i>
|
|
</a>
|
|
</li>
|
|
}
|
|
</ul>
|
|
|
|
</div>
|
|
<hr class="logout-divider" />
|
|
|
|
<div class="logout-section">
|
|
<button class="logout-btn" (click)="logout()">
|
|
<span class="icon">🔓</span>
|
|
<span>Logout</span>
|
|
</button>
|
|
</div>
|
|
</aside> |