Skip to content

Commit b220bc4

Browse files
perryr16perryr16
authored
Add ability to toggle secondary side nav (#37)
* add side nav toggle to settings and columns * lint
1 parent 5c1ecf9 commit b220bc4

19 files changed

Lines changed: 149 additions & 95 deletions

‎src/@seed/components/drawer/drawer.service.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import { Injectable } from '@angular/core'
2+
import type { MatDrawer } from '@angular/material/sidenav'
23
import type { DrawerComponent } from '@seed/components'
34

45
@Injectable({ providedIn: 'root' })
56
export class DrawerService {
67
private _componentRegistry: Map<string, DrawerComponent> = new Map<string, DrawerComponent>()
8+
private _drawerRef?: MatDrawer
79

810
/**
911
* Register drawer component
@@ -32,4 +34,12 @@ export class DrawerService {
3234
getComponent(name: string): DrawerComponent | undefined {
3335
return this._componentRegistry.get(name)
3436
}
37+
38+
setDrawer(drawer: MatDrawer) {
39+
this._drawerRef = drawer
40+
}
41+
42+
toggle() {
43+
void this._drawerRef?.toggle()
44+
}
3545
}

‎src/@seed/components/page/page.component.html‎

Lines changed: 28 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,35 @@
33
class="bg-card flex flex-0 flex-col border-b p-6 sm:flex-row sm:items-center sm:justify-between sm:px-10 sm:py-8 dark:bg-transparent"
44
>
55
<div class="min-w-0 flex-1">
6-
@if (config.breadcrumbs?.length > 0) {
7-
<div class="flex flex-wrap items-center gap-x-1 font-medium">
8-
@for (breadcrumb of config.breadcrumbs; track $index) {
9-
<div class="flex items-center gap-x-1 whitespace-nowrap">
10-
@if (!$first) {
11-
<mat-icon class="text-secondary icon-size-3" svgIcon="fa-solid:chevron-right"></mat-icon>
12-
}
13-
<span class="text-secondary">{{ breadcrumb }}</span>
14-
</div>
15-
}
16-
</div>
17-
}
6+
<div class="flex" [class]="config.sideNavToggle ? '-ml-10 -mt-3' : ''">
7+
@if (config.sideNavToggle) {
8+
<button (click)="toggleDrawer()" mat-icon-button>
9+
<mat-icon>menu</mat-icon>
10+
</button>
11+
}
12+
@if (config.breadcrumbs?.length > 0) {
13+
<div class="flex flex-wrap items-center gap-x-1 font-medium">
14+
@for (breadcrumb of config.breadcrumbs; track $index) {
15+
<div class="flex items-center gap-x-1 whitespace-nowrap">
16+
@if (!$first) {
17+
<mat-icon class="text-secondary icon-size-3" svgIcon="fa-solid:chevron-right"></mat-icon>
18+
}
19+
<span class="text-secondary">{{ breadcrumb }}</span>
20+
</div>
21+
}
22+
</div>
23+
}
24+
</div>
25+
1826
<div [ngClass]="{ 'mt-2': config.breadcrumbs?.length > 0 }">
19-
<h2 class="truncate text-3xl font-extrabold capitalize leading-7 tracking-tight sm:leading-10 md:text-4xl">
20-
@if (config.titleIcon) {
21-
<mat-icon class="text-primary-900 icon-size-6" [svgIcon]="config.titleIcon"></mat-icon>
22-
}
23-
{{ t(config.title) }}
24-
</h2>
27+
<div class="flex">
28+
<h2 class="truncate text-3xl font-extrabold capitalize leading-7 tracking-tight sm:leading-10 md:text-4xl">
29+
@if (config.titleIcon) {
30+
<mat-icon class="text-primary-900 icon-size-6" [svgIcon]="config.titleIcon"></mat-icon>
31+
}
32+
{{ t(config.title) }}
33+
</h2>
34+
</div>
2535
</div>
2636
</div>
2737
<!-- Actions -->

‎src/@seed/components/page/page.component.ts‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,24 @@
11
import { CommonModule } from '@angular/common'
2-
import { Component, Input, ViewEncapsulation } from '@angular/core'
2+
import { Component, inject, Input, ViewEncapsulation } from '@angular/core'
33
import { MatButtonModule } from '@angular/material/button'
44
import { MatIconModule } from '@angular/material/icon'
5+
import { MatTooltipModule } from '@angular/material/tooltip'
56
import { SharedImports } from '@seed/directives'
7+
import { DrawerService } from '../drawer'
68
import type { Config } from './page.types'
79

810
@Component({
911
selector: 'seed-page',
1012
templateUrl: './page.component.html',
11-
imports: [CommonModule, MatButtonModule, MatIconModule, SharedImports],
13+
imports: [CommonModule, MatButtonModule, MatIconModule, MatTooltipModule, SharedImports],
1214
encapsulation: ViewEncapsulation.None,
1315
styles: ':host { @apply flex; @apply flex-auto }',
1416
})
1517
export class PageComponent {
1618
@Input() config: Config
19+
private _drawerService = inject(DrawerService)
20+
21+
toggleDrawer() {
22+
this._drawerService.toggle()
23+
}
1724
}

‎src/@seed/components/page/page.types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export type Config = {
88
action2Icon?: string;
99
action2Text?: string;
1010
breadcrumbs?: string[];
11+
sideNavToggle?: boolean;
1112
title: string;
1213
titleIcon?: string;
1314
}

‎src/app/modules/organizations/columns/columns.component.html‎

Lines changed: 49 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,51 @@
1-
<mat-drawer-container class="static h-full">
2-
<mat-drawer class="fixed top-16 h-full" [(opened)]="drawerOpened" mode="side">
3-
<seed-vertical-navigation
4-
class="mt-4 bg-gray-100 dark:bg-gray-700 print:hidden"
5-
[appearance]="'default'"
6-
[mode]="'side'"
7-
[navigation]="columnsNavigationMenu"
8-
[opened]="true"
9-
[autoCollapse]="true"
10-
name="columnssNavigation"
11-
>
12-
<!-- Navigation header hook -->
13-
<ng-container verticalNavigationContentHeader>
14-
<div class="static flex items-center justify-center p-4">
15-
<h3 class="font-xl font-bold">Columns</h3>
1+
<div class="absolute inset-0 flex min-w-0 flex-col overflow-hidden">
2+
<mat-drawer-container class="h-full flex-auto">
3+
<mat-drawer class="flex w-60 min-w-60 dark:bg-gray-900" #drawer [autoFocus]="false" mode="side" opened>
4+
<seed-vertical-navigation [inner]="true" [navigation]="columnsNavigationMenu" [opened]="true" mode="side" name="columnssNavigation">
5+
<!-- Navigation header hook -->
6+
<ng-container verticalNavigationContentHeader>
7+
<div class="static mt-[24px] flex p-4 pl-6">
8+
<h3 class="text-sm font-semibold uppercase tracking-wider text-primary-400">Columns</h3>
9+
</div>
10+
</ng-container>
11+
</seed-vertical-navigation>
12+
</mat-drawer>
13+
<mat-drawer-content class="h-full">
14+
<seed-page
15+
[config]="{
16+
title: pageTitle,
17+
titleIcon: 'fa-solid:sitemap',
18+
action: toggleHelp,
19+
actionIcon: 'fa-solid:circle-question',
20+
breadcrumbs: ['Organization Columns'],
21+
sideNavToggle: true,
22+
}"
23+
>
24+
@if (useTabs) {
25+
<nav [tabPanel]="tabPanel" mat-tab-nav-bar>
26+
@for (tab of tabs; track tab.label) {
27+
<a [active]="tab.route === currentType()" (click)="navigateTo(tab.route)" mat-tab-link>{{ tab.label }}</a>
28+
}
29+
</nav>
30+
}
31+
<mat-tab-nav-panel class="p-4" #tabPanel>
32+
<router-outlet></router-outlet>
33+
</mat-tab-nav-panel>
34+
</seed-page>
35+
</mat-drawer-content>
36+
<mat-drawer [(opened)]="helpOpened" mode="over" position="end">
37+
@if (!helpComponent) {
38+
<div class="prose px-4" *transloco="let t">
39+
<h2 class="mt-6 flex items-center border-b-2 font-extrabold tracking-tight">
40+
{{ t('Help') }}<mat-icon class="mx-2 text-current icon-size-3" svgIcon="fa-solid:chevron-right"></mat-icon
41+
>{{ t('No Help Available Yet') }}
42+
</h2>
43+
<p>Available Help Text will appear in this space.</p>
1644
</div>
17-
</ng-container>
18-
19-
<!-- Navigation footer hook -->
20-
<ng-container verticalNavigationFooter> </ng-container>
21-
</seed-vertical-navigation>
22-
</mat-drawer>
23-
<mat-drawer-content class="h-full p-4">
24-
<seed-page
25-
[config]="{
26-
title: pageTitle,
27-
titleIcon: 'fa-solid:sitemap',
28-
action: toggleHelp,
29-
actionIcon: 'fa-solid:circle-question',
30-
}"
31-
>
32-
@if (useTabs) {
33-
<nav [tabPanel]="tabPanel" mat-tab-nav-bar>
34-
@for (tab of tabs; track tab.label) {
35-
<a [active]="tab.route === currentType()" (click)="navigateTo(tab.route)" mat-tab-link>{{ tab.label }}</a>
36-
}
37-
</nav>
3845
}
39-
<mat-tab-nav-panel #tabPanel>
40-
<router-outlet></router-outlet>
41-
</mat-tab-nav-panel>
42-
</seed-page>
43-
</mat-drawer-content>
44-
<mat-drawer [(opened)]="helpOpened" mode="over" position="end">
45-
@if (!helpComponent) {
46-
<div class="prose px-4" *transloco="let t">
47-
<h2 class="mt-6 flex items-center border-b-2 font-extrabold tracking-tight">
48-
{{ t('Help') }}<mat-icon class="mx-2 text-current icon-size-3" svgIcon="fa-solid:chevron-right"></mat-icon
49-
>{{ t('No Help Available Yet') }}
50-
</h2>
51-
<p>Available Help Text will appear in this space.</p>
52-
</div>
53-
}
54-
@if (helpComponent) {
55-
<ng-container *ngComponentOutlet="helpComponent" />
56-
}
57-
</mat-drawer>
58-
</mat-drawer-container>
46+
@if (helpComponent) {
47+
<ng-container *ngComponentOutlet="helpComponent" />
48+
}
49+
</mat-drawer>
50+
</mat-drawer-container>
51+
</div>

‎src/app/modules/organizations/columns/columns.component.ts‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import { CommonModule, Location } from '@angular/common'
2-
import { Component, inject, type OnInit, type Type } from '@angular/core'
2+
import type { AfterViewInit, OnInit, Type } from '@angular/core'
3+
import { Component, inject, ViewChild } from '@angular/core'
34
import { MatButtonModule } from '@angular/material/button'
45
import { MatIconModule } from '@angular/material/icon'
6+
import type { MatDrawer } from '@angular/material/sidenav'
57
import { MatSidenavModule } from '@angular/material/sidenav'
68
import { MatTabsModule } from '@angular/material/tabs'
79
import { Title } from '@angular/platform-browser'
810
import { Router, RouterOutlet } from '@angular/router'
9-
import { type NavigationItem, VerticalNavigationComponent } from '@seed/components'
11+
import { DrawerService, type NavigationItem, VerticalNavigationComponent } from '@seed/components'
1012
import { PageComponent } from '@seed/components'
1113
import { SharedImports } from '@seed/directives'
1214
import { ColumnDataTypesHelpComponent } from './data-types/help.component'
@@ -31,7 +33,9 @@ type ColumnNavigationItem = NavigationItem & { useTabs: boolean; helpComponent:
3133
RouterOutlet,
3234
],
3335
})
34-
export class ColumnsComponent implements OnInit {
36+
export class ColumnsComponent implements AfterViewInit, OnInit {
37+
@ViewChild('drawer') drawer!: MatDrawer
38+
private _drawerService = inject(DrawerService)
3539
private _title = inject(Title)
3640
private _router = inject(Router)
3741
private _location = inject(Location)
@@ -103,6 +107,10 @@ export class ColumnsComponent implements OnInit {
103107
this.setTitle()
104108
}
105109

110+
ngAfterViewInit() {
111+
this._drawerService.setDrawer(this.drawer)
112+
}
113+
106114
currentType(): string {
107115
return this._location.path().split('/').pop()
108116
}

‎src/app/modules/organizations/columns/geocoding/geocoding.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<div class="" (cdkDropListDropped)="drop($event)" cdkDropList>
1010
@for (column of columns; track column.id) {
1111
<div
12-
class="w-75 my-2 flex flex-row items-center justify-between space-x-2 rounded-md border border-solid border-slate-600 bg-slate-100 p-2 drop-shadow-md"
12+
class="w-75 my-2 flex flex-row items-center justify-between space-x-2 rounded-md border border-solid border-slate-600 p-2 drop-shadow-md"
1313
cdkDrag
1414
>
1515
<div class="leading-40 flex flex-row space-x-4 text-lg">

‎src/app/modules/organizations/settings/api-keys/api-keys.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<seed-page [config]="{ titleIcon: 'fa-solid:gears', title: 'API Keys', breadcrumbs: ['Organization Settings'] }">
1+
<seed-page [config]="{ titleIcon: 'fa-solid:gears', title: 'API Keys', breadcrumbs: ['Organization Settings'], sideNavToggle: true }">
22
@if (organization) {
33
<div class="flex-auto p-6 sm:p-10" *transloco="let t">
44
<div class="max-w-2xl">

‎src/app/modules/organizations/settings/audit-template/audit-template.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<seed-page [config]="{ titleIcon: 'fa-solid:gears', title: 'Audit Template', breadcrumbs: ['Organization Settings'] }">
1+
<seed-page [config]="{ titleIcon: 'fa-solid:gears', title: 'Audit Template', breadcrumbs: ['Organization Settings'], sideNavToggle: true }">
22
@if (organization) {
33
<div class="flex-auto p-6 sm:p-10" *transloco="let t">
44
<div class="prose">

‎src/app/modules/organizations/settings/display-fields/display-fields.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<seed-page [config]="{ titleIcon: 'fa-solid:gears', title: 'Display Fields', breadcrumbs: ['Organization Settings'] }">
1+
<seed-page [config]="{ titleIcon: 'fa-solid:gears', title: 'Display Fields', breadcrumbs: ['Organization Settings'], sideNavToggle: true }">
22
@if (organization) {
33
<div class="flex-auto p-6 sm:p-10" *transloco="let t">
44
<div class="max-w-2xl">

0 commit comments

Comments
 (0)