docs: fix some layout

Author: klerick

apps/example-ng-pixijs/src/app/app.component.html

@@ -1,9 +1,5 @@
-<ng-doc-root
-  [sidebar]="!hideSidebar()"
-  [noWidthLimit]="hideSidebar()"
-  [footerContent]="footerContent"
->
-  <ng-doc-navbar>
+<ng-doc-root [noWidthLimit]="!!hideSidebar()" [footerContent]="footerContent">
+  <ng-doc-navbar [ngClass]="{ 'hide-sidebar': hideSidebar() }">
     <a class="brand" routerLink="/" ngDocNavbarLeft>
       <h3>
         <!--&lt;!&ndash;            <img src="assets/images/ng-doc.svg" />&ndash;&gt;-->
@@ -18,20 +14,22 @@ <h3>
         ng-doc-button-icon
         ngDocTooltip="Repository on GitHub"
         size="large"
-        target="_blank">
+        target="_blank"
+      >
         <ng-doc-icon [size]="24" customIcon="github"></ng-doc-icon>
       </a>
     </div>
-
   </ng-doc-navbar>
-  <ng-doc-sidebar></ng-doc-sidebar>
+  <ng-doc-sidebar *ngIf="!hideSidebar()"></ng-doc-sidebar>
   <router-outlet></router-outlet>
 </ng-doc-root>
 
-
 <ng-template #footerContent>
   <div class="ng-doc-footer">
-    MIT © {{ currentDate | date: 'yyyy' }}
-    &nbsp;<a href="https://www.linkedin.com/in/aleksandr-kharkovey/" target="_blank">Aleksandr Kharkovey</a>
+    MIT © {{ currentDate | date : 'yyyy' }} &nbsp;<a
+      href="https://www.linkedin.com/in/aleksandr-kharkovey/"
+      target="_blank"
+      >Aleksandr Kharkovey</a
+    >
   </div>
 </ng-template>

apps/example-ng-pixijs/src/app/app.component.scss

@@ -1,4 +1,4 @@
-h3{
+h3 {
   cursor: pointer;
 }
 :host {
@@ -83,3 +83,10 @@ h3{
     }
   }
 }
+ng-doc-navbar.hide-sidebar {
+  ::ng-deep {
+    .ng-doc-menu {
+      display: none;
+    }
+  }
+}

apps/example-ng-pixijs/src/app/app.component.ts

@@ -1,18 +1,19 @@
 import { Component, inject } from '@angular/core';
+import { Location } from '@angular/common';
 import { NavigationEnd, Router, RouterModule } from '@angular/router';
 import {
   NgDocNavbarComponent,
   NgDocRootComponent,
   NgDocSidebarComponent,
-  NgDocThemeToggleComponent
+  NgDocThemeToggleComponent,
 } from '@ng-doc/app';
 import {
   NgDocButtonIconComponent,
   NgDocIconComponent,
   NgDocTooltipDirective,
-  preventInitialChildAnimations
+  preventInitialChildAnimations,
 } from '@ng-doc/ui-kit';
-import { DatePipe } from '@angular/common';
+import { DatePipe, NgClass, NgIf } from '@angular/common';
 import { filter, map } from 'rxjs';
 import { toSignal } from '@angular/core/rxjs-interop';
 
@@ -28,20 +29,29 @@ import { toSignal } from '@angular/core/rxjs-interop';
     DatePipe,
     NgDocButtonIconComponent,
     NgDocTooltipDirective,
+    NgIf,
+    NgClass,
   ],
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
   standalone: true,
 })
 export class AppComponent {
+  location = inject(Location);
   router = inject(Router);
   title = 'NgPixiJS ';
   hideSidebar$ = this.router.events.pipe(
     filter((e) => e instanceof NavigationEnd),
-    map(() => this.router.url.split('/').filter((i) => !!i).length === 0)
+    map(() => this.isHideSidebar(this.router.url))
   );
 
-  hideSidebar = toSignal(this.hideSidebar$, { initialValue: true });
+  hideSidebar = toSignal(this.hideSidebar$, {
+    initialValue: this.isHideSidebar(this.location.path()),
+  });
   currentDate = new Date();
+
+  isHideSidebar(path: string) {
+    return !new URL(path, 'http://localhost').pathname.slice(1);
+  }
 }

apps/example-ng-pixijs/src/app/example/example.component.scss

@@ -1,7 +1,9 @@
-:host{
+:host {
   position: relative;
+  width: 520px;
+  height: 540px;
 }
-.game-bg{
+.game-bg {
   position: absolute;
   left: 0;
   top: 0;
@@ -11,18 +13,8 @@
   opacity: 0.5;
   z-index: 0;
 }
-//.game-action{
-//  position: absolute;
-//  left: 0;
-//  top: 32px;
-//  right: 0;
-//  bottom: 0;
-//  display: flex;
-//  justify-content: center;
-//  align-items: center;
-//  z-index: 1;
-//}
-.game-info{
+
+.game-info {
   position: absolute;
   left: 0;
   top: 0;
@@ -32,13 +24,13 @@
   justify-content: center;
   align-items: center;
   z-index: 1;
-  &.start{
+  &.start {
     justify-content: right;
     bottom: auto;
     height: 40px;
   }
 }
-.game-speed{
+.game-speed {
   height: 40px;
   display: flex;
   align-items: center;

apps/example-ng-pixijs/src/app/main/main.component.scss

@@ -1,4 +1,9 @@
 :host {
+  @media (max-width: 500px) {
+    .try-it {
+      display: none;
+    }
+  }
   section {
     position: relative;
 
@@ -55,19 +60,24 @@
           margin-top: calc(var(--ng-doc-base-gutter) * 2);
           justify-content: center;
           a {
-            --ng-doc-button-padding: var(--ng-doc-base-gutter) calc(var(--ng-doc-base-gutter) * 2);
+            --ng-doc-button-padding: var(--ng-doc-base-gutter)
+              calc(var(--ng-doc-base-gutter) * 2);
             --ng-doc-font-size: 22px;
             --ng-doc-line-height: 32px;
             --ng-doc-font-weight: 600;
 
-            background: linear-gradient(-45deg, #ffa63d, #ff3d77, #338aff, #3cf0c5);
+            background: linear-gradient(
+              -45deg,
+              #ffa63d,
+              #ff3d77,
+              #338aff,
+              #3cf0c5
+            );
             background-size: 600%;
             -webkit-animation: anime 16s linear infinite;
             animation: scale 16s linear infinite;
             box-shadow: 0 0 23px 1px rgba(0, 0, 0, 0.2);
-            transition:
-              var(--ng-doc-transition) transform,
-              box-shadow;
+            transition: var(--ng-doc-transition) transform, box-shadow;
 
             &:hover {
               transform: scale(1.05);
@@ -144,5 +154,3 @@
 figure {
   margin: 0;
 }
-
-