chore(docs): added sidebar page (#DS-3649)

apps/docs/src/app/services/documentation-items.ts

@@ -549,6 +549,18 @@ const DOCS: { [key: string]: DocCategory[] } = {
                     apiId: 'select',
                     hasExamples: true
                 },
+                {
+                    id: 'sidebar',
+                    name: {
+                        ru: 'Sidebar',
+                        en: 'Sidebar'
+                    },
+                    svgPreview: 'sidebar',
+                    hasApi: true,
+                    apiId: 'sidebar',
+                    hasExamples: true,
+                    isNew: expiresAt('2025-06-16')
+                },
                 {
                     id: 'sidepanel',
                     name: {

apps/docs/src/sitemap.xml

@@ -480,6 +480,18 @@
 	<url>
 		<loc>https://koobiq.io/ru/components/select/api</loc>
 	</url>
+	<url>
+		<loc>https://koobiq.io/en/components/sidebar/overview</loc>
+	</url>
+	<url>
+		<loc>https://koobiq.io/ru/components/sidebar/overview</loc>
+	</url>
+	<url>
+		<loc>https://koobiq.io/en/components/sidebar/api</loc>
+	</url>
+	<url>
+		<loc>https://koobiq.io/ru/components/sidebar/api</loc>
+	</url>
 	<url>
 		<loc>https://koobiq.io/en/components/sidepanel/overview</loc>
 	</url>

package.json

@@ -177,7 +177,7 @@
         "build:package-docs-content": "ts-node --project ./tools/package-docs-content/tsconfig.json ./tools/package-docs-content/package-docs-content.ts",
         "styles:build-all": "ts-node --project tools/scss-compiler/tsconfig.json tools/scss-compiler/scss-bundle.ts",
         "build:schematics": "rimraf packages/schematics/dist && rollup --failAfterWarnings -c packages/schematics/rollup.config.js && node ./packages/schematics/scripts/copy-meta-to-dist.js",
-        "docs": "yarn run build:cdk && yarn run build:components && yarn run build:components-experimental && yarn run styles:build-all && yarn run build:angular-luxon-adapter && yarn run build:angular-moment-adapter && yarn run build:docs-content && yarn run build:package-docs-content && yarn run build:docs-examples-module && yarn run build:docs-examples && yarn run docs:start:dev",
+        "docs": "yarn run build:cdk && yarn run build:components && yarn run build:components-experimental && yarn run styles:build-all && yarn run build:angular-luxon-adapter && yarn run build:angular-moment-adapter && yarn run build:docs-content && yarn run build:package-docs-content && yarn run build:docs-examples-module && yarn run build:docs-examples && yarn run docs:generate-sitemap && yarn run docs:start:dev",
         "docs:start:dev": "ng serve --configuration=development koobiq-docs",
         "docs:start:prod": "ng serve --configuration=production koobiq-docs",
         "docs:generate-sitemap": "ts-node tools/generate-sitemap.ts",

packages/components-dev/sidebar/module.ts

@@ -1,45 +1,29 @@
-import { JsonPipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
-import { KbqButtonModule } from '@koobiq/components/button';
-import { KbqSidebarModule, SidebarPositions } from '@koobiq/components/sidebar';
-import { Direction, KbqSplitterModule } from '@koobiq/components/splitter';
+import { SidebarExamplesModule } from 'packages/docs-examples/components/sidebar';
+
+@Component({
+    standalone: true,
+    imports: [SidebarExamplesModule],
+    selector: 'dev-examples',
+    template: `
+        <sidebar-overview-example />
+        <hr />
+        <sidebar-with-splitter-example />
+        <hr />
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DevExamples {}
 
 @Component({
     standalone: true,
     imports: [
-        KbqSplitterModule,
-        KbqButtonModule,
-        KbqSidebarModule,
-        JsonPipe
+        DevExamples
     ],
     selector: 'dev-app',
     templateUrl: './template.html',
-    styleUrls: ['./styles.scss'],
+    styleUrl: './styles.scss',
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class DevApp {
-    direction = Direction;
-    sidebarPositions = SidebarPositions;
-
-    leftSidebarSidebarState: boolean = false;
-    leftSplitterState: boolean = false;
-
-    rightSidebarSidebarState: boolean = false;
-
-    onStateChanged($event): void {
-        console.log('onStateChanged: ', $event);
-    }
-
-    toggleLeftSidebar() {
-        this.leftSidebarSidebarState = !this.leftSidebarSidebarState;
-    }
-
-    toggleRightSidebar() {
-        this.rightSidebarSidebarState = !this.rightSidebarSidebarState;
-    }
-
-    toggleLeftSplitterState() {
-        this.leftSplitterState = !this.leftSplitterState;
-    }
-}
+export class DevApp {}

packages/components-dev/sidebar/styles.scss

@@ -1,25 +1,4 @@
 dev-app {
     display: block;
-}
-
-.dev-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-
-    height: 200px;
-}
-
-.dev-container__body {
-    flex: 1 1 30%;
-
-    background-color: antiquewhite;
-}
-
-.kbq-sidebar-opened {
-    background-color: #6fba53;
-}
-
-.kbq-sidebar-closed {
-    background-color: darkgray;
+    width: 700px;
 }

packages/components-dev/sidebar/template.html

@@ -1,88 +1 @@
-<br />
-
-<div class="layout-row layout-align-space-between">
-    <div>
-        <button kbq-button (click)="leftSidebar.toggle()">toggle by method</button>
-        &nbsp;
-    </div>
-
-    <div>
-        <button kbq-button (click)="rightSidebar.toggle()">toggle by method</button>
-        &nbsp;
-    </div>
-</div>
-
-<br />
-<br />
-
-<div class="dev-container layout-row layout-align-space-between">
-    <kbq-sidebar #leftSidebar="kbqSidebar" [position]="sidebarPositions.Left" (stateChanged)="onStateChanged($event)">
-        <div kbq-sidebar-opened class="kbq-sidebar-opened">kbq-sidebar-opened</div>
-        <div kbq-sidebar-closed class="kbq-sidebar-closed">kbq-sidebar-closed</div>
-    </kbq-sidebar>
-
-    <div class="dev-container__body">main area</div>
-
-    <kbq-sidebar #rightSidebar="kbqSidebar" [position]="sidebarPositions.Right" (stateChanged)="onStateChanged($event)">
-        <div kbq-sidebar-opened class="kbq-sidebar-opened">kbq-sidebar-opened</div>
-        <div kbq-sidebar-closed class="kbq-sidebar-closed">kbq-sidebar-closed</div>
-    </kbq-sidebar>
-</div>
-
-<br />
-<br />
-<br />
-
-<div class="layout-row layout-align-space-between">
-    <div>
-        <button kbq-button (click)="toggleLeftSidebar()">toggle by state</button>
-        &nbsp;
-        <button kbq-button (click)="toggleLeftSplitterState()">toggle splitter state</button>
-        &nbsp;
-    </div>
-
-    <div>
-        <button kbq-button (click)="toggleRightSidebar()">toggle by state</button>
-        &nbsp;
-    </div>
-</div>
-
-<br />
-<br />
-
-<kbq-splitter
-    class="dev-container layout-row layout-align-space-between"
-    [direction]="direction.Horizontal"
-    [disabled]="leftSplitterState"
->
-    <kbq-sidebar
-        kbq-splitter-area
-        [opened]="leftSidebarSidebarState"
-        [position]="sidebarPositions.Left"
-        (stateChanged)="onStateChanged($event)"
-    >
-        <div kbq-sidebar-opened class="kbq-sidebar-opened" [maxWidth]="'600px'" [minWidth]="'320px'">
-            kbq-sidebar-opened
-        </div>
-
-        <div kbq-sidebar-closed class="kbq-sidebar-closed" [width]="'32px'">kbq-sidebar-closed</div>
-    </kbq-sidebar>
-
-    <div kbq-splitter-area class="flex dev-container__body">main body</div>
-
-    <kbq-sidebar
-        kbq-splitter-area
-        [opened]="rightSidebarSidebarState"
-        [position]="sidebarPositions.Right"
-        (stateChanged)="onStateChanged($event)"
-    >
-        <div kbq-sidebar-opened class="kbq-sidebar-opened">kbq-sidebar-opened</div>
-        <div kbq-sidebar-closed class="kbq-sidebar-closed">kbq-sidebar-closed</div>
-    </kbq-sidebar>
-</kbq-splitter>
-
-<br />
-<br />
-<br />
-
-<div>{{ leftSidebar.params | json }}</div>
+<dev-examples />

packages/components/sidebar/examples.sidebar.en.md

@@ -1,5 +1,3 @@
-🚧 **Documentation in progress** 🚧
+### With splitter
 
-Unfortunately, the documentation for this section is not ready yet. We are actively working on its creation and plan to add it soon.
-
-If you would like to contribute to the documentation or have any questions, please feel free to [open an issue](https://github.com/koobiq/angular-components/issues) in our GitHub repository.
+<!-- example(sidebar-with-splitter) -->

packages/components/sidebar/examples.sidebar.ru.md

@@ -1,5 +1,3 @@
-🚧 **Документация в процессе написания** 🚧
+### Со сплиттером
 
-К сожалению, документация для этого раздела еще не готова. Мы активно работаем над ее созданием и планируем добавить в ближайшее время.
-
-Если вы хотите помочь в написании документации или у вас есть вопросы, пожалуйста, [создайте issue](https://github.com/koobiq/angular-components/issues) в нашем репозитории на GitHub.
+<!-- example(sidebar-with-splitter) -->

packages/components/sidebar/sidebar.component.ts

@@ -33,7 +33,10 @@ interface KbqSidebarParams {
 
 @Directive({
     selector: '[kbq-sidebar-opened]',
-    exportAs: 'kbqSidebarOpened'
+    exportAs: 'kbqSidebarOpened',
+    host: {
+        class: 'kbq-sidebar-opened'
+    }
 })
 export class KbqSidebarOpened {
     @Input() minWidth: string;
@@ -43,7 +46,10 @@ export class KbqSidebarOpened {
 
 @Directive({
     selector: '[kbq-sidebar-closed]',
-    exportAs: 'kbqSidebarClosed'
+    exportAs: 'kbqSidebarClosed',
+    host: {
+        class: 'kbq-sidebar-closed'
+    }
 })
 export class KbqSidebarClosed {
     @Input() width: string;

packages/components/sidebar/sidebar.en.md

@@ -1,5 +1,10 @@
-🚧 **Documentation in progress** 🚧
+Component designed to add collapsible side content.
 
-Unfortunately, the documentation for this section is not ready yet. We are actively working on its creation and plan to add it soon.
+<!-- example(sidebar-overview) -->
 
-If you would like to contribute to the documentation or have any questions, please feel free to [open an issue](https://github.com/koobiq/angular-components/issues) in our GitHub repository.
+### Keyboard interaction
+
+| <div style="min-width: 110px;">Key</div>       | Action                   |
+| ---------------------------------------------- | ------------------------ |
+| <span class="docs-hot-key-button">&#91;</span> | Open/close left Sidebar  |
+| <span class="docs-hot-key-button">&#93;</span> | Open/close right Sidebar |

packages/components/sidebar/sidebar.ru.md

@@ -0,0 +1,10 @@
+Компонент, предназначенный для добавления сворачиваемого бокового контента.
+
+<!-- example(sidebar-overview) -->
+
+### Работа с клавиатурой
+
+| <div style="min-width: 110px;">Клавиша</div>   | Действие                       |
+| ---------------------------------------------- | ------------------------------ |
+| <span class="docs-hot-key-button">&#91;</span> | Открыть/закрыть левый Sidebar  |
+| <span class="docs-hot-key-button">&#93;</span> | Открыть/закрыть правый Sidebar |

packages/docs-examples/components/sidebar/index.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { SidebarOverviewExample } from './sidebar-overview/sidebar-overview-example';
+import { SidebarWithSplitterExample } from './sidebar-with-splitter/sidebar-with-splitter-example';
+
+export { SidebarOverviewExample, SidebarWithSplitterExample };
+
+const EXAMPLES = [
+    SidebarOverviewExample,
+    SidebarWithSplitterExample
+];
+
+@NgModule({
+    imports: EXAMPLES,
+    exports: EXAMPLES
+})
+export class SidebarExamplesModule {}

packages/docs-examples/components/sidebar/ng-package.json

@@ -0,0 +1,5 @@
+{
+    "lib": {
+        "entryFile": "index.ts"
+    }
+}