Skip to content

Commit

Permalink
Housekeeping: improve docs side and top nav (#3724)
Browse files Browse the repository at this point in the history
  • Loading branch information
@RasmusKjeldgaard
RasmusKjeldgaard authored Dec 3, 2024
1 parent d77d5d5 commit aef5a86
Show file tree
Hide file tree
Showing 8 changed files with 295 additions and 285 deletions.
12 changes: 12 additions & 0 deletions apps/cookbook/src/app/app.routes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,9 @@ export const routes: Routes = [
{
path: 'intro',
component: IntroComponent,
data: {
resourceLink: 'Introduction',
},
},
{
path: 'showcase',
Expand All @@ -32,10 +35,16 @@ export const routes: Routes = [
{
path: 'guides',
loadChildren: () => import('./guides/guides.module').then((m) => m.GuideModule),
data: {
resourceLink: 'Guides',
},
},
{
path: 'accessibility-in-kirby',
component: AccessibilityGuidelinesComponent,
data: {
resourceLink: 'Accessibility',
},
},
{
path: 'component-overview',
Expand All @@ -44,6 +53,9 @@ export const routes: Routes = [
{
path: 'extensions',
component: ExtensionsLandingPageComponent,
data: {
resourceLink: 'Extensions',
},
},
],
},
Expand Down
7 changes: 4 additions & 3 deletions apps/cookbook/src/app/home/home.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

/* stylelint-disable declaration-block-no-redundant-longhand-properties */

$header-height-mobile: utils.size('xxxl');
$header-height-mobile: auto;
$header-height-desktop: 2 * utils.size('xxl');
$footer-height: 3 * utils.size('xxl');
$sidebar-width: 5 * utils.size('xxl');
Expand All @@ -16,7 +16,7 @@ $desktop-gutter: minmax(utils.size('m'), 1fr);
grid-template-columns: $mobile-gutter minmax(0, 1fr) $mobile-gutter;
grid-template-rows: $header-height-mobile minmax(0, 1fr) $footer-height;
grid-template-areas:
'. header .'
'header header header'
'. main .'
'footer footer footer';
gap: utils.size('m');
Expand All @@ -29,7 +29,8 @@ $desktop-gutter: minmax(utils.size('m'), 1fr);
'. header header .'
'. sidebar main .'
'footer footer footer footer';
gap: utils.size('xl');
column-gap: utils.size('xl');
row-gap: utils.size('m');
}
}

Expand Down
162 changes: 67 additions & 95 deletions apps/cookbook/src/app/page/header/header.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,120 +1,92 @@
<header>
<a routerLink="/" aria-label="Home">
<div class="logo">
<svg
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 132.3 158.8"
style="enable-background: new 0 0 132.3 158.8"
xml:space="preserve"
>
<style type="text/css">
.st0 {
fill: #1d1d1b;
}
</style>
<g>
<g class="text">
<path
class="st0"
d="M19.7,151.5h-2.2c-0.1,0-0.3-0.1-0.4-0.2l-9.3-13.4l-1.8,2.6V151c0,0.2-0.2,0.4-0.5,0.4H3.6
<button kirby-button attentionLevel="3" class="menu-button" (click)="onToggleMenu()">
<kirby-icon [name]="menuIcon"></kirby-icon>
</button>

<a class="logo-anchor" routerLink="/" aria-label="Home">
<svg
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 132.3 158.8"
style="enable-background: new 0 0 132.3 158.8"
xml:space="preserve"
>
<style type="text/css">
.st0 {
fill: #1d1d1b;
}
</style>
<g>
<g class="text">
<path
class="st0"
d="M19.7,151.5h-2.2c-0.1,0-0.3-0.1-0.4-0.2l-9.3-13.4l-1.8,2.6V151c0,0.2-0.2,0.4-0.5,0.4H3.6
c-0.2,0-0.4-0.2-0.4-0.4v-29.4c0-0.2,0.2-0.4,0.4-0.4h1.8c0.2,0,0.5,0.2,0.5,0.4v14l10.2-14.3c0,0,0.3-0.2,0.4-0.2h2.2
c0.4,0,0.7,0.3,0.4,0.7l-9.7,13.6L20,150.8C20.3,151.2,20.1,151.5,19.7,151.5z"
/>
<path
class="st0"
d="M41.6,151.5H25.1c-0.2,0-0.4-0.2-0.4-0.4v-1.8c0-0.2,0.2-0.4,0.4-0.4h7.8v-15.6h-6c-0.2,0-0.4-0.2-0.4-0.4
/>
<path
class="st0"
d="M41.6,151.5H25.1c-0.2,0-0.4-0.2-0.4-0.4v-1.8c0-0.2,0.2-0.4,0.4-0.4h7.8v-15.6h-6c-0.2,0-0.4-0.2-0.4-0.4
v-1.8c0-0.2,0.2-0.4,0.4-0.4h8.2c0.2,0,0.4,0.2,0.4,0.4v17.9h6c0.2,0,0.4,0.2,0.4,0.4v1.8C42.1,151.3,41.9,151.5,41.6,151.5z
M35.6,126.2H32c-0.2,0-0.5-0.2-0.5-0.4v-3.7c0-0.2,0.2-0.4,0.5-0.4h3.6c0.2,0,0.5,0.2,0.5,0.4v3.7
C36.1,126,35.9,126.2,35.6,126.2z"
/>
<path
class="st0"
d="M63.1,140.9h-1.8c-0.2,0-0.4-0.2-0.4-0.4v-3.7c0-2.4-2-4.1-4.1-4.1h-0.9c-2.1,0-4.1,1.7-4.1,4.1v12h7.8
/>
<path
class="st0"
d="M63.1,140.9h-1.8c-0.2,0-0.4-0.2-0.4-0.4v-3.7c0-2.4-2-4.1-4.1-4.1h-0.9c-2.1,0-4.1,1.7-4.1,4.1v12h7.8
c0.2,0,0.4,0.2,0.4,0.4v1.8c0,0.2-0.2,0.4-0.4,0.4H45.7c-0.2,0-0.4-0.2-0.4-0.4v-1.8c0-0.2,0.2-0.4,0.4-0.4h3.2v-12
c0-3.6,2.9-6.9,6.9-6.9h0.9c4,0,6.9,3.3,6.9,6.9v3.7C63.6,140.7,63.4,140.9,63.1,140.9z"
/>
<path
class="st0"
d="M78.6,151.9h-0.9c-1.5,0-3-0.5-4.1-1.3v0.4c0,0.2-0.2,0.4-0.5,0.4h-1.8c-0.2,0-0.4-0.2-0.4-0.4v-29.4
/>
<path
class="st0"
d="M78.6,151.9h-0.9c-1.5,0-3-0.5-4.1-1.3v0.4c0,0.2-0.2,0.4-0.5,0.4h-1.8c-0.2,0-0.4-0.2-0.4-0.4v-29.4
c0-0.2,0.2-0.4,0.4-0.4h1.8c0.2,0,0.5,0.2,0.5,0.4v9.6c1.1-0.9,2.6-1.4,4.1-1.4h0.9c3.8,0,6.9,3.1,6.9,6.9v8.3
C85.5,148.9,82.4,151.9,78.6,151.9z M82.7,136.8c0-2.3-1.8-4.1-4.1-4.1h-0.9c-2.3,0-4.1,1.8-4.1,4.1v8.3c0,2.2,1.8,4.1,4.1,4.1
h0.9c2.3,0,4.1-1.9,4.1-4.1V136.8z"
/>
<path
class="st0"
d="M101,154.2c-1.3,4.3-4.3,4.6-7.7,4.6h-0.9c-0.2,0-0.4-0.2-0.4-0.4v-1.8c0-0.2,0.2-0.5,0.4-0.5h0.9
/>
<path
class="st0"
d="M101,154.2c-1.3,4.3-4.3,4.6-7.7,4.6h-0.9c-0.2,0-0.4-0.2-0.4-0.4v-1.8c0-0.2,0.2-0.5,0.4-0.5h0.9
c4.6,0,4.5-0.5,5.9-5.2l-6-19.9c-0.1-0.3,0.1-0.6,0.4-0.6h1.9c0.2,0,0.4,0.2,0.4,0.3l4.5,15.7l4.4-15.7c0-0.2,0.3-0.3,0.4-0.3h1.8
c0.3,0,0.5,0.2,0.4,0.6C107.5,131,102.3,149.9,101,154.2z"
/>
/>
<path
class="st0"
d="M129.5,151.5h-13.8c-0.2,0-0.4-0.2-0.4-0.4v-1.8c0-0.2,0.2-0.4,0.4-0.4h13.8c0.2,0,0.4,0.2,0.4,0.4v1.8
C130,151.3,129.8,151.5,129.5,151.5z"
/>
</g>
<g class="large-rect">
<path
class="st0"
d="M56.5,102.6H10.9c-6,0-10.9-4.9-10.9-10.9V10.9C0,4.9,4.9,0,10.9,0h45.7c6,0,10.9,4.9,10.9,10.9v80.9
C67.4,97.7,62.5,102.6,56.5,102.6z M10.9,4.1c-3.7,0-6.8,3-6.8,6.8v80.9c0,3.7,3,6.8,6.8,6.8h45.7c3.7,0,6.8-3,6.8-6.8V10.9
c0-3.7-3-6.8-6.8-6.8H10.9z"
/>
</g>
<g>
<g class="medium-rect">
<path
class="st0"
d="M129.5,151.5h-13.8c-0.2,0-0.4-0.2-0.4-0.4v-1.8c0-0.2,0.2-0.4,0.4-0.4h13.8c0.2,0,0.4,0.2,0.4,0.4v1.8
C130,151.3,129.8,151.5,129.5,151.5z"
d="M123.1,38.4H86.7c-5.1,0-9.2-4.1-9.2-9.2V9.2c0-5.1,4.1-9.2,9.2-9.2h36.3c5.1,0,9.2,4.1,9.2,9.2v19.9
C132.3,34.2,128.2,38.4,123.1,38.4z M86.7,4.1c-2.8,0-5.2,2.3-5.2,5.2v19.9c0,2.8,2.3,5.2,5.2,5.2h36.3c2.8,0,5.2-2.3,5.2-5.2
V9.2c0-2.8-2.3-5.2-5.2-5.2H86.7z"
/>
</g>
<g class="large-rect">
<g class="small-rect">
<path
class="st0"
d="M56.5,102.6H10.9c-6,0-10.9-4.9-10.9-10.9V10.9C0,4.9,4.9,0,10.9,0h45.7c6,0,10.9,4.9,10.9,10.9v80.9
C67.4,97.7,62.5,102.6,56.5,102.6z M10.9,4.1c-3.7,0-6.8,3-6.8,6.8v80.9c0,3.7,3,6.8,6.8,6.8h45.7c3.7,0,6.8-3,6.8-6.8V10.9
c0-3.7-3-6.8-6.8-6.8H10.9z"
/>
</g>
<g>
<g class="medium-rect">
<path
class="st0"
d="M123.1,38.4H86.7c-5.1,0-9.2-4.1-9.2-9.2V9.2c0-5.1,4.1-9.2,9.2-9.2h36.3c5.1,0,9.2,4.1,9.2,9.2v19.9
C132.3,34.2,128.2,38.4,123.1,38.4z M86.7,4.1c-2.8,0-5.2,2.3-5.2,5.2v19.9c0,2.8,2.3,5.2,5.2,5.2h36.3c2.8,0,5.2-2.3,5.2-5.2
V9.2c0-2.8-2.3-5.2-5.2-5.2H86.7z"
/>
</g>
<g class="small-rect">
<path
class="st0"
d="M105.9,83.1h-17c-5.1,0-9.2-4.1-9.2-9.2V58.7c0-5.1,4.1-9.2,9.2-9.2h17c5.1,0,9.2,4.1,9.2,9.2v15.2
d="M105.9,83.1h-17c-5.1,0-9.2-4.1-9.2-9.2V58.7c0-5.1,4.1-9.2,9.2-9.2h17c5.1,0,9.2,4.1,9.2,9.2v15.2
C115.1,78.9,111,83.1,105.9,83.1z M88.9,53.5c-2.8,0-5.2,2.3-5.2,5.2v15.2c0,2.8,2.3,5.2,5.2,5.2h17c2.8,0,5.2-2.3,5.2-5.2V58.7
c0-2.8-2.3-5.2-5.2-5.2H88.9z"
/>
</g>
/>
</g>
</g>
</svg>
</div>
</g>
</svg>
</a>

<nav>
<ul>
<li *ngFor="let item of navigationItems">
<a
*ngIf="item.externalUrl"
[href]="item.externalUrl"
class="kirby-external-icon kirby-text-small"
target="blank"
>
{{ item.text }}
</a>
<a
*ngIf="item.route"
href="#"
class="kirby-text-small"
[routerLink]="item.route"
routerLinkActive
[routerLinkActiveOptions]="{ exact: false }"
#routerLinkActive="routerLinkActive"
>
{{ item.text }}
</a>
</li>
</ul>
</nav>

<button kirby-button attentionLevel="3" class="menu-button" (click)="onToggleMenu()">
<kirby-icon [name]="menuIcon"></kirby-icon>
</button>
</header>
49 changes: 22 additions & 27 deletions apps/cookbook/src/app/page/header/header.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,52 +8,47 @@ $medium-rect-delay: $large-rect-delay + 300ms;
$small-rect-delay: $medium-rect-delay + 200ms;

:host {
display: flex;
grid-area: header;
align-items: flex-end;
}

header {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-grow: 1;
}
z-index: utils.z('sticky-content') + 1; // above side-nav
position: sticky;
top: 0;
background-color: utils.get-color('light');
border-bottom: 1px solid utils.get-color('medium');

.menu-button {
@include utils.media('>=large') {
display: none;
position: static;
background-color: transparent;
border-bottom: none;
}
}

nav {
display: none;
header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
width: 100%;
padding: var(--kirby-spacing-xxs);

@include utils.media('>=large') {
display: block;
}

ul {
display: flex;
column-gap: utils.size('xxxl');
list-style: none;
padding: 0;
margin: 0;
line-height: normal;
padding-block: var(--kirby-spacing-m) 0;
align-items: start;

li {
margin-block-start: 0;
.menu-button {
display: none;
}
}
}

.logo {
.logo-anchor {
width: $logo-size-mobile;
height: $logo-size-mobile;
justify-self: center;

@include utils.media('>=large') {
width: $logo-size-desktop;
height: $logo-size-desktop;
margin-inline-start: var(--kirby-spacing-m);
justify-self: start;
}

svg {
Expand Down
26 changes: 1 addition & 25 deletions apps/cookbook/src/app/page/header/header.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,4 @@
import { Component, EventEmitter, Input, Output } from '@angular/core';

interface HeaderLink {
text: string;
route?: string;
externalUrl?: string;
showAsActive?: boolean;
}

export const navigationItems: HeaderLink[] = [
{ text: 'Introduction', route: '/home/intro' },
{ text: 'Components', route: '/home/component-overview' },
{ text: 'Guides', route: '/home/guides' },
{ text: 'Accessibility', route: '/home/accessibility-in-kirby' },
{ text: 'Extensions', route: '/home/extensions' },
{
text: 'Changelog',
externalUrl: 'https://github.com/kirbydesign/designsystem/releases',
},

{ text: 'GitHub', externalUrl: 'https://github.com/kirbydesign/designsystem' },
];

@Component({
selector: 'cookbook-header',
templateUrl: './header.component.html',
Expand All @@ -30,10 +8,8 @@ export class HeaderComponent {
@Input() isMenuOpen = false;
@Output() menuToggle = new EventEmitter<boolean>();

navigationItems = navigationItems;

get menuIcon(): string {
return this.isMenuOpen ? 'close' : 'more';
return this.isMenuOpen ? 'close' : 'navigation';
}

onToggleMenu() {
Expand Down
Loading

0 comments on commit aef5a86

Please sign in to comment.