up storybook
This commit is contained in:
Tykayn
tykayn
parent
0e9a0aa21e
commit
179a8d9279
344 changed files with 57478 additions and 87 deletions
|
|
@ -1,4 +1,4 @@
|
|||
@use 'sae-lib/src/styles/variables.scss';
|
||||
@use 'sae-lib/src/styles/_variables.scss' as variables;
|
||||
|
||||
.prompt-input {
|
||||
margin: 20px auto;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,17 @@
|
|||
<header class="container">
|
||||
|
||||
<nav aria-label="main navigation" class="navbar" role="navigation">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="https://cipherbliss.com">
|
||||
<app-logo></app-logo>
|
||||
</a>
|
||||
|
||||
<a aria-expanded="false" aria-label="menu" class="navbar-burger" data-target="navbarBasicExample"
|
||||
role="button">
|
||||
<a
|
||||
aria-expanded="false"
|
||||
aria-label="menu"
|
||||
class="navbar-burger"
|
||||
[class.is-active]="isMenuActive"
|
||||
role="button"
|
||||
(click)="toggleMenu()">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
|
|
@ -15,30 +19,28 @@
|
|||
</a>
|
||||
</div>
|
||||
|
||||
<div class="navbar-menu" id="navbarBasicExample">
|
||||
<div class="navbar-menu" [class.is-active]="isMenuActive" id="navbarBasicExample">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item">
|
||||
Home
|
||||
</a>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<button class="navbar-item" routerLink="home" routerLinkActive="active-link">
|
||||
accueil
|
||||
</button>
|
||||
<span class="navbar-item" routerLink="colors" routerLinkActive="active-link">
|
||||
colors
|
||||
</span>
|
||||
<a class="navbar-item" routerLink="home" routerLinkActive="active-link">
|
||||
Accueil
|
||||
</a>
|
||||
<a class="navbar-item" routerLink="colors" routerLinkActive="active-link">
|
||||
Colors
|
||||
</a>
|
||||
<a class="navbar-item" routerLink="grid" routerLinkActive="active-link">
|
||||
tableau
|
||||
Tableau
|
||||
</a>
|
||||
<a class="navbar-item" routerLink="csc" routerLinkActive="active-link">
|
||||
CSC démo
|
||||
</a>
|
||||
<a class="navbar-item" routerLink="layout" routerLinkActive="active-link">
|
||||
layout
|
||||
Layout
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
Ask question
|
||||
|
|
|
|||
|
|
@ -0,0 +1,137 @@
|
|||
@use 'sae-lib/src/styles/_variables.scss' as variables;
|
||||
|
||||
// Navigation bar styles
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 0;
|
||||
background-color: variables.$neutral-white;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
|
||||
&-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.navbar-item {
|
||||
padding: 0.5rem 0.75rem;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
&-burger {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
margin-right: 1rem;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: 25px;
|
||||
height: 3px;
|
||||
margin: 2px 0;
|
||||
background-color: #333;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
&-menu {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: space-between;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
||||
&.is-active {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-start, &-end {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5rem 0.75rem;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f5f5;
|
||||
color: variables.$main-color-active;
|
||||
}
|
||||
|
||||
&.active-link {
|
||||
color: variables.$main-color-active;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
&-dropdown {
|
||||
position: relative;
|
||||
|
||||
&:hover .navbar-dropdown {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&-dropdown {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
background-color: white;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1);
|
||||
padding: 0.5rem 0;
|
||||
z-index: 20;
|
||||
min-width: 12rem;
|
||||
|
||||
.navbar-item {
|
||||
padding: 0.375rem 1rem;
|
||||
display: block;
|
||||
|
||||
&.is-selected {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-divider {
|
||||
height: 1px;
|
||||
background-color: #dbdbdb;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Icon styles
|
||||
.ri-notification-2-line {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
|
@ -5,9 +5,20 @@ import {CommonModule} from '@angular/common';
|
|||
import {Store, StoreModule} from '@ngrx/store';
|
||||
import {reducers} from '../reducers';
|
||||
import {ActivatedRoute, RouterModule} from '@angular/router';
|
||||
import {Logo} from '../logo/logo';
|
||||
|
||||
const appReducer = reducers.app;
|
||||
|
||||
/**
|
||||
* # Navigation Bar Component
|
||||
*
|
||||
* The DsNavbar component provides the main navigation for the application.
|
||||
* It includes:
|
||||
* - Brand logo
|
||||
* - Navigation links
|
||||
* - Dropdown menus
|
||||
* - Mobile-responsive hamburger menu
|
||||
*/
|
||||
const meta: Meta<DsNavbar> = {
|
||||
title: 'Navigation/DsNavbar',
|
||||
component: DsNavbar,
|
||||
|
|
@ -16,6 +27,7 @@ const meta: Meta<DsNavbar> = {
|
|||
moduleMetadata({
|
||||
imports: [
|
||||
CommonModule,
|
||||
Logo,
|
||||
StoreModule.forRoot({app: appReducer as any}),
|
||||
RouterModule.forRoot([]),
|
||||
],
|
||||
|
|
@ -36,49 +48,51 @@ const meta: Meta<DsNavbar> = {
|
|||
],
|
||||
parameters: {
|
||||
layout: 'fullscreen',
|
||||
docs: {
|
||||
description: {
|
||||
component: 'The main navigation bar component used throughout the application. It provides navigation links, dropdown menus, and is responsive for mobile devices.'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<DsNavbar>;
|
||||
|
||||
/**
|
||||
* Default state of the navigation bar.
|
||||
*/
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
// Propriétés par défaut
|
||||
}
|
||||
args: {}
|
||||
};
|
||||
|
||||
export const Expanded: Story = {
|
||||
args: {
|
||||
// Propriétés par défaut
|
||||
},
|
||||
/**
|
||||
* Navigation bar with active link highlighting.
|
||||
* This example simulates when a user is on a specific page.
|
||||
*/
|
||||
export const WithActiveLink: Story = {
|
||||
args: {},
|
||||
parameters: {
|
||||
store: {
|
||||
init: (store: Store) => {
|
||||
store.dispatch({
|
||||
type: 'UPDATE_APP',
|
||||
payload: {
|
||||
displayConversationListPanelLarge: true
|
||||
}
|
||||
});
|
||||
docs: {
|
||||
description: {
|
||||
story: 'Shows the navigation bar with an active link highlighted. This represents the state when a user is on a specific page.'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export const Collapsed: Story = {
|
||||
args: {
|
||||
// Propriétés par défaut
|
||||
},
|
||||
/**
|
||||
* Mobile view of the navigation bar with hamburger menu.
|
||||
*/
|
||||
export const MobileView: Story = {
|
||||
args: {},
|
||||
parameters: {
|
||||
store: {
|
||||
init: (store: Store) => {
|
||||
store.dispatch({
|
||||
type: 'UPDATE_APP',
|
||||
payload: {
|
||||
displayConversationListPanelLarge: false
|
||||
}
|
||||
});
|
||||
viewport: {
|
||||
defaultViewport: 'mobile1'
|
||||
},
|
||||
docs: {
|
||||
description: {
|
||||
story: 'Shows the navigation bar in mobile view with the hamburger menu. This is how the component appears on smaller screens.'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,33 @@
|
|||
import { Component } from '@angular/core';
|
||||
import {Logo} from "../logo/logo";
|
||||
import {RouterLink, RouterLinkActive} from "@angular/router";
|
||||
import { Logo } from "../logo/logo";
|
||||
import { RouterLink, RouterLinkActive } from "@angular/router";
|
||||
|
||||
/**
|
||||
* Navigation Bar Component
|
||||
*
|
||||
* This component provides the main navigation for the application.
|
||||
* It includes a responsive design with a hamburger menu for mobile views.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'app-ds-navbar',
|
||||
imports: [
|
||||
Logo,
|
||||
RouterLink,
|
||||
RouterLinkActive
|
||||
],
|
||||
imports: [
|
||||
Logo,
|
||||
RouterLink,
|
||||
RouterLinkActive
|
||||
],
|
||||
templateUrl: './ds-navbar.html',
|
||||
styleUrl: './ds-navbar.scss'
|
||||
})
|
||||
export class DsNavbar {
|
||||
/**
|
||||
* Flag to track if the mobile menu is active
|
||||
*/
|
||||
isMenuActive = false;
|
||||
|
||||
/**
|
||||
* Toggles the mobile menu
|
||||
*/
|
||||
toggleMenu(): void {
|
||||
this.isMenuActive = !this.isMenuActive;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue