[V0_FILE]typescript:file="src/app/sidebar/sidebar.component.ts" isEdit="true" isMerged="true" import { Component } from "@angular/core" import { trigger, state, style, animate, transition } from "@angular/animations" @Component({ selector: "app-sidebar", templateUrl: "./sidebar.component.html", styleUrls: ["./sidebar.component.css"], animations: [ trigger("slideInOut", [ state( "in", style({ transform: "translateX(0)", }), ), transition(":enter", [style({ transform: "translateX(100%)" }), animate("300ms ease-in")]), transition(":leave", [animate("300ms ease-in", style({ transform: "translateX(100%)" }))]), ]), ], }) export class SidebarComponent { userName = "Ana Laura" actions = [ { title: "Encontrar processo", icon: "🔍", }, { title: "Validar licitação", icon: "✓", }, { title: "Analisar anexos", icon: "📎", }, { title: "Análise de Férias", icon: "📅", }, ] } [V0_FILE]html:file="src/app/sidebar/sidebar.component.html" isEdit="true" isMerged="true" [V0_FILE]css:file="src/app/sidebar/sidebar.component.css" isEdit="true" isMerged="true" .sidebar { position: fixed; top: 0; right: 0; width: 400px; height: 100vh; background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(227, 242, 253, 0.95) 100%); padding: 20px; box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1); overflow-y: auto; display: flex; flex-direction: column; backdrop-filter: blur(10px); } .sidebar-header { display: flex; justify-content: flex-end; margin-bottom: 20px; } .close-button { background: none; border: none; font-size: 24px; cursor: pointer; color: #333; padding: 5px; line-height: 1; } .sidebar-content { display: flex; flex-direction: column; gap: 30px; padding: 0 20px; } .greeting { text-align: center; margin-bottom: 20px; } .star-icon { font-size: 32px; color: #00bcd4; margin-bottom: 20px; } .greeting h1 { font-size: 24px; color: #333; margin-bottom: 8px; font-weight: 500; } .greeting p { font-size: 16px; color: #666; margin: 0; } .actions-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 20px; } .action-button { display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.2s ease; text-align: center; min-height: 120px; } .action-button:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } .action-icon { font-size: 24px; margin-bottom: 12px; } .action-text { font-size: 14px; color: #333; font-weight: 500; } /* Ensure the sidebar animates smoothly */ @keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } } [V0_FILE]typescript:file="src/app/app.module.ts" import { NgModule } from "@angular/core" import { BrowserModule } from "@angular/platform-browser" import { BrowserAnimationsModule } from "@angular/platform-browser/animations" import { AppRoutingModule } from "./app-routing.module" import { AppComponent } from "./app.component" import { SidebarComponent } from "./components/sidebar/sidebar.component" @NgModule({ declarations: [AppComponent, SidebarComponent], imports: [BrowserModule, AppRoutingModule, BrowserAnimationsModule], providers: [], bootstrap: [AppComponent], }) export class AppModule {} [V0_FILE]typescript:file="src/app/app-routing.module.ts" import { NgModule } from "@angular/core" import { RouterModule, type Routes } from "@angular/router" const routes: Routes = [] @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule], }) export class AppRoutingModule {} [V0_FILE]typescript:file="src/app/components/sidebar/sidebar.component.ts" import { Component, EventEmitter, Output } from "@angular/core" import { trigger, state, style, animate, transition } from "@angular/animations" @Component({ selector: "app-sidebar", templateUrl: "./sidebar.component.html", styleUrls: ["./sidebar.component.css"], animations: [ trigger("slideInOut", [ state( "in", style({ transform: "translateX(0)", }), ), transition(":enter", [style({ transform: "translateX(100%)" }), animate("300ms ease-in")]), transition(":leave", [animate("300ms ease-in", style({ transform: "translateX(100%)" }))]), ]), ], }) export class SidebarComponent { @Output() close = new EventEmitter() userName = "Ana Laura" actions = [ { title: "Encontrar processo", icon: "🔍", }, { title: "Validar licitação", icon: "✓", }, { title: "Analisar anexos", icon: "📎", }, { title: "Análise de Férias", icon: "📅", }, ] onClose(): void { this.close.emit() } } [V0_FILE]html:file="src/app/components/sidebar/sidebar.component.html" [V0_FILE]css:file="src/app/components/sidebar/sidebar.component.css" .sidebar { position: fixed; top: 0; right: 0; width: 400px; height: 100vh; background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(227, 242, 253, 0.95) 100%); padding: 20px; box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1); overflow-y: auto; display: flex; flex-direction: column; backdrop-filter: blur(10px); z-index: 1000; } .sidebar-header { display: flex; justify-content: flex-end; margin-bottom: 20px; } .close-button { background: none; border: none; font-size: 24px; cursor: pointer; color: #333; padding: 5px; line-height: 1; } .sidebar-content { display: flex; flex-direction: column; gap: 30px; padding: 0 20px; } .greeting { text-align: center; margin-bottom: 20px; } .star-icon { font-size: 32px; color: #00bcd4; margin-bottom: 20px; } .greeting h1 { font-size: 24px; color: #333; margin-bottom: 8px; font-weight: 500; } .greeting p { font-size: 16px; color: #666; margin: 0; } .actions-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 20px; } .action-button { display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.2s ease; text-align: center; min-height: 120px; } .action-button:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } .action-icon { font-size: 24px; margin-bottom: 12px; } .action-text { font-size: 14px; color: #333; font-weight: 500; } [V0_FILE]typescript:file="src/app/app.component.ts" isEdit="true" import { Component } from "@angular/core" @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"], }) export class AppComponent { title = "sidebar-demo" isSidebarVisible = false toggleSidebar(): void { this.isSidebarVisible = !this.isSidebarVisible } closeSidebar(): void { this.isSidebarVisible = false } } [V0_FILE]html:file="src/app/app.component.html" isEdit="true"

Main Content

[V0_FILE]css:file="src/app/app.component.css" isEdit="true" .app-container { min-height: 100vh; padding: 20px; } .toggle-button { padding: 10px 20px; background-color: #00bcd4; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 16px; transition: background-color 0.2s ease; } .toggle-button:hover { background-color: #0097a7; } main { padding: 20px; } [V0_FILE]json:file="angular.json" { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "sidebar-demo": { "projectType": "application", "schematics": {}, "root": "", "sourceRoot": "src", "prefix": "app", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/sidebar-demo", "index": "src/index.html", "main": "src/main.ts", "polyfills": ["zone.js"], "tsConfig": "tsconfig.app.json", "assets": ["src/favicon.ico", "src/assets"], "styles": ["src/styles.css"], "scripts": [] }, "configurations": { "production": { "budgets": [ { "type": "initial", "maximumWarning": "500kb", "maximumError": "1mb" }, { "type": "anyComponentStyle", "maximumWarning": "2kb", "maximumError": "4kb" } ], "outputHashing": "all" }, "development": { "buildOptimizer": false, "optimization": false, "vendorChunk": true, "extractLicenses": false, "sourceMap": true, "namedChunks": true } }, "defaultConfiguration": "production" } } } } } [V0_FILE]json:file="package.json" { "name": "sidebar-demo", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "watch": "ng build --watch --configuration development", "test": "ng test" }, "private": true, "dependencies": { "@angular/animations": "^16.0.0", "@angular/common": "^16.0.0", "@angular/compiler": "^16.0.0", "@angular/core": "^16.0.0", "@angular/forms": "^16.0.0", "@angular/platform-browser": "^16.0.0", "@angular/platform-browser-dynamic": "^16.0.0", "@angular/router": "^16.0.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.13.0" }, "devDependencies": { "@angular-devkit/build-angular": "^16.0.0", "@angular/cli": "~16.0.0", "@angular/compiler-cli": "^16.0.0", "@types/jasmine": "~4.3.0", "jasmine-core": "~4.6.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.2.0", "karma-coverage": "~2.2.0", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.0.0", "typescript": "~5.0.2" } }

Olá, {{userName}}!

Olá, {{userName}}!

Main Content