feat(tabs): add bottom area, tab url as optional

projects/components/src/lib/footer/footer.component.html

@@ -1,4 +1,4 @@
-<footer class="w-full max-w-screen-xl mx-auto text-white p-2">
+<footer class="w-full max-w-screen-xl mx-auto text-white p-5">
   <div class="md:grid md:grid-cols-2">
     <div class="p-4">
       <p class="text-sm text-color-light">about</p>

projects/components/src/lib/tab/tab.component.html

@@ -1,8 +1,9 @@
-<div class="flex justify-center items-center xs:flex-1 md:flex md:h-24 md:flex-none" [ngClass]="'logo'"
-  [class.xs:hidden]="tab.hideOnMobile" [class.md:hidden]="tab.hideOnDesktop">
-  <a class="flex flex-col items-center hover:text-blue" [class.hover:text-color]="tab.logo" [routerLink]="tab.url"
-    [routerLinkActive]="tab.routeActive ? 'active-tab' : ''">
-    <niz-inline-svg class="h-10 w-10" [svgSource]="tab.image"></niz-inline-svg>
+<div
+  class="flex justify-center items-center xs:flex-1 md:flex md:h-24 md:flex-none hover:text-blue hover:bg-blue-opacity-10 focus:outline-none"
+  [ngClass]="'logo'" [class.xs:hidden]="tab.hideOnMobile" [class.md:hidden]="tab.hideOnDesktop"
+  [class.hover:text-color]="tab.logo" [routerLink]="tab.url">
+  <a class="flex flex-col items-center " [routerLinkActive]="tab.routeActive ? 'active-tab' : ''">
+    <niz-inline-svg class="h-8 w-8" [svgSource]="tab.image"></niz-inline-svg>
     <span *ngIf="tab.text" class="mt-1 text-lg font-semibold tracking-tight">{{tab.text}}</span>
   </a>
 </div>

projects/components/src/lib/tabs/tabs.component.html

@@ -1,6 +1,9 @@
 <nav
   class="fixed flex bg-tabs z-10 xs:flex-row xs:bottom-0 xs:h-20 xs:w-screen md:flex-col md:top-0 md:h-screen md:w-20">
   <niz-tab *ngFor="let tab of tabs" [tab]="tab"></niz-tab>
+  <div class="flex flex-1 md:flex-grow flex-col-reverse">
+    <ng-content select="[bottom]"></ng-content>
+  </div>
 </nav>
 <div class="w-full min-h-screen xs:pb-20 md:pl-20 ">
   <ng-content></ng-content>

projects/components/src/lib/utils/symbols.ts

@@ -1,8 +1,8 @@
 export interface Tab {
-  url: string;
+  url?: string;
   logo?: boolean;
   text?: string;
-  routeActive: boolean;
+  routeActive?: boolean;
   image: string;
   hideOnMobile?: boolean;
   hideOnDesktop?: boolean;

src/app/app.component.html

@@ -1,4 +1,5 @@
 <niz-tabs [tabs]="tabs">
+  <niz-tab bottom [tab]="themeTab" (click)="bla()"></niz-tab>
   <niz-toolbar>
     <div start>
       <a class="block focus:outline-none" [routerLink]="['/']">
@@ -16,9 +17,10 @@
     </div>
   </niz-toolbar>
 
-  <main class="w-full max-w-screen-xl mx-auto p-2">
+  <main class="w-full max-w-screen-xl mx-auto p-5">
     <router-outlet></router-outlet>
   </main>
 
-  <niz-footer [footerSections]="footerSections" [copyrightUrl]="copyrightUrl" [createdWithSvgSources]="createdWithSvgSources"></niz-footer>
+  <niz-footer [footerSections]="footerSections" [copyrightUrl]="copyrightUrl"
+    [createdWithSvgSources]="createdWithSvgSources"></niz-footer>
 </niz-tabs>

src/app/app.component.ts

@@ -40,6 +40,10 @@ export class AppComponent {
     },
   ];
 
+  themeTab: Tab = {
+    image: 'assets/img/adjust.svg',
+  };
+
   copyrightUrl = 'legal/privacy-policy';
 
   createdWithSvgSources = [
@@ -94,4 +98,8 @@ export class AppComponent {
       ],
     },
   ];
+
+  bla() {
+    console.log('click theme');
+  }
 }

src/app/app.module.ts

@@ -7,6 +7,8 @@ import {
   NizTabsModule,
   NizToolbarModule,
   NizFooterModule,
+  NizInlineSvgModule,
+  NizTabModule,
 } from '@notiz/ngx-design';
 import { AppRoutingModule } from './app-routing.module';
 
@@ -19,6 +21,8 @@ import { AppRoutingModule } from './app-routing.module';
     NizTabsModule,
     NizToolbarModule,
     NizFooterModule,
+    NizInlineSvgModule,
+    NizTabModule,
   ],
   providers: [],
   bootstrap: [AppComponent],