import { Component } from '@angular/core';

@Component({
  selector: 'app-click-event',
  template: `<div (click)="stopPropagation($event)">Click on me!</div>`
})
export class ClickEventComponent {

  stopPropagation(event: Event) {
    event.stopPropagation();
    console.log('Div clicked!');
  }
}

ngClass
string | string[] | Set<string> | { [klass: string]: any; } | null | undefined

<some-element [ngClass]="stringExp|arrayExp|objExp|Set">...</some-element>
<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

<some-element [class]="'first second'">...</some-element>
<some-element [class.expanded]="isExpanded">...</some-element>
<some-element [class]="['first', 'second']">...</some-element>
<some-element [class]="{'first': true, 'second': true, 'third': false}">...</some-element>

//[ngStyle]="{'Style':動態欄位}"
[ngStyle]="{'background-color': sendBgStyle}"
<some-element [ngStyle]="{'max-width.px': widthExp}">...</some-element>

<some-element [style]="{'font-style': styleExp}">...</some-element>

npm init quasar

cd quasar-project
npm run dev

npm install dotenv --save

DEFAULT_API=https://xxx.xxx.com

<script setup lang="ts">
import { onMounted } from 'vue';
onMounted(() => {
  console.log(process.env.DEFAULT_API);
});
</script>

import {HttpClient, HttpHeaders } from '@angular/common/http';

@Component({
  selector: 'app-test-list',
  imports: [NgFor],
  templateUrl: './test-list.component.html',
  styleUrl: './test-list.component.scss'
})

export class TestListComponent implements OnInit {
    getLists() {
         const apiUrl ="https://xxxx"
        this.http.get<addListsType[]>(`${apiUrl}/api/toDoLists`, this.httpOptions).pipe(catchError(this.handleError))
        .subscribe((lists )=> {
            consle.log(lists)
             this.todoDataList = lists;
        })
    }
}

import {HttpClient, HttpHeaders } from '@angular/common/http';

@Component({
  selector: 'app-test-list',
  imports: [NgFor],
  templateUrl: './test-list.component.html',
  styleUrl: './test-list.component.scss'
})

export class TestListComponent implements OnInit {
    constructor( private http: HttpClient ) { }
    private readonly httpOptions = {
        headers: new HttpHeaders({ 'Content-Type': 'application/json' })
    };
    private handleError(error: any) {
     console.error('API 錯誤:', error);
     return throwError(() => new Error(error.message || '錯誤已消失'));
    }
    todoDataList: addListsType[] = [];
    tableHeader: string[] = ['項目','名稱','建立日期','更新日期','操作'];
    getLists() {
        const apiUrl ="https://xxxx"
        this.http.get<addListsType[]>(`${apiUrl}/api/toDoLists`, this.httpOptions).pipe(catchError(this.handleError))
        .subscribe((lists )=> {
            let arrLists:any[] = [];
            lists.map( (item: any,index:number) => {
            let query: any = {
                _id: item._id,
                title: item.title,
                Editing: false, // 編輯
                Status: false, //選取狀態
                CanEdit: true, //可以編輯
                buildDate: item.buildDate,
                updataDate: item.buildDate,
            }
            // 新增的欄位push 到陣列
            arrLists.push(query);
      
            //排序
            arrLists.sort((a, b) => {
                return b.buildDate - a.buildDate
            })
        })
        //渲染的陣列等於新增後後的陣列
        this.todoDataList = arrLists;
        })
    }
}

<table class="table table-striped">
  <thead >
    <tr >
        <th *ngFor="let item of  tableHeader| slice: 0 : 5  ;let index = index " scope="col">{{item}}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of todoDataList;let index = index">
      <td>{{index +1}}</td>
      <td>{{item.title | uppercase }} </td>
      <td>{{item.buildDate | date:'yyyy-MM-dd HH:mm' }} </td>
      <td>{{item.updataDate  | TaiwanYear }} </td>

      <td>
       <button type="button" class="btn btn-secondary">Cancel</button>
        <button type="button" class="btn btn-success ml-2">Submit</button></td>
    </tr>
  </tbody>
</table>

export function provideHttpClient(
  ...features: HttpFeature<HttpFeatureKind>[]
): EnvironmentProviders {
  if (ngDevMode) {
    const featureKinds = new Set(features.map((f) => f.ɵkind));
    if (
      featureKinds.has(HttpFeatureKind.NoXsrfProtection) &&
      featureKinds.has(HttpFeatureKind.CustomXsrfConfiguration)
    ) {
      throw new Error(
        ngDevMode
          ? `Configuration error: found both withXsrfConfiguration() and withNoXsrfProtection() in the same call to provideHttpClient(), which is a contradiction.`
          : '',
      );
    }
  }

  const providers: Provider[] = [
    // 1. HttpClient 是最常用的Service Providers 
    HttpClient,
    HttpXhrBackend,
    HttpInterceptorHandler,
    {provide: HttpHandler, useExisting: HttpInterceptorHandler},
    // 2. default Angular 內部使用XMLHttpRequest發送請求
    {provide: HttpBackend, useExisting: HttpXhrBackend},
    {
      provide: HTTP_INTERCEPTOR_FNS,
      useValue: xsrfInterceptorFn,
      multi: true,
    },
    {provide: XSRF_ENABLED, useValue: true},
    {provide: HttpXsrfTokenExtractor, useClass: HttpXsrfCookieExtractor},
  ];

  for (const feature of features) {
    providers.push(...feature.ɵproviders);
  }
  // 製作環境提供者
  return makeEnvironmentProviders(providers);
}

import { Injectable, inject } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class WebApiService {
  private readonly http = inject(HttpClient);

  private readonly httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
  };

  get(url: string): Observable<any> {
    return this.http.get(url, this.httpOptions)
      .pipe(catchError(this.handleError));
  }

  post(url: string, model: any): Observable<any> {
    return this.http.post(url, model, this.httpOptions)
      .pipe(catchError(this.handleError));
  }

  put(url: string, model: any): Observable<any> {
    return this.http.put(url, model, this.httpOptions)
      .pipe(catchError(this.handleError));
  }

  delete(url: string): Observable<any> {
    return this.http.delete(url, this.httpOptions)
      .pipe(catchError(this.handleError));
  }

  private handleError(error: any) {
    console.error('API 錯誤:', error);
    return throwError(() => new Error(error.message || '錯誤已消失'));
  }
}

import { Injectable, inject } from '@angular/core';
import { Observable } from 'rxjs';
import { WebApiService } from './web-api.service';
import { environment } from '../../environments/environment';
import dayjs from 'dayjs'
@Injectable({ providedIn: 'root' })
export class HttpProviderService {
  private readonly apiUrl = environment.apiUrl;
  private readonly webApiService = inject(WebApiService);

  getAllLists(): Observable<any> {
    return this.webApiService.get(`${this.apiUrl}/api/toDoLists`);
  }
  // 編輯
  deleteTodoById(_id: string): Observable<any> {
    return this.webApiService.delete(`${this.apiUrl}/api/toDo/${encodeURIComponent(_id)}`);
  }

  getTodoById(id: string): Observable<any> {
    return this.webApiService.get(`${this.apiUrl}/api/toDo/${encodeURIComponent(id)}`);
  }
  // 新增
  addList(newTask: string): Observable<any> {
    let query:any = {
      title: newTask,
      buildDate: Date.now(),
      updataDate: Date.now(),
    }
    return this.webApiService.post(`${this.apiUrl}/api/toDo`,query);
  }

  // 編輯
  updateTodo(item: any): Observable<any> {
      console.log('updateTodo', item)
    let query:any = {
      title: item.title,
      buildDate: dayjs(item.buildDate).valueOf(),//改為時間搓
      updataDate: Date.now(),
    }
    return this.webApiService.put(`${this.apiUrl}/api/toDo/${encodeURIComponent(item._id)}`, query);
  }
}

npm create vite@latest

cd 專案

npm install ngx-pagination --save

import {ChangeDetectionStrategy,Component,Input,OnInit,Output,EventEmitter,} from '@angular/core';
import { addListsType } from '../../Types/toDo'
import { NgFor, NgIf, NgClass, CommonModule } from '@angular/common';
＋ import {NgxPaginationModule} from 'ngx-pagination';
import { FormsModule } from '@angular/forms';

@Component({
   selector: 'app-to-do-list',
  imports: [NgxPaginationModule,NgFor,NgIf,NgClass,FormsModule,CommonModule ],
  templateUrl: './to-do-list.component.html',
  styleUrl: './to-do-list.component.scss',
＋    changeDetection: ChangeDetectionStrategy.OnPush
})

＋ export class BasicExampleComponent implements OnInit {
＋    @Input() sendTodoList?:addListsType[] |any ;
    @Input() sendItemId?: string;
    @Input() sendErrorItemMessage?: string;
    @Input() sendEditItem?: Observable<addListsType[]>;

    @Output() newItem = new EventEmitter<addListsType>();
    @Output() newId = new EventEmitter<string>();
    @Output() newEvent = new EventEmitter<any>();
    @Output() newUpdateItem = new EventEmitter<addListsType>();

    openEditItem(item:any) {
        this.newItem.emit(item);
    }
    editItem(item: any) {
        this.newUpdateItem.emit(item);
    }
    openDeleteAlert(id:string) {
        this.newId.emit(id)
    }
    deleteItem(id:string) {
        this.newId.emit(id)
    }
    blurEvent(event:any) {
        this.newEvent.emit(event)
    }
    // 每頁幾筆
＋    currentPage: number | undefined = 1;
    // 當前頁面
＋    itemsPerPage: number = 10;
    // 全部筆數
＋    totalItems: number | any

＋    pagePerOptions = [
＋        { value: 5, label: '5筆' },
＋        { value: 10, label: '10筆' },
＋        { value: 15, label: '15筆' },
＋        { value: 20, label: '20筆' },
＋        { value: 30, label: '30筆' },
＋        { value: 40, label: '40筆' },
＋        { value: 50, label: '50筆' },
＋    ]
// 選擇變換每頁顯示筆數
＋    changeItemsPerPage(item: any) {
＋        this.itemsPerPage = item.value;
＋   }
// 設備變換時改變每頁顯示
  deviceWidth:number =screen.width;
  deviceDisplay() {
    if (typeof Screen !== undefined) {
      switch (this.deviceWidth) {
        case 1920:
          this.itemsPerPage=20;
        break;
        case 1560:
          this.itemsPerPage=15;
          break;
        case 1440:
          this.itemsPerPage=10;
        break;
      }
    }
  }
    ngOnInit(): void {
        this.deviceDisplay()
    }
}

<div class="lists">
  <ul *ngIf="sendTodoList">
    <li 
    *ngFor="let item of sendTodoList |
  paginate: { itemsPerPage: itemsPerPage, currentPage: currentPage} ">
      <div class="subject">
        <label [for]="item._id">
          <span class="edit_area"
          [ngClass]="sendItemId === item._id ? 'noEditing' : ''"
          >
          {{item.title}}
          </span>
          <div class="edit_input_area"
           [ngClass]="sendItemId === item._id? 'editing' : ''"
         >
            <input
          type="text"
          (blur)="blurEvent($event)"
          [(ngModel)]="item.title"
          [value]="item.title"
       >
          <div class="errorMessage">
          {{sendErrorItemMessage}}</div>
          </div>
        </label>
      </div>
      <div class="buildDate">
        {{item.buildDate}}
      </div>
      <div class="updataDate">
        {{item.updataDate}}
      </div>
      <div class="btns_group">
        <button 
        (click)="openEditItem(item)"
        [ngClass]="sendItemId === item._id ? 'noEditing' : ''"
        class="btns edit" >
        <span>編輯</span><i class="fa-solid fa-pencil"></i>
      </button>
         <button (click)="editItem(item)"
          [ngClass]="sendItemId === item._id? 'editing' : ''"
         class="btns add"><span>儲存</span><i class="fa-solid fa-plus"></i></button>
        <button
        (click)="openDeleteAlert(item._id)"
        class="btns delete"><span>刪除</span> <i class="fa-solid fa-xmark"></i></button>
        </div>
    </li>
  </ul>
</div>
<!--分頁細節-->
<div class="pagination_area">
   <pagination-controls class="my-pagination" (pageChange)="currentPage = $event"></pagination-controls>
   <div class="pagination_detail">
    <div class="total_length">
    共{{sendTodoList?.length}}筆，</div>
   <div class="currentPage"> 當前第{{currentPage}}頁，</div>
  <div class="itemsPerPage">每頁{{itemsPerPage}}筆</div>
  </div>
   <div class="btn-group">
  <a class="btn" data-toggle="dropdown" aria-expanded="false">
  筆數
  </a>
  <div class="dropdown-menu">
    <a class="dropdown-item"
    *ngFor="let item of pagePerOptions"
     (click)="changeItemsPerPage(item)"
    >{{item.label}}
  </a>
  </div>
</div>
</div>

.btns{
  display: flex;
  height: 30px;
  width:70px;
  justify-content: center;
  align-items: center;
}
.add{
  background-color: green;
  border: 1px solid green;
  color:white;
  &:hover,&:focus{
    background-color: #0f760f;
    border: 1px solid #0f760f;
  }
}
.edit{
  background-color: #ff9800;
  border: 1px solid #ff9800;
  color:white;
  &:hover,&:focus{
    background-color: #bc750c;
    border: 1px solid #bc750c;
  }
}
.delete{
  background-color: red;
  border: 1px solid red;
  color:white;
  &:hover,&:focus{
    background-color: rgb(182, 9, 9);
    border: 1px solid rgb(182, 9, 9);
  }
}
nav{
  display: block;
  unicode-bidi: isolate;
}
.lists{
  display: flex;
  justify-content: center;
  width: 60%;
  max-width: 60%;
  margin: auto;
  ul{
    list-style: none;
    padding-inline-start: 0px;
     width: 100%;
      max-width: 100%;
     min-height: 800px;
    li{
      border-bottom:1px solid #ddd;
      display: flex;
      list-style: none;
      .subject{
        align-items: center;
        display: flex;
        padding: 2px auto;
        padding-left: 15px;
        width: 50%;
        label{
          display: flex;
          justify-content: flex-start;
          width: 95%;
          margin-bottom: 0;
          span.edit_area{
             display:flex;
             &.noEditing{
                display: none;
              }
          }
          .edit_input_area{
            align-items: center;
            display: none;
            flex-direction: column;
            justify-content: flex-start;
            width: 100%;
            input{
              display: flex;
              border: 1px dashed #263238;
            }
            &.editing{
                display: flex;
            }
          }
        }

      }
      .buildDate,.updataDate{
        display: flex;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
        font-size: 14px;
        padding-left: 6px;
      }
      .btns_group{
        display: flex;
      }
      a,button{
        margin: 5px;
        cursor: pointer;
        white-space: nowrap;
        &:disabled {
           cursor: not-allowed;
        }
        i{
          margin-left: 5px;
        }
        &.edit{
          display: flex;
          &.noEditing{
            display: none;
          }
        }
        &.add{
          display: none;
          &.editing{
            display: flex;
          }
          &:disabled{
            cursor: not-allowed;
          }
        }
      }
    }
  }
}


input{
    display: block;
    width: 100%;
    height: calc(1.2em + .75rem + 2px);
    padding: 0.075rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    margin-left: -.75rem;
    &:hover{
      color: #495057;
      background-color: #fff;
      border-color: #80bdff;
      outline: 0;
      box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
    }
}
.errorMessage{
  color:red;
  font-size: 12px;
  align-self: flex-start;
  margin-left: -15px;
}



.editing{
  display: flex;
}
.noEditing{
  display: none;
}
@media screen and (width<=1560px) {
  .lists{
    ul{
      min-height: 480px;
    }
  }
}
@media screen and (width<=1440px) {
  .lists{
    ul{
      min-height: 480px;
    }
  }
}
@media screen and (width<=820px){
  .add_form,
  .lists{
     width: 80%;
    max-width: 80%;
  }
}
//
@media screen and (width<=768px){
  .lists {
    width: 85%;
    max-width:  85%;
    ul {
      margin-left: 10px;
      width: 90%;
      li {
        margin-left: -15px;
        .subject {
          width: 45%;
        }
      }
    }
  }
}
@media screen and (width<=667px){
  .lists {
    width: 85%;
    max-width:  85%;
    ul {
      margin-left: 10px;
      width: 90%;
      li {
        margin-left: -15px;
        flex-wrap: wrap;
        div{
          padding: 10px;
        }
        .subject {
          min-width: 100%;
          background-color: #f4f3f3;
          label{
            width: 100%;
            height: auto;
            .edit_input_area{
              &.editing{
                flex-direction: none;
                padding: 0px;
                height: 55px;
              }
              .errorMessage{
                padding: 0;
              }
            }
          }
        }
        .buildDate,.updataDate{
           min-width: 45%;
           margin: auto;
        }
        .btns_group{
           margin: auto;
        }
      }
    }
  }
}
@media screen and (width<=600px){
  .lists ul li a {
    span{
      display: none;
    }
      i{
        font-size: 1.4rem;
      }
      &.delete{
        i{
          font-size: 1.7rem;
        }
      }
  }
}
//iphone5/SE
@media screen and (width<=568px){
  .lists {
    ul {
      li {
        .subject {
          width: 100%;
          max-width:  100%;
          white-space:nowrap;

        }
        .buildDate{
          flex-direction: column;
        }
      }
    }
  }
}
//iphone 14 pro
@media screen and (width<=430px){
  .lists ul li {
    margin-left: -15px;
    .subject label .edit_area{
      font-size: 1.1rem;
    }
  }
}
@media screen and (width<=414px){
  .lists ul li {
    margin-left: -15px;
    .subject label .edit_area{
      font-size: 1.1rem;
    }
    a{
      &.btns{
        width: 50px;
      }
      i{
        font-size: 1.4rem;
      }
      &.delete{
        i{
          font-size: 1.7rem;
        }
      }
    }
  }
}
.pagination_area{
  display: flex;
  justify-content: center;
    .my-pagination ::ng-deep {
       align-items: center;
    .ngx-pagination {
      display: flex;
      justify-content: center;
      li{
        &:first-child{
              margin-right: 22px;
        }
        &.current {
          background: transparent;
          border-radius: 50%;
          width: 32px;
          height: 32px;
          border: 2px solid #ffd207;
          color:#333;
        }
        &.pagination-previous{
          position: relative;
          width: 25px;
          &.disabled{
            color: #ddd;
              position: relative;
            &:before{
              font-size: 42px;
              position: absolute;
              top: -17px;
              left: 0px;
            }
            span{
              display: none;
            }
          }
          a{
            position: relative;
            font-size: 0px;
            &:before{
              color: #333;
              font-size: 35px;
              position: absolute;
              top: -11px;
              left: -3px;
            }
            &:hover{
              background: transparent;
              border:0px solid transparent;
            }
          }
          &:hover{
            border-style: transparent;
          }
        }
        a{
          &:hover{
            font-weight: bolder;
            background: transparent;
            border-color: #ffd207;
          }
        }
        &.pagination-next {
          width: 45px;
          &:hover{
            border-color: transparent;
          }
          &::after{
              color: #333;
              font-size: 35px;
          }
          &.disabled{
            color: #ddd;
              position: relative;
            &:before{
              font-size: 35px;

            }
            &::after{
              color: #ddd;
              font-size: 35px;
              position: absolute;
              top: -11.5px;
              left: 17px
            }
            span{
              display: none;
            }
          }
          a{
            color: transparent;
            font-size: 0px;
            position: relative;
            &:hover{
                font-weight: bolder;
                background: transparent;
                border-bottom: 1px solid red;
              }
            &:after{
              margin-left: 0rem;
              color: #333;
              font-size: 35px;
              position: absolute;
              top: -14px;
              left: 20px;
            }
            &:hover{
              background: transparent;
              border:0px solid transparent;
            }
          }
        }
      }
    }
    }
    .pagination_detail{
      display: flex;
      margin-top: 4px;
    }
    .btn-group{
      margin-left: 10px;
      .btn{
        height: 32px;
        border: 2px solid #ffd207;
        padding: 2px 5px;
        &:hover,&:focus{
          background-color: #ffd207;
          color:#333;
        }
      }
      .dropdown-menu{
        min-width: 5rem;
      }
    }
 }

@media screen and (width<=480px){
  .pagination_area {
    margin-left: -15px;
    .pagination_detail{
      font-size: 1.1rem;
      .currentPage{
        display: none;
      }
    }
  }
}
@media screen and (width<=428px){
  .pagination_area {
    .pagination_detail{
      display: none;
    }
  }
}
@media screen and (width<=360px){
.pagination_area .my-pagination .ngx-pagination {
  li{
    &:first-child {
      margin-right: 5px;
    }
    &.pagination-previous a{
      &:before {
        left: 5px;
      }
    }
    &.current{
      height: 28px;
      width: 28px;
    }
  }
}

}

[傳值參數]= 父元件內的傳值欄位參數

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
＋import { NavbarComponent } from './components/navbar/navbar.component';
import { CreateNavComponent} from './components/create-nav/create-nav.component';
import { environment } from '../environment/environment'
import { navListType,navListActiveType } from './Types/nav';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
＋  imports: [RouterOutlet,NavbarComponent,CreateNavComponent],
  styleUrl: './app.component.scss'
})

export class AppComponent {
  title = 'vite_project';
  navLists: navListType[] = [
    { title: 'Home', path: '/' },
    { title: 'Users', path: 'users' },
    {title:'Login',path:'login'}
  ]
  isActive: navListActiveType["isActive"] = true;
  pageTitle: navListActiveType["pageTitle"] = "Home";
   actionList(title: string) {
    this.pageTitle = title;
   }
  bgStyle:string ='red'
  ngOnInit() {
     console.log(environment.production ? 'Production' : '開發中')
  }
}

<app-navbar
    [sendNavLists]="navLists"
    [sendPageTitle]="pageTitle"
    [sendIsActive]="isActive"
    (newPageTitle)="actionList($event)"
></app-navbar>
<app-create-nav
    [sendBgStyle]="bgStyle"
    [sendCreateLists]="navLists"
    [sendPageTitle]="pageTitle"
    [sendIsActive]="isActive"
    (newPageTitle)="actionList($event)"
></app-create-nav>

<main class="main">
</main>
<router-outlet />

import { NgFor,NgClass } from '@angular/common';
+ import { Component,OnInit ,Input,Output, EventEmitter} from '@angular/core';
import { RouterLink } from '@angular/router'; // a標籤 [RouterLink]
import { navListType } from '../../Types/nav'; // Type屬性
//@Component=>裝飾器
@Component({
  selector: 'app-navbar',
＋  imports: [RouterLink,NgFor,NgClass],
  templateUrl: './navbar.component.html',
  styleUrl: './navbar.component.scss'
})
// 實現初始化 implements OnInit
+ export class NavbarComponent implements OnInit {
    //父對子傳值
＋  @Input() sendNavLists!: navListType[];
＋  @Input() sendPageTitle!: string;
＋  @Input() sendIsActive!: boolean;
    // 子對父傳值
＋  @Output() newPageTitle = new EventEmitter<string>();
 //點擊頁面按鈕函式
  sendActionList(path: string) {
    this.newPageTitle.emit(path);
  }
  ngOnInit(): void {}
}

<nav class="nav">
   <ul>
     <li
+     *ngFor="let item of sendNavLists ; let i = index"
+    [ngClass]="sendPageTitle === item.title ? 'activeNav' : ''"
     >
        <a
+       [routerLink]="item.path"

+        (click)="sendActionList(item.title)"
+        class="cursor-pointer"
        >{{item.title}}</a>
     </li>

   </ul>
 </nav>

ul{
  display: flex;
  li{
    list-style: none;
    display: flex;
    margin: auto 10px;
  }
}
.nav {
  background-color: #ffd207;
  box-shadow: 2px 2px 2px 1px #0003;
  display: flex;
  height: 70px;
  justify-content: center;
  list-style-type: none;
  margin: 0px auto auto auto;
  padding-inline-start: 0px;
  max-width: 100%;
  width: 100%;

  li {
    display: flex;
    list-style-type: none;
    margin: auto 10px;
    &.activeNav {
      border-bottom: 1px solid #333;
    }
    a {
      cursor: pointer;
      color: #333;
      font-size: 1.4rem;
      text-decoration: none;
    }
  }
}

.activeNav {
  border-bottom: 1px solid #333;
}