Add user module routing, integrate markdown support, and enhance dialog functionality

jambotron-ui/src/app/components/side-bar.component/side-bar.component.html

@@ -0,0 +1,120 @@
+<div class="navbar-wrapper">
+  <div class="m-header">
+    <mat-label>Jambotron</mat-label>
+    <a href="javascript:" class="b-brand">
+      <img src="assets/images/logo-dark.svg" alt="theme-logo" class="logo logo-dark logo-lg" />
+    </a>
+  </div>
+<!--  <app-nav-content (NavCollapsedMob)="navCollapseMob()" class="scroll-div w-100 compact"></app-nav-content>-->
+  <mat-nav-list>
+    <a mat-list-item routerLink="user-welcome">
+        <span class="entry">
+          <mat-icon>house</mat-icon>
+          @if (!isCollapsed) {
+            <span >Dashboard</span>
+          }
+        </span>
+    </a>
+    <a mat-list-item routerLink="tutorials-list">
+        <span class="entry">
+          <mat-icon>newspaper</mat-icon>
+          @if (!isCollapsed) {
+            <span >Tutorials</span>
+          }
+        </span>
+    </a>
+    <a mat-list-item routerLink="ai-models">
+        <span class="entry">
+          <mat-icon>house</mat-icon>
+          @if (!isCollapsed) {
+            <span >AI tools</span>
+          }
+        </span>
+    </a>
+  </mat-nav-list>
+  <div class="example-action-buttons">
+    <button matButton (click)="accordion().openAll()">Expand All</button>
+    <button matButton (click)="accordion().closeAll()">Collapse All</button>
+    <!-- #docregion multi -->
+    <mat-accordion class="example-headers-align" multi>
+      <!-- #enddocregion multi -->
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title>
+            <a mat-list-item routerLink="user-welcome">
+              <span class="entry">
+                <mat-icon>house</mat-icon>
+                @if (!isCollapsed) {
+                  <span >Dashboard</span>
+                }
+              </span>
+            </a>
+          </mat-panel-title>
+
+        </mat-expansion-panel-header>
+        <mat-nav-list>
+          <a mat-list-item routerLink="user-welcome">
+        <span class="entry">
+          <mat-icon>house</mat-icon>
+          @if (!isCollapsed) {
+            <span >Dashboard</span>
+          }
+        </span>
+          </a>
+          <a mat-list-item routerLink="tutorials-list">
+        <span class="entry">
+          <mat-icon>newspaper</mat-icon>
+          @if (!isCollapsed) {
+            <span >Tutorials</span>
+          }
+        </span>
+          </a>
+          <a mat-list-item routerLink="ai-models">
+        <span class="entry">
+          <mat-icon>house</mat-icon>
+          @if (!isCollapsed) {
+            <span >AI tools</span>
+          }
+        </span>
+          </a>
+        </mat-nav-list>
+      </mat-expansion-panel>
+      <!-- #docregion disabled -->
+      <mat-expansion-panel disabled>
+        <!-- #enddocregion disabled -->
+        <mat-expansion-panel-header>
+          <mat-panel-title> Destination </mat-panel-title>
+          <mat-panel-description>
+            Type the country name
+            <mat-icon>map</mat-icon>
+          </mat-panel-description>
+        </mat-expansion-panel-header>
+
+        <mat-form-field>
+          <mat-label>Country</mat-label>
+          <input matInput />
+        </mat-form-field>
+      </mat-expansion-panel>
+
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title> Day of the trip </mat-panel-title>
+          <mat-panel-description>
+            Inform the date you wish to travel
+            <mat-icon>date_range</mat-icon>
+          </mat-panel-description>
+        </mat-expansion-panel-header>
+
+        <mat-form-field>
+          <mat-label>Date</mat-label>
+          <input matInput [matDatepicker]="picker" (focus)="picker.open()" readonly />
+        </mat-form-field>
+        <mat-datepicker #picker></mat-datepicker>
+      </mat-expansion-panel>
+    </mat-accordion>
+
+  </div>
+
+</div>
+
+

jambotron-ui/src/app/components/side-bar.component/side-bar.component.scss

@@ -0,0 +1,21 @@
+.entry{
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding:0.75rem;
+}
+
+
+
+.example-action-buttons {
+  padding-bottom: 20px;
+}
+
+.example-headers-align .mat-expansion-panel-header-description {
+  justify-content: space-between;
+  align-items: center;
+}
+
+.example-headers-align .mat-mdc-form-field + .mat-mdc-form-field {
+  margin-left: 8px;
+}

jambotron-ui/src/app/components/side-bar.component/side-bar.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SideBarComponent } from './side-bar.component';
+
+describe('SideBarComponent', () => {
+  let component: SideBarComponent;
+  let fixture: ComponentFixture<SideBarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SideBarComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SideBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

jambotron-ui/src/app/components/side-bar.component/side-bar.component.ts

@@ -0,0 +1,79 @@
+import {ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, viewChild} from '@angular/core';
+import {MatTree,  MatTreeNode} from '@angular/material/tree';
+import {MatFormField, MatInput, MatLabel} from '@angular/material/input';
+import {MatDivider, MatListItem, MatNavList} from '@angular/material/list';
+import {MatIcon} from '@angular/material/icon';
+import {RouterLink} from '@angular/router';
+import {
+  MatAccordion, MatExpansionModule,
+  MatExpansionPanel,
+  MatExpansionPanelDescription,
+  MatExpansionPanelTitle
+} from '@angular/material/expansion';
+import {MatDatepicker, MatDatepickerInput} from '@angular/material/datepicker';
+import {provideNativeDateAdapter} from '@angular/material/core';
+import {MatButton} from '@angular/material/button';
+
+@Component({
+  selector: 'app-side-bar',
+  imports: [
+    MatTree,
+    MatTreeNode,
+    MatLabel,
+    MatNavList,
+    MatListItem,
+    MatIcon,
+    RouterLink,
+    MatExpansionPanel,
+    MatExpansionPanelTitle,
+    MatExpansionPanelDescription,
+    MatFormField,
+    MatInput,
+    MatDatepickerInput,
+    MatDatepicker,
+    MatDivider,
+    MatAccordion,
+    MatButton,
+    MatExpansionModule
+  ],
+  templateUrl: './side-bar.component.html',
+  styleUrl: './side-bar.component.scss',
+  schemas:[CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [provideNativeDateAdapter()],
+})
+
+
+
+export class SideBarComponent {
+  isCollapsed = false;
+
+  accordion = viewChild.required(MatAccordion);
+}
+
+const TREE_DATA: TreeNode[] = [
+  {
+    name: 'Fruit',
+    children: [{name: 'Apple'}, {name: 'Banana'}, {name: 'Fruit loops'}],
+  },
+  {
+    name: 'Vegetables',
+    children: [
+      {
+        name: 'Green',
+        children: [{name: 'Broccoli'}, {name: 'Brussels sprouts'}],
+      },
+      {
+        name: 'Orange',
+        children: [{name: 'Pumpkins'}, {name: 'Carrots'}],
+      },
+    ],
+  },
+];
+
+interface TreeNode {
+  name: string;
+  children?: TreeNode[];
+}
+
+