feat(startup): add startup side menu component

web/src/app/dialogs/startup/components/startup-side-menu.component.html

@@ -0,0 +1,62 @@
+<!--
+ Copyright 2026 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-->
+
+<div class="side-menu-container">
+  <div class="brand">
+    <div class="logo-container">
+      <img src="assets/icons/khi.svg" alt="KHI Logo" class="logo" />
+    </div>
+    <div class="title-group">
+      <h1 class="title">Kubernetes History Inspector</h1>
+      <span class="version">{{ version() }}</span>
+    </div>
+    <p class="tagline">A log viewer for Kubernetes troubleshooting</p>
+  </div>
+
+  <div class="actions">
+    <div class="action-item">
+      <button mat-flat-button color="primary" (click)="newInvestigation.emit()">
+        New Inspection
+        <mat-icon aria-hidden="true">add</mat-icon>
+      </button>
+      <p class="description">
+        Collect and process cluster logs for visual analysis.
+      </p>
+    </div>
+
+    <div class="action-item">
+      <button mat-stroked-button (click)="openKhiFile.emit()">
+        Open .khi file
+        <mat-icon aria-hidden="true">folder</mat-icon>
+      </button>
+      <p class="description">Import a previously exported inspection file.</p>
+    </div>
+  </div>
+
+  <div class="footer-links">
+    @for (link of links(); track link.url) {
+      <a
+        [href]="link.url"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="footer-link"
+      >
+        <mat-icon aria-hidden="true">{{ link.icon }}</mat-icon>
+        {{ link.label }}
+      </a>
+    }
+  </div>
+</div>

web/src/app/dialogs/startup/components/startup-side-menu.component.scss

@@ -0,0 +1,155 @@
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// Color variables based on the design image
+$sidebar-bg-color: #f5f6f9;
+$primary-blue: #2f54eb;
+$text-dark: #1f2329;
+$text-muted: #64748b;
+$white: #ffffff;
+$border-color: #d9d9d9;
+$shadow-color: rgba(0, 0, 0, 0.05);
+$icon-bg-alpha: rgba(255, 255, 255, 0.2);
+
+.side-menu-container {
+  display: grid;
+  grid-template:
+    "brand" auto
+    "actions" 1fr
+    "footer" auto
+    / 100%;
+  gap: 40px;
+
+  width: 220px;
+  height: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+
+  background-color: $sidebar-bg-color;
+}
+
+.brand {
+  grid-area: brand;
+  display: grid;
+  grid-template:
+    "logo title" auto
+    "tagline tagline" auto
+    / auto 1fr;
+  gap: 16px;
+  align-items: center;
+}
+
+.logo-container {
+  grid-area: logo;
+  display: grid;
+  place-items: center;
+
+  width: 48px;
+  height: 48px;
+  border-radius: 8px;
+
+  background-color: $white;
+  box-shadow: 0 2px 8px $shadow-color;
+}
+
+.logo {
+  width: 32px;
+  height: 32px;
+}
+
+.title-group {
+  grid-area: title;
+  display: grid;
+  grid-template:
+    "name" auto
+    "version" auto
+    / 100%;
+  gap: 4px;
+}
+
+.title {
+  margin: 0;
+
+  font-family: "Inter", sans-serif;
+  font-size: 18px;
+  font-weight: 700;
+  color: $text-dark;
+}
+
+.tagline {
+  grid-area: tagline;
+  margin: 0;
+
+  font-size: 12px;
+  font-style: italic;
+  color: $text-muted;
+  line-height: 1.4;
+}
+
+.version {
+  font-size: 12px;
+  color: $text-muted;
+}
+
+.actions {
+  grid-area: actions;
+  display: grid;
+  gap: 12px;
+  align-content: space-around;
+}
+
+.action-item {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.description {
+  margin: 0;
+
+  font-size: 12px;
+  color: $text-muted;
+  line-height: 1.5;
+}
+
+.footer-links {
+  grid-area: footer;
+  display: grid;
+  gap: 12px;
+}
+
+.footer-link {
+  display: grid;
+  grid-template: "icon text" / auto 1fr;
+  gap: 8px;
+  align-items: center;
+
+  font-size: 14px;
+  color: $text-muted;
+  text-decoration: none;
+
+  transition: color 0.2s;
+
+  &:hover {
+    color: $primary-blue;
+  }
+
+  mat-icon {
+    width: 18px;
+    height: 18px;
+    font-size: 18px;
+  }
+}

web/src/app/dialogs/startup/components/startup-side-menu.component.spec.ts

@@ -0,0 +1,133 @@
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { StartupSideMenuComponent } from './startup-side-menu.component';
+import { By } from '@angular/platform-browser';
+
+describe('StartupSideMenuComponent', () => {
+  let component: StartupSideMenuComponent;
+  let fixture: ComponentFixture<StartupSideMenuComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [StartupSideMenuComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(StartupSideMenuComponent);
+    component = fixture.componentInstance;
+
+    // Set required inputs
+    fixture.componentRef.setInput('version', 'V1.0.0');
+    fixture.componentRef.setInput('links', [
+      {
+        icon: 'description',
+        label: 'Documentation',
+        url: 'https://github.com/GoogleCloudPlatform/kubernetes-history-inspector#doc',
+      },
+      {
+        icon: 'bug_report',
+        label: 'Report Bug',
+        url: 'https://github.com/GoogleCloudPlatform/kubernetes-history-inspector/issues',
+      },
+      {
+        icon: 'code',
+        label: 'GitHub',
+        url: 'https://github.com/GoogleCloudPlatform/kubernetes-history-inspector#github',
+      },
+    ]);
+
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should display the version', () => {
+    const versionEl = fixture.debugElement.query(
+      By.css('.version'),
+    ).nativeElement;
+    expect(versionEl.textContent).toContain('V1.0.0');
+  });
+
+  it('should emit newInvestigation when New Inspection button is clicked', () => {
+    const emitSpy = spyOn(component.newInvestigation, 'emit');
+
+    // Find the button with text "New Inspection"
+    const buttons = fixture.debugElement.queryAll(
+      By.css('button[mat-flat-button]'),
+    );
+    const btn = buttons.find((b) =>
+      b.nativeElement.textContent.includes('New Inspection'),
+    );
+
+    expect(btn).toBeTruthy();
+    btn!.nativeElement.click();
+
+    expect(emitSpy).toHaveBeenCalled();
+  });
+
+  it('should emit openKhiFile when Open .khi file button is clicked', () => {
+    const emitSpy = spyOn(component.openKhiFile, 'emit');
+
+    // Find the button with text "Open .khi file"
+    const buttons = fixture.debugElement.queryAll(
+      By.css('button[mat-stroked-button]'),
+    );
+    const btn = buttons.find((b) =>
+      b.nativeElement.textContent.includes('Open .khi file'),
+    );
+
+    expect(btn).toBeTruthy();
+    btn!.nativeElement.click();
+
+    expect(emitSpy).toHaveBeenCalled();
+  });
+
+  it('should have correct external links', () => {
+    const links = fixture.debugElement.queryAll(By.css('.footer-link'));
+    expect(links.length).toBe(3);
+
+    const docLink = links.find((l) =>
+      l.nativeElement.textContent.includes('Documentation'),
+    );
+    expect(docLink).toBeTruthy();
+    expect(docLink!.nativeElement.getAttribute('href')).toBe(
+      'https://github.com/GoogleCloudPlatform/kubernetes-history-inspector#doc',
+    );
+    expect(docLink!.nativeElement.getAttribute('target')).toBe('_blank');
+    expect(docLink!.nativeElement.getAttribute('rel')).toBe(
+      'noopener noreferrer',
+    );
+
+    const bugLink = links.find((l) =>
+      l.nativeElement.textContent.includes('Report Bug'),
+    );
+    expect(bugLink).toBeTruthy();
+    expect(bugLink!.nativeElement.getAttribute('href')).toBe(
+      'https://github.com/GoogleCloudPlatform/kubernetes-history-inspector/issues',
+    );
+
+    const githubLink = links.find((l) =>
+      l.nativeElement.textContent.includes('GitHub'),
+    );
+    expect(githubLink).toBeTruthy();
+    expect(githubLink!.nativeElement.getAttribute('href')).toBe(
+      'https://github.com/GoogleCloudPlatform/kubernetes-history-inspector#github',
+    );
+  });
+});