fixes #95

src/app/layout/component/app.floatingconfigurator.ts

@@ -1,14 +1,15 @@
-import { Component, computed, inject } from '@angular/core';
+import {Component, computed, inject, input} from '@angular/core';
 import { ButtonModule } from 'primeng/button';
 import { StyleClassModule } from 'primeng/styleclass';
 import { AppConfigurator } from './app.configurator';
 import { LayoutService } from '../service/layout.service';
+import {CommonModule} from "@angular/common";
 
 @Component({
     selector: 'app-floating-configurator',
-    imports: [ButtonModule, StyleClassModule, AppConfigurator],
+    imports: [CommonModule, ButtonModule, StyleClassModule, AppConfigurator],
     template: `
-        <div class="fixed flex gap-4 top-8 right-8">
+        <div class="flex gap-4 top-8 right-8" [ngClass]="{'fixed':float()}">
             <p-button type="button" (onClick)="toggleDarkMode()" [rounded]="true" [icon]="isDarkTheme() ? 'pi pi-moon' : 'pi pi-sun'" severity="secondary" />
             <div class="relative">
                 <p-button icon="pi pi-palette" pStyleClass="@next" enterFromClass="hidden" enterActiveClass="animate-scalein" leaveToClass="hidden" leaveActiveClass="animate-fadeout" [hideOnOutsideClick]="true" type="button" rounded />
@@ -20,9 +21,12 @@ import { LayoutService } from '../service/layout.service';
 export class AppFloatingConfigurator {
     LayoutService = inject(LayoutService);
 
+    float = input<boolean>(true);
+
     isDarkTheme = computed(() => this.LayoutService.layoutConfig().darkTheme);
 
     toggleDarkMode() {
         this.LayoutService.layoutConfig.update((state) => ({ ...state, darkTheme: !state.darkTheme }));
     }
+
 }

src/app/pages/landing/components/topbarwidget.component.ts

@@ -3,10 +3,11 @@ import { StyleClassModule } from 'primeng/styleclass';
 import { Router, RouterModule } from '@angular/router';
 import { RippleModule } from 'primeng/ripple';
 import { ButtonModule } from 'primeng/button';
+import {AppFloatingConfigurator} from "@/layout/component/app.floatingconfigurator";
 
 @Component({
     selector: 'topbar-widget',
-    imports: [RouterModule, StyleClassModule, ButtonModule, RippleModule],
+    imports: [RouterModule, StyleClassModule, ButtonModule, RippleModule, AppFloatingConfigurator],
     template: `<a class="flex items-center" href="#">
             <svg viewBox="0 0 54 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-12 mr-2">
                 <path
@@ -58,6 +59,7 @@ import { ButtonModule } from 'primeng/button';
             <div class="flex border-t lg:border-t-0 border-surface py-4 lg:py-0 mt-4 lg:mt-0 gap-2">
                 <button pButton pRipple label="Login" routerLink="/auth/login" [rounded]="true" [text]="true"></button>
                 <button pButton pRipple label="Register" routerLink="/auth/login" [rounded]="true"></button>
+                <app-floating-configurator [float]="false"/>
             </div>
         </div> `
 })

src/app/pages/landing/landing.ts

@@ -27,7 +27,6 @@ import {AppFloatingConfigurator} from "@/layout/component/app.floatingconfigurat
                 <footer-widget />
             </div>
         </div>
-        <app-floating-configurator />
     `
 })
 export class Landing {}