mirror of
https://github.com/bitwarden/browser
synced 2026-02-14 15:33:55 +00:00
6cf434cf11
* wip * wip * implement new control flow syntax * new landing helper components * add missing imports to header * create max width container * create landing card component * address claude feedback * fix center aligned text * ensure secondary content is centered for now * only render container when there is content * remove max width container * remove constructor init of variable * remove unnecessary styling * build styling into helper components * ensure content grows * ensure content takes allowed width * apply padding to elements instead of header and check for projected content * use Array.from to filter nodes * fix logo width * use has selector to apply actions styles, simplify heading padding * remove unneeded content projection * remove unneeded comment * use modern control flow for story * update max width classes to signal and remove switch * make logo input readonly * remove variables * remove object type * fix width types usage * add comments about component usage * fix broken variable reference * fix broken max width class usage * only appyly y padding to header actions
43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
import { ChangeDetectionStrategy, Component, input } from "@angular/core";
|
|
import { RouterModule } from "@angular/router";
|
|
|
|
import { BitwardenLogo } from "@bitwarden/assets/svg";
|
|
|
|
import { IconModule } from "../icon";
|
|
import { SharedModule } from "../shared";
|
|
|
|
/**
|
|
* Header component for landing pages with optional Bitwarden logo and header actions slot.
|
|
*
|
|
* @remarks
|
|
* This component provides:
|
|
* - Optional Bitwarden logo with link to home page (left-aligned)
|
|
* - Default content projection slot for header actions (right-aligned, auto-margin left)
|
|
* - Consistent header styling across landing pages
|
|
* - Responsive layout that adapts logo size
|
|
*
|
|
* Use this component inside `bit-landing-layout` as the first child to position it at the top.
|
|
* Content projected into this component will automatically align to the right side of the header.
|
|
*
|
|
* @example
|
|
* ```html
|
|
* <bit-landing-header [hideLogo]="false">
|
|
* <!-- Content here appears in the right-aligned actions slot -->
|
|
* <nav>
|
|
* <a routerLink="/login">Log in</a>
|
|
* <button type="button">Sign up</button>
|
|
* </nav>
|
|
* </bit-landing-header>
|
|
* ```
|
|
*/
|
|
@Component({
|
|
selector: "bit-landing-header",
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
templateUrl: "./landing-header.component.html",
|
|
imports: [RouterModule, IconModule, SharedModule],
|
|
})
|
|
export class LandingHeaderComponent {
|
|
readonly hideLogo = input<boolean>(false);
|
|
protected readonly logo = BitwardenLogo;
|
|
}
|