Skip to content

Commit 0095be0

Browse files
marcode24marcode24
committed
💄 add initial styles UI
1 parent 6e481b1 commit 0095be0

20 files changed

+563
-5
lines changed

‎src/app/core/components/components.module.ts

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { CommonModule } from '@angular/common';
2+
import { NgModule } from '@angular/core';
3+
import { RouterModule } from '@angular/router';
4+
5+
import { HeaderComponent } from './header/header.component';
6+
import { SidebarComponent } from './sidebar/sidebar.component';
7+
8+
@NgModule({
9+
declarations: [
10+
SidebarComponent,
11+
HeaderComponent
12+
],
13+
imports: [
14+
CommonModule,
15+
RouterModule
16+
],
17+
exports: [
18+
SidebarComponent,
19+
HeaderComponent
20+
]
21+
})
22+
export class ComponentsModule { }

‎src/app/core/components/header/header.component.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<header>
2+
<div class="options">
3+
<div class="search">
4+
<div class="input-group">
5+
<input type="text" class="icon" #txtSearch
6+
placeholder="Search...">
7+
<i class="bx bx-search"></i>
8+
</div>
9+
<button class="btn btn-primary filter">
10+
<i class="bx bx-equalizer"></i>
11+
</button>
12+
</div>
13+
<div class="user">
14+
here's user
15+
</div>
16+
</div>
17+
</header>

‎src/app/core/components/header/header.component.scss

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
@import 'elements/_buttons.scss';
2+
3+
header {
4+
position: fixed;
5+
margin-left: 250px;
6+
height: 75px;
7+
padding: 1rem 0.8rem;
8+
width: -webkit-fill-available;
9+
background: var(--bg);
10+
border-bottom: 2px solid #e0e0e0;
11+
12+
& .options {
13+
display: flex;
14+
align-items: center;
15+
justify-content: space-between;
16+
gap: 1rem;
17+
18+
& .search {
19+
flex: 1;
20+
display: flex;
21+
align-items: center;
22+
justify-content: space-between;
23+
gap: 1rem;
24+
}
25+
}
26+
27+
}
28+
29+
.input-group {
30+
position: relative;
31+
width: 100%;
32+
33+
& input.icon {
34+
background: var(--bg-sidebar);
35+
border: var(--border-input);
36+
border-radius: 1rem;
37+
width: 100%;
38+
min-width: 0;
39+
padding: 10px 10px 10px 50px;
40+
color: var(--font-color-primary);
41+
font-size: 16px;
42+
transition: 0.2s;
43+
box-shadow: var(--box-shadow);
44+
45+
& ~ i {
46+
top: 15px;
47+
left: 20px;
48+
position: absolute;
49+
color: #71767b;
50+
transition: 0.2s;
51+
}
52+
53+
&:focus ~ i {
54+
color: var(--primary-color);
55+
}
56+
}
57+
}
58+
59+
.btn {
60+
&.filter {
61+
& i {
62+
@include fs-4;
63+
}
64+
}
65+
}
66+
67+
68+
.user {
69+
flex: 1;
70+
display: flex;
71+
align-items: center;
72+
justify-content: flex-end;
73+
}

‎src/app/core/components/header/header.component.spec.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { HeaderComponent } from './header.component';
4+
5+
describe('HeaderComponent', () => {
6+
let component: HeaderComponent;
7+
let fixture: ComponentFixture<HeaderComponent>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
declarations: [ HeaderComponent ]
12+
})
13+
.compileComponents();
14+
});
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(HeaderComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎src/app/core/components/header/header.component.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Component, OnInit } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-header',
5+
templateUrl: './header.component.html',
6+
styleUrls: ['./header.component.scss']
7+
})
8+
export class HeaderComponent implements OnInit {
9+
10+
constructor() { }
11+
12+
ngOnInit(): void {
13+
}
14+
15+
}

‎src/app/core/components/sidebar/sidebar.component.html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<nav class="sidebar">
2+
<div class="logo">
3+
<i class="bx bx-folder"></i>
4+
<!-- <img src="" alt="cloud_box_image"> -->
5+
<span class="name">Cloud Box</span>
6+
</div>
7+
<ul class="items">
8+
<li class="item">
9+
<a routerLink="/" routerLinkActive="active">
10+
<i class='bx bx-customize'></i>
11+
<span class="name">Home</span>
12+
</a>
13+
</li>
14+
<li class="item">
15+
<a href="#">
16+
<i class='bx bx-cog'></i>
17+
<span class="name">Settings</span>
18+
</a>
19+
</li>
20+
<li class="item">
21+
<a href="#">
22+
<i class='bx bx-trash'></i>
23+
<span class="name">Deleted</span>
24+
</a>
25+
</li>
26+
</ul>
27+
</nav>

‎src/app/core/components/sidebar/sidebar.component.scss

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
@import 'settings/_typography.scss';
2+
3+
nav {
4+
position: fixed;
5+
height: 100%;
6+
width: 250px;
7+
padding: 1rem 0.8rem;
8+
z-index: 100;
9+
transition: 0.5s ease;
10+
display: flex;
11+
flex-direction: column;
12+
align-items: flex-start;
13+
background: var(--bg-sidebar);
14+
gap: 2rem;
15+
}
16+
17+
.logo {
18+
display: flex;
19+
align-items: center;
20+
gap: 1rem;
21+
22+
& .name {
23+
@include fs-1;
24+
@include fw-600;
25+
}
26+
}
27+
28+
.items {
29+
width: 100%;
30+
display: flex;
31+
flex-direction: column;
32+
gap: 0.6rem;
33+
34+
& .item {
35+
list-style: none;
36+
height: 60px;
37+
38+
& a {
39+
color: var(--fc-primary);
40+
height: 100%;
41+
width: 100%;
42+
border-radius: 1rem;
43+
display: flex;
44+
align-items: center;
45+
text-decoration: none;
46+
transition: 0.4s ease;
47+
background: transparent;
48+
cursor: pointer;
49+
gap: 1rem;
50+
padding: 0 1rem;
51+
52+
&:hover, &.active {
53+
background: var(--bg-hover-1);
54+
color: var(--fc-white);
55+
}
56+
57+
& i {
58+
@include fs-1;
59+
}
60+
61+
& .name {
62+
@include fs-4;
63+
@include fw-500;
64+
}
65+
}
66+
}
67+
}

‎src/app/core/components/sidebar/sidebar.component.spec.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { SidebarComponent } from './sidebar.component';
4+
5+
describe('SidebarComponent', () => {
6+
let component: SidebarComponent;
7+
let fixture: ComponentFixture<SidebarComponent>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
declarations: [ SidebarComponent ]
12+
})
13+
.compileComponents();
14+
});
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(SidebarComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎src/app/core/components/sidebar/sidebar.component.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Component, OnInit } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-sidebar',
5+
templateUrl: './sidebar.component.html',
6+
styleUrls: ['./sidebar.component.scss']
7+
})
8+
export class SidebarComponent implements OnInit {
9+
10+
constructor() { }
11+
12+
ngOnInit(): void {
13+
}
14+
15+
}

‎src/app/features/features.component.html

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
11
<div class="wrapper">
2-
<router-outlet></router-outlet>
2+
<app-sidebar></app-sidebar>
3+
<app-header></app-header>
4+
<div class="container">
5+
<div class="content">
6+
<router-outlet></router-outlet>
7+
</div>
8+
</div>
39
</div>

0 commit comments

Comments
 (0)