feat: Provide a Sidebar page-layout #149

projects/material-addons/src/lib/content-panel/content-header/content-header.component.scss → projects/material-addons/src/lib/layout/content-panel/content-header/content-header.component.scss

@@ -1,3 +1,4 @@
 .content-header {
   padding-right: 0.5rem;
+  background-color: var(--background-color);
 }

projects/material-addons/src/lib/content-panel/content-panel-container-content/content-panel-container-content.component.scss → projects/material-addons/src/lib/layout/content-panel/content-panel-container-content/content-panel-container-content.component.scss

@@ -3,5 +3,4 @@
   overflow-y: auto;
   border-top: 0.05rem solid #cccccc;
   padding: 1rem;
-  height: 1rem;
 }

projects/material-addons/src/lib/layout/content-panel/content-panel-container-sidebar/content-panel-container-sidebar.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

projects/material-addons/src/lib/layout/content-panel/content-panel-container-sidebar/content-panel-container-sidebar.component.scss

@@ -0,0 +1,6 @@
+:host {
+  border-top: 0.05rem solid #cccccc;
+  min-height: 2rem;
+  display: flex;
+  flex: 0 0 auto;
+}

projects/material-addons/src/lib/layout/content-panel/content-panel-container-sidebar/content-panel-container-sidebar.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'mad-content-panel-container-sidebar',
+  templateUrl: './content-panel-container-sidebar.component.html',
+  styleUrls: ['./content-panel-container-sidebar.component.scss'],
+})
+export class ContentPanelContainerSidebarComponent {}

projects/material-addons/src/lib/layout/content-panel/content-panel-container/content-panel-container.component.html

@@ -0,0 +1,7 @@
+<div class="content-panel-sidebar-wrapper">
+  <ng-content select="mad-content-panel-container-sidebar"></ng-content>
+  <div class="content-panel-outer-wrapper">
+    <ng-content select="mad-content-panel-container-content"></ng-content>
+    <ng-content select="mad-content-panel-container-footer"></ng-content>
+  </div>
+</div>

projects/material-addons/src/lib/content-panel/content-panel-container/content-panel-container.component.scss → projects/material-addons/src/lib/layout/content-panel/content-panel-container/content-panel-container.component.scss

@@ -4,10 +4,17 @@
   display: flex;
   flex: 1 1 auto;
   min-height: 0.05rem;
+  background-color: var(--background-color);
 }
 
 .content-panel-outer-wrapper {
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
 }
+.content-panel-sidebar-wrapper {
+  width: 100%;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: row;
+}

projects/material-addons/src/lib/content-panel/content-panel.module.ts → projects/material-addons/src/lib/layout/content-panel/content-panel.module.ts

@@ -1,17 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
 import { ContentHeaderComponent } from './content-header/content-header.component';
 import { ContentPanelContainerComponent } from './content-panel-container/content-panel-container.component';
 import { ContentPanelContainerContentComponent } from './content-panel-container-content/content-panel-container-content.component';
 import { ContentPanelContainerFooterComponent } from './content-panel-container-footer/content-panel-container-footer.component';
-import { MainContainerComponent } from './main-container/main-container.component';
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { ContentPanelContainerSidebarComponent } from './content-panel-container-sidebar/content-panel-container-sidebar.component';
 
+import { MainContainerComponent } from './main-container/main-container.component';
 @NgModule({
   declarations: [
     ContentHeaderComponent,
     ContentPanelContainerComponent,
     ContentPanelContainerContentComponent,
     ContentPanelContainerFooterComponent,
+    ContentPanelContainerSidebarComponent,
     MainContainerComponent,
   ],
   imports: [CommonModule],
@@ -20,6 +23,7 @@ import { CommonModule } from '@angular/common';
     ContentPanelContainerComponent,
     ContentPanelContainerContentComponent,
     ContentPanelContainerFooterComponent,
+    ContentPanelContainerSidebarComponent,
     MainContainerComponent,
   ],
 })

projects/material-addons/src/lib/layout/sidebar/sidebar-item/sidebar-item.component.html

@@ -0,0 +1,4 @@
+<span class="content-wrapper">
+  <ng-content></ng-content>
+</span>
+<span class="focus-overlay"></span>

projects/material-addons/src/lib/layout/sidebar/sidebar-item/sidebar-item.component.scss

@@ -0,0 +1,33 @@
+[mad-sidebar-item] {
+  padding: 9px 24px 8px;
+  color: var(--panel-color);
+  position: relative;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 16px;
+  font-weight: 300;
+
+  letter-spacing: 0.5px;
+
+  .focus-overlay {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    position: absolute;
+    pointer-events: none;
+    border-radius: inherit;
+  }
+
+  &.active-sidebar-item {
+    background-color: var(--panel-select-background);
+  }
+
+  &:hover {
+    .focus-overlay {
+      background-color: black;
+      opacity: 0.04;
+    }
+  }
+}

projects/material-addons/src/lib/layout/sidebar/sidebar-item/sidebar-item.component.ts

@@ -0,0 +1,9 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: '[mad-sidebar-item]',
+  templateUrl: 'sidebar-item.component.html',
+  styleUrls: ['sidebar-item.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class SidebarItemComponent {}

projects/material-addons/src/lib/layout/sidebar/sidebar.component.html

@@ -0,0 +1,10 @@
+<div [class.collapsed]="collapsed" class="sidebar-wrapper">
+  <div class="sidebar-header">
+    <button (click)="toggleCollapse()" color="basic" mat-button>
+      <mat-icon>{{ collapsed ? 'keyboard_double_arrow_right' : 'keyboard_double_arrow_left' }}</mat-icon>
+    </button>
+  </div>
+  <div class="item-list">
+    <ng-content></ng-content>
+  </div>
+</div>

projects/material-addons/src/lib/layout/sidebar/sidebar.component.scss

@@ -0,0 +1,42 @@
+$color-gray: #707070;
+
+.sidebar-wrapper {
+  background: var(--panel-background-color);
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--panel-border-color);
+  margin-top: 10px;
+
+  transition: width 0.1s ease-in;
+
+  &:not(.collapsed) {
+    width: 239px;
+  }
+
+  &.collapsed {
+    width: 64px;
+  }
+
+  .sidebar-header {
+    display: flex;
+    flex-direction: row-reverse;
+    border-bottom: 1px solid var(--panel-border-color);
+
+    button {
+      color: $color-gray;
+    }
+  }
+
+  &.collapsed {
+    .item-list {
+      display: none;
+    }
+  }
+
+  .item-list {
+    display: flex;
+    flex-direction: column;
+    margin-top: 16px;
+  }
+}

projects/material-addons/src/lib/layout/sidebar/sidebar.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'mad-sidebar',
+  templateUrl: './sidebar.component.html',
+  styleUrls: ['./sidebar.component.scss'],
+})
+export class SidebarComponent {
+  collapsed = false;
+
+  toggleCollapse() {
+    this.collapsed = !this.collapsed;
+  }
+}

projects/material-addons/src/lib/layout/sidebar/sidebar.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SidebarComponent } from './sidebar.component';
+import { SidebarItemComponent } from './sidebar-item/sidebar-item.component';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+
+@NgModule({
+  declarations: [SidebarComponent, SidebarItemComponent],
+  exports: [SidebarComponent, SidebarItemComponent],
+  imports: [CommonModule, MatIconModule, MatButtonModule],
+})
+export class SidebarModule {}

projects/material-addons/src/lib/toolbar/toolbar.component.ts → projects/material-addons/src/lib/layout/toolbar/toolbar.component.ts

@@ -9,7 +9,7 @@ import { Action, BackAction, MainAction, ToolbarAction } from './toolbar-action.
 @Component({
   selector: 'mad-toolbar',
   templateUrl: './toolbar.component.html',
-  styleUrls: ['./toolbar.component.css'],
+  styleUrls: ['./toolbar.component.scss'],
 })
 export class ToolbarComponent {
   isHandset$: Observable<boolean> = this.breakpointObserver.observe([Breakpoints.Handset]).pipe(map((result) => result.matches));

projects/material-addons/src/lib/toolbar/toolbar.module.ts → projects/material-addons/src/lib/layout/toolbar/toolbar.module.ts

@@ -2,13 +2,13 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { ToolbarComponent } from './toolbar.component';
-import { MaterialActionButtonModule } from '../material-action-button/material-action-button.module';
+import { MaterialActionButtonModule } from '../../material-action-button/material-action-button.module';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { ButtonModule } from '../button/button.module';
+import { ButtonModule } from '../../button/button.module';
 import { MatBadgeModule } from '@angular/material/badge';
 
 @NgModule({

projects/material-addons/src/lib/material-addons.module.ts

@@ -1,12 +1,13 @@
 import { NgModule } from '@angular/core';
-import { ToolbarModule } from './toolbar/toolbar.module';
+import { ToolbarModule } from './layout/toolbar/toolbar.module';
 import { ReadOnlyFormFieldModule } from './readonly/readonly-form-field.module';
 import { MaterialActionButtonModule } from './material-action-button/material-action-button.module';
 import { NumericFieldModule } from './numeric-field/numeric-field.module';
 import { CardModule } from './card/card.module';
 import { QuickListModule } from './quick-list/quick-list.module';
 import { ButtonModule } from './button/button.module';
 import { ThrottleClickModule } from './throttle-click/throttle-click.module';
+import { SidebarModule } from './layout/sidebar/sidebar.module';
 
 @NgModule({
   exports: [
@@ -18,6 +19,7 @@ import { ThrottleClickModule } from './throttle-click/throttle-click.module';
     CardModule,
     QuickListModule,
     ThrottleClickModule,
+    SidebarModule,
   ],
 })
 export class MaterialAddonsModule {}

projects/material-addons/src/lib/quick-list/quick-list-compact/quick-list-compact.component.ts

@@ -5,7 +5,15 @@ import { FormBuilder } from '@angular/forms';
 @Component({
   selector: 'mad-quick-list-compact',
   templateUrl: './quick-list-compact.component.html',
-  styleUrls: [],
+  styles: [
+    `
+      .quick-list-row {
+        flex-direction: row;
+        box-sizing: border-box;
+        display: flex;
+      }
+    `,
+  ],
 })
 export class QuickListCompactComponent extends BaseQuickListComponent<QuickListItem> {
   constructor(

projects/material-addons/src/lib/stepper/step-header/step-header.component.scss

@@ -8,8 +8,9 @@
   width: 100%;
   height: 62px;
 
-  display: flex;
   flex-direction: row;
+  box-sizing: border-box;
+  display: flex;
   gap: 1em;
 }
 

projects/material-addons/src/lib/stepper/stepper.component.scss

@@ -36,8 +36,10 @@
   border-left: 1px solid lightgrey;
   border-right: 1px solid lightgrey;
   border-bottom: 1px solid lightgrey;
-  display: flex;
+
   flex-direction: column;
+  box-sizing: border-box;
+  display: flex;
 }
 
 .step-content {

projects/material-addons/src/public_api.ts

@@ -8,10 +8,7 @@ export * from './lib/button/button.module';
 export * from './lib/readonly/readonly-form-field.module';
 export * from './lib/readonly/readonly-form-field-wrapper/readonly-form-field-wrapper.component';
 export * from './lib/readonly/readonly-form-field/readonly-form-field.component';
-export * from './lib/toolbar/toolbar.module';
-export * from './lib/toolbar/toolbar.component';
-export * from './lib/toolbar/toolbar.service';
-export * from './lib/toolbar/toolbar-action.interface';
+
 export * from './lib/numeric-field/numeric-field';
 export * from './lib/numeric-field/numeric-field.module';
 export * from './lib/numeric-field/number-format.service';
@@ -29,12 +26,25 @@ export * from './lib/stepper/stepper.component';
 export * from './lib/stepper/step-header/step-header.component';
 export * from './lib/stepper/mad-stepper-animation';
 export * from './lib/stepper/stepper.module';
-export * from './lib/content-panel/content-header/content-header.component';
-export * from './lib/content-panel/content-panel-container/content-panel-container.component';
-export * from './lib/content-panel/content-panel-container-content/content-panel-container-content.component';
-export * from './lib/content-panel/content-panel-container-footer/content-panel-container-footer.component';
-export * from './lib/content-panel/main-container/main-container.component';
-export * from './lib/content-panel/content-panel.module';
-export * from './lib/flowbar/flowbar.component';
-export * from './lib/flowbar/flowbar.module';
+
+export * from './lib/layout/content-panel/content-header/content-header.component';
+export * from './lib//layout/content-panel/content-panel-container/content-panel-container.component';
+export * from './lib//layout/content-panel/content-panel-container-content/content-panel-container-content.component';
+export * from './lib//layout/content-panel/content-panel-container-footer/content-panel-container-footer.component';
+export * from './lib//layout/content-panel/content-panel-container-sidebar/content-panel-container-sidebar.component';
+export * from './lib//layout/content-panel/main-container/main-container.component';
+export * from './lib//layout/content-panel/content-panel.module';
+
+export * from './lib/layout/flowbar/flowbar.component';
+export * from './lib/layout/flowbar/flowbar.module';
+
+export * from './lib/layout/sidebar/sidebar.component';
+export * from './lib/layout/sidebar/sidebar-item/sidebar-item.component';
+export * from './lib/layout/sidebar/sidebar.module';
+
+export * from './lib/layout/toolbar/toolbar.module';
+export * from './lib/layout/toolbar/toolbar.component';
+export * from './lib/layout/toolbar/toolbar.service';
+export * from './lib/layout/toolbar/toolbar-action.interface';
+
 export * from './lib/material-addons.module';

src/app/app-routing.module.ts

@@ -13,7 +13,9 @@ import { TableDemoComponent } from './component-demos/table-demo/table-demo.comp
 import { MadButtonsDemoComponent } from './component-demos/mad-buttons-demo/mad-buttons-demo.component';
 import { ThrottleClickDemoComponent } from './component-demos/throttle-click-demo/throttle-click-demo.component';
 import { StepperDemoComponent } from './component-demos/stepper-demo/stepper-demo.component';
-import { PageLayoutsComponent } from './component-demos/page-layouts/page-layouts.component';
+import { BasePageLayoutComponent } from './component-demos/page-layouts/base-page-layout/base-page-layout.component';
+import { FlowbarPageLayoutComponent } from './component-demos/page-layouts/flowbar-page-layout/flowbar-page-layout.component';
+import { SidebarPageLayoutComponent } from './component-demos/page-layouts/sidebar-page-layout/sidebar-page-layout.component';
 import { ExampleComponentsLayoutComponent } from './example-components-layout/example-components-layout.component';
 import { DataTableDemoComponent } from './component-demos/data-table-demo/data-table-demo.component';
 
@@ -132,11 +134,27 @@ const routes: Routes = [
         },
       },
       {
-        path: 'page-layouts',
-        component: PageLayoutsComponent,
+        path: 'base-page-layout',
+        component: BasePageLayoutComponent,
         pathMatch: 'full',
         data: {
-          i18n: 'layouts.demos.page-layouts',
+          i18n: 'layouts.demos.base-page-layout',
+        },
+      },
+      {
+        path: 'flowbar-page-layout',
+        component: FlowbarPageLayoutComponent,
+        pathMatch: 'full',
+        data: {
+          i18n: 'layouts.demos.flowbar-page-layout',
+        },
+      },
+      {
+        path: 'sidebar-page-layout',
+        component: SidebarPageLayoutComponent,
+        pathMatch: 'full',
+        data: {
+          i18n: 'layouts.demos.sidebar-page-layout',
         },
       },
       {