80 lines
1.9 KiB
TypeScript
80 lines
1.9 KiB
TypeScript
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[];
|
|
}
|
|
|
|
|