Merge pull request #8 from estartandodevs-course/feature/components-p…

…opup

Feature/components popup

.editorconfig

@@ -5,7 +5,7 @@ root = true
 charset = utf-8
 indent_style = space
 indent_size = 2
-insert_final_newline = true
+# insert_final_newline = true
 trim_trailing_whitespace = true
 
 [*.ts]

.gitattributes

@@ -0,0 +1 @@
+text=auto eol=lf

angular.json

@@ -31,7 +31,7 @@
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.scss"],
+            "styles": ["src/styles/main.scss"],
             "scripts": []
           },
           "configurations": {
@@ -83,7 +83,7 @@
             "tsConfig": "tsconfig.spec.json",
             "inlineStyleLanguage": "scss",
             "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.scss"],
+            "styles": ["src/styles/main.scss"],
             "scripts": []
           }
         },
@@ -97,6 +97,7 @@
     }
   },
   "cli": {
-    "schematicCollections": ["@angular-eslint/schematics"]
+    "schematicCollections": ["@angular-eslint/schematics"],
+    "analytics": false
   }
 }

src/app/app-routing.module.ts

@@ -1,7 +1,25 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { PagesRouting } from './pages/routing';
+import { LayoutComponent } from './core/layout/layout.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  {
+    path: '',
+    pathMatch: 'full',
+    redirectTo: 'home',
+  },
+  {
+    path: '',
+    component: LayoutComponent,
+    children: PagesRouting,
+  },
+  {
+    path: '**',
+    pathMatch: 'prefix',
+    redirectTo: 'home',
+  },
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

src/app/app.module.ts

@@ -4,9 +4,13 @@ import { BrowserModule } from '@angular/platform-browser';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
+import { SharedModule } from './shared/shared.module';
+import { CoreModule } from './core/core.module';
+import { HomeComponent } from './pages/home/home.component';
+
 @NgModule({
-  declarations: [AppComponent],
-  imports: [BrowserModule, AppRoutingModule],
+  declarations: [AppComponent, HomeComponent],
+  imports: [BrowserModule, AppRoutingModule, SharedModule, CoreModule],
   providers: [],
   bootstrap: [AppComponent],
 })

src/app/core/components/menu/menu.component.html

@@ -0,0 +1,35 @@
+<div [ngClass]="{ menu: true, 'menu-open': isOpen }">
+  <div class="header-menu">
+    <div class="container-logo">
+      <img src="../../../../assets/icons/nibller2-logo.svg" alt="logo nibller" />
+      <h1 class="title" *ngIf="isOpen">Nibbler</h1>
+    </div>
+    <button (click)="toggleMenu()" class="btn-menu">
+      <img
+        class="icon"
+        [ngClass]="{ active: isOpen }"
+        src="../../../../assets/iconsFeel/chevron-right-circle-svgrepo-com.svg"
+        alt="seta abrir e fechar" />
+    </button>
+  </div>
+  <ul class="side-nav">
+    <li class="side-nav-item">
+      <a routerLink="agenda" class="side-nav-link">
+        <img class="side-nav-link-icon" src="../../../../assets/icons/book-open-svgrepo-com 1.svg" alt="icone de agenda" />
+        <span class="side-nav-link-text" *ngIf="isOpen">Agenda</span>
+      </a>
+    </li>
+    <li class="side-nav-item">
+      <a routerLink="pomodoro" class="side-nav-link">
+        <img class="side-nav-link-icon" src="../../../../assets/icons/timer-svgrepo-com.svg" alt="icone do pomodoro" />
+        <span class="side-nav-link-text" *ngIf="isOpen">Pomodoro</span>
+      </a>
+    </li>
+    <li class="side-nav-item">
+      <a routerLink="diario" class="side-nav-link">
+        <img class="side-nav-link-icon" src="../../../../assets/icons/emoji-happy-svgrepo-com.svg" alt="icone do diario" />
+        <span class="side-nav-link-text" *ngIf="isOpen">Meu Diário</span>
+      </a>
+    </li>
+  </ul>
+</div>

src/app/core/components/menu/menu.component.scss

@@ -0,0 +1,114 @@
+@import '../../../../styles/main';
+
+$menu-width: 96px;
+$menu-padding: 20px;
+$menu-margin: auto 0;
+$menu-max-height: 764px;
+$menu-border-radius: 20px;
+$menu-transition: all 0.5s ease;
+$menu-background: $primary-color-100;
+$menu-box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.25);
+
+.menu {
+  width: $menu-width;
+  height: auto;
+  padding: $menu-padding;
+  margin: $menu-margin;
+  max-height: $menu-max-height;
+  position: relative;
+  border-radius: $menu-border-radius;
+  transition: $menu-transition;
+  background: $menu-background;
+  box-shadow: $menu-box-shadow;
+
+  .header-menu {
+    display: flex;
+    margin-bottom: $menu-padding;
+
+    .container-logo {
+      gap: 10px;
+      width: 100%;
+      display: flex;
+      min-height: 68px;
+      overflow: hidden;
+      align-items: center;
+
+      .title {
+        font-weight: 700;
+        font-size: 26px;
+        font-family: $primary-font;
+      }
+    }
+
+    .btn-menu {
+      right: -12px;
+      position: absolute;
+      border-radius: 50%;
+      background-color: transparent;
+
+      .icon {
+        transform: rotate(0deg);
+        transition: transform 0.1s linear;
+      }
+
+      .active {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  .side-nav {
+    height: 90vh;
+    display: flex;
+    overflow: hidden;
+    list-style: none;
+    max-height: 695px;
+    align-items: center;
+    flex-direction: column;
+
+    &:hover {
+      overflow-y: auto;
+    }
+
+    .side-nav-item {
+      width: 100%;
+
+      .side-nav-link {
+        gap: 15px;
+        display: flex;
+        padding: 0 15px;
+        min-height: 48px;
+        align-items: center;
+        text-decoration: none;
+        border: 1px solid transparent;
+
+        .side-nav-link-icon {
+          max-height: 24px;
+          filter: invert(32%) sepia(48%) saturate(366%) hue-rotate(357deg) brightness(90%) contrast(86%);
+        }
+
+        .side-nav-link-text {
+          font-weight: 600;
+          color: $neutral-color-800;
+          font-family: $secondary-font;
+        }
+      }
+    }
+
+    .side-nav-item:hover {
+      .side-nav-link {
+        border-radius: 99px;
+        border-color: $tertiary-color-200;
+        background-color: $tertiary-color-100;
+
+        .side-nav-link-icon {
+          filter: invert(7%) sepia(51%) saturate(423%) hue-rotate(352deg) brightness(92%) contrast(91%);
+        }
+      }
+    }
+  }
+}
+
+.menu-open {
+  width: 280px;
+}

src/app/core/components/menu/menu.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MenuComponent } from './menu.component';
+
+describe('MenuComponent', () => {
+  let component: MenuComponent;
+  let fixture: ComponentFixture<MenuComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [MenuComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/core/components/menu/menu.component.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-menu',
+  templateUrl: './menu.component.html',
+  styleUrl: './menu.component.scss',
+})
+export class MenuComponent {
+  isOpen = false;
+  navData = navData;
+
+  toggleMenu(): void {
+    this.isOpen = !this.isOpen;
+  }
+}
+export const navData = [];

src/app/core/core.module.ts

@@ -0,0 +1,18 @@
+import { NgModule, Optional, SkipSelf } from '@angular/core';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { LayoutComponent } from './layout/layout.component';
+import { MenuComponent } from './components/menu/menu.component';
+import { SharedModule } from '../shared/shared.module';
+
+@NgModule({
+  declarations: [LayoutComponent, MenuComponent],
+  imports: [CommonModule, NgOptimizedImage, RouterModule, SharedModule],
+})
+export class CoreModule {
+  constructor(@Optional() @SkipSelf() parentModule?: CoreModule) {
+    if (parentModule) {
+      throw new Error('CoreModule has already been loaded. Import this module in the AppModule only.');
+    }
+  }
+}

src/app/core/layout/layout.component.html

@@ -0,0 +1,9 @@
+<main>
+  <header>
+    <app-menu></app-menu>
+  </header>
+
+  <section>
+    <router-outlet></router-outlet>
+  </section>
+</main>

src/app/core/layout/layout.component.scss

@@ -0,0 +1,14 @@
+@import '../../../styles/main';
+main {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: $padding-ultra-large;
+
+  section {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+  }
+}

src/app/core/layout/layout.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-layout',
+  templateUrl: './layout.component.html',
+  styleUrl: './layout.component.scss',
+})
+export class LayoutComponent {}

src/app/pages/home/home.component.html

@@ -0,0 +1 @@
+<p>home works!</p>

src/app/pages/home/home.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [HomeComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/home/home.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrl: './home.component.scss',
+})
+export class HomeComponent {}

src/app/pages/pomodoro/pomodoro-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { PomodoroComponent } from './pomodoro.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: PomodoroComponent,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class PomodoroRoutingModule {}

src/app/pages/pomodoro/pomodoro.component.html

@@ -0,0 +1 @@
+<p>Pomodoro works!</p>

src/app/pages/pomodoro/pomodoro.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-pomodoro',
+  templateUrl: './pomodoro.component.html',
+  styleUrl: './pomodoro.component.scss',
+})
+export class PomodoroComponent {}

src/app/pages/pomodoro/pomodoro.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { PomodoroRoutingModule } from './pomodoro-routing.module';
+import { PomodoroComponent } from './pomodoro.component';
+
+@NgModule({
+  declarations: [PomodoroComponent],
+  imports: [CommonModule, PomodoroRoutingModule],
+})
+export class PomodoroModule {}