Add common buttons, add collapsable menu

src/app/common-components/btn/btn.component.html

@@ -0,0 +1,6 @@
+<button type="button" [class]="btnClass()">
+  <div class="h-6 *:pr-2"><ng-content select="ng-icon"></ng-content></div>
+  <span>
+    <ng-content />
+  </span>
+</button>

src/app/common-components/btn/btn.component.spec.ts

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

src/app/common-components/btn/btn.component.ts

@@ -0,0 +1,33 @@
+import { Component, computed, input } from '@angular/core';
+
+@Component({
+  selector: 'app-btn',
+  standalone: true,
+  imports: [],
+  templateUrl: './btn.component.html',
+})
+export class BtnComponent {
+  main = input(false);
+
+  btnClass = computed(() => {
+    const clasess = ['h-12', 'flex', 'flex-row', 'items-center', 'rounded-lg', 'px-5', 'py-2.5', 'text-sm', 'font-medium'];
+
+    if (this.main()) {
+      return clasess.concat(['bg-primary-700', 'text-white', 'hover:bg-primary-800', 'focus:ring-primary-300', 'dark:bg-primary-600', 'dark:hover:bg-primary-700']);
+    } else {
+      return clasess.concat([
+        'border',
+        'border-gray-200',
+        'bg-white',
+        'text-gray-900',
+        'hover:bg-gray-100',
+        'hover:text-primary-700',
+        'dark:border-gray-600',
+        'dark:bg-gray-800',
+        'dark:text-gray-400',
+        'dark:hover:bg-gray-700',
+        'dark:hover:text-white',
+      ]);
+    }
+  });
+}

src/app/common-components/strava-btn/strava-btn.component.html

@@ -1,3 +1,3 @@
-<button type="button" (click)="onButtonClick()" (keydown)="onButtonClick()" class="h-full border-spacing-1 rounded-md bg-strava transition-opacity duration-500 hover:opacity-50">
-  <img src="assets/strava/login-orange.svg" alt="Login with strava" tabindex="-1" class="h-full object-contain" />
+<button type="button" class="h-full rounded-md bg-strava transition-opacity duration-500 hover:opacity-50">
+  <img src="assets/strava/login-orange.svg" alt="Connect with strava" tabindex="-1" class="h-full" />
 </button>

src/app/common-components/strava-btn/strava-btn.component.ts

@@ -1,19 +1,12 @@
-import { Component } from '@angular/core';
-import { EventEmitter, Output } from '@angular/core';
-import { provideIcons, NgIconComponent } from '@ng-icons/core';
-import { tablerLogin, tablerLogout } from '@ng-icons/tabler-icons';
+import { Component, HostBinding } from '@angular/core';
 
 @Component({
   selector: 'app-strava-btn',
   standalone: true,
-  imports: [NgIconComponent],
+  imports: [],
   templateUrl: './strava-btn.component.html',
-  providers: [provideIcons({ tablerLogout, tablerLogin })],
+  providers: [],
 })
 export class StravaBtnComponent {
-  @Output() clicked = new EventEmitter<void>();
-
-  onButtonClick() {
-    this.clicked.emit();
-  }
+  @HostBinding('class') class = 'h-12';
 }

src/app/components/main-layout/main-layout.component.html

@@ -1,22 +1,30 @@
 <div class="flex h-dvh flex-col">
-  <nav class="border-gray-200">
-    <div class="mx-auto flex max-w-screen-xl flex-wrap items-center justify-between p-2">
-      <img src="assets/logos/logo-h.svg" class="h-6 md:h-10" alt="Rowerowe Gminy Logo" />
-      @if (stravaAuthSvc.isLoggedIn()) {
-        <button type="button" data-tooltip-target="tooltip-bottom" data-tooltip-placement="bottom" (click)="stravaAuthSvc.logOut()" class="h-6">
-          <ng-icon name="tablerLogout" class="h-full" />
-        </button>
-        <div
-          id="tooltip-bottom"
-          role="tooltip"
-          class="tooltip invisible absolute z-10 inline-block rounded-lg bg-gray-900 px-3 py-2 text-sm font-medium text-white opacity-0 shadow-sm dark:bg-gray-700"
-        >
-          Wyloguj
-          <div class="tooltip-arrow" data-popper-arrow></div>
+  <nav class="border-b-2 border-gray-200">
+    <div class="mx-auto flex max-w-screen-xl flex-wrap items-center justify-between gap-2 p-2">
+      <img src="assets/logos/logo-h.svg" class="h-8 md:h-10" alt="Rowerowe Gminy Logo" />
+      <div class="grow"></div>
+      <button
+        data-collapse-toggle="navbar-solid-bg"
+        type="button"
+        class="flex h-10 w-10 items-center justify-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600 md:hidden"
+        aria-controls="navbar-solid-bg"
+        aria-expanded="false"
+      >
+        <span class="sr-only">Open main menu</span>
+        <ng-icon name="tablerMenu2" class="h-full" />
+      </button>
+      <div class="hidden w-full md:block md:w-auto" id="navbar-solid-bg">
+        <div class="flex flex-col md:flex-row">
+          @if (stravaAuthSvc.isLoggedIn()) {
+            <app-btn [main]="true" (click)="stravaAuthSvc.logOut()">
+              <ng-icon name="tablerLogout" class="h-full" />
+              Wyloguj
+            </app-btn>
+          } @else {
+            <app-strava-btn (click)="stravaAuthSvc.logIn()" />
+          }
         </div>
-      } @else {
-        <app-strava-btn (clicked)="stravaAuthSvc.logIn()" class="h-10" />
-      }
+      </div>
     </div>
   </nav>
   <div class="h-full overflow-auto *:h-full">

src/app/components/main-layout/main-layout.component.ts

@@ -1,17 +1,18 @@
 import { Component, inject } from '@angular/core';
 
-import { ActivatedRoute, Router, RouterLink, RouterLinkActive } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { AuthService } from '../../services/auth.service';
 import { NgIconComponent, provideIcons } from '@ng-icons/core';
-import { tablerLogin, tablerLogout } from '@ng-icons/tabler-icons';
+import { tablerLogin, tablerLogout, tablerMenu2 } from '@ng-icons/tabler-icons';
 import { StravaBtnComponent } from '../../common-components/strava-btn/strava-btn.component';
+import { BtnComponent } from '../../common-components/btn/btn.component';
 
 @Component({
   selector: 'app-main-layout',
   standalone: true,
-  imports: [RouterLink, RouterLinkActive, NgIconComponent, StravaBtnComponent],
-  providers: [provideIcons({ tablerLogout, tablerLogin })],
+  imports: [NgIconComponent, StravaBtnComponent, BtnComponent],
+  providers: [provideIcons({ tablerLogout, tablerLogin, tablerMenu2 })],
   templateUrl: './main-layout.component.html',
   styleUrl: './main-layout.component.scss',
 })

src/app/components/map-popup/map-popup.component.html

@@ -21,20 +21,9 @@ <h3 class="mb-2 text-lg font-semibold text-gray-700">
       </ul>
     </div>
   }
-  <div class="flex gap-2">
-    <button
-      type="button"
-      (click)="switchToParent()"
-      class="h-8 min-w-20 rounded-lg bg-primary-600 px-3 py-2 text-center text-sm font-medium leading-none text-white hover:bg-primary-800 md:min-w-32"
-    >
-      Wyżej
-    </button>
-    <button
-      type="button"
-      (click)="closeBtnPressed()"
-      class="h-8 min-w-20 rounded-lg bg-secondary-600 px-3 py-2 text-center text-sm font-medium leading-none text-white hover:bg-secondary-800 md:min-w-32"
-    >
-      Zamknij
-    </button>
+
+  <div class="flex flex-row items-start gap-2">
+    <app-btn (click)="switchToParent()">Wyżej</app-btn>
+    <app-btn (click)="closeBtnPressed()" [main]="true">Zamknij</app-btn>
   </div>
 </div>

src/app/components/map-popup/map-popup.component.ts

@@ -1,11 +1,12 @@
 import { Component, computed, effect, EventEmitter, inject, model, Output } from '@angular/core';
 import { AdmService } from '../../services/adm.service';
 import { environment } from '../../../environments/environment';
+import { BtnComponent } from '../../common-components/btn/btn.component';
 
 @Component({
   selector: 'app-map-popup',
   standalone: true,
-  imports: [],
+  imports: [BtnComponent],
   templateUrl: './map-popup.component.html',
   styleUrl: './map-popup.component.scss',
 })

src/app/components/welcome-screen/welcome-screen.component.html

@@ -5,9 +5,12 @@
       <h5 class="mb-2 text-lg font-semibold tracking-tight text-gray-900 dark:text-white">🚧🏗️⚒️ W BUDOWIE 🚧🏗️⚒️</h5>
       <p class="mb-3 font-normal text-gray-500 dark:text-gray-400">
         Rowerowe Gminy to aplikacja pozwalająca zobaczyć, które gminy w Polsce odwiedziłeś na rowerze. Twój postęp będzie śledzony automatycznie, dzięki integracji z serwisem
-        Strava. Poniższy przycisk na razie nic nie zrobi. (No, chyba, że to ty pracujesz aktualnie nad tą aplikacją)
+        Strava. Poniższy przycisk logowania na razie nic nie zrobi. (No, chyba, że to ty pracujesz aktualnie nad tą aplikacją)
       </p>
-      <app-strava-btn (clicked)="stravaAuthSvc.logIn()" />
+      <div class="flex flex-row flex-wrap items-center gap-2">
+        <app-strava-btn (click)="stravaAuthSvc.logIn()" />
+        <app-btn (click)="demoClick()">Demo</app-btn>
+      </div>
     </div>
   </div>
   <img class="fixed bottom-0 right-0 max-w-48 rounded-tl-3xl bg-white bg-opacity-50 md:max-w-64 xl:max-w-72" src="/assets/strava/powered-by.svg" alt="" />

src/app/components/welcome-screen/welcome-screen.component.ts

@@ -2,11 +2,13 @@ import { Component, inject } from '@angular/core';
 import { AuthService } from '../../services/auth.service';
 import { CustomNGXLoggerService } from 'ngx-logger';
 import { StravaBtnComponent } from '../../common-components/strava-btn/strava-btn.component';
+import { BtnComponent } from '../../common-components/btn/btn.component';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-welcome-screen',
   standalone: true,
-  imports: [StravaBtnComponent],
+  imports: [StravaBtnComponent, BtnComponent],
   templateUrl: './welcome-screen.component.html',
   styleUrl: './welcome-screen.component.scss',
 })
@@ -15,10 +17,16 @@ export class WelcomeScreenComponent {
     partialConfig: { context: 'WelcomeScreen' },
   });
 
+  routerSvc = inject(Router);
+
   stravaAuthSvc = inject(AuthService);
 
   loginClick() {
     this.logger.info('Login clicked');
     this.stravaAuthSvc.logIn();
   }
+
+  demoClick() {
+    this.routerSvc.navigate(['home']);
+  }
 }