added & design help component

src/app/app.component.scss

@@ -7,6 +7,7 @@ app-sidebar {
   width: 232px;
   height: 100%;
   background-color: var(--bgSidebar);
+  overflow-y: none;
 }
 
 main {
@@ -22,8 +23,10 @@ app-header {
 }
 
 .content {
-  width: calc(100vw - 232px - 64px);
+  width: calc(100% - 128px);
+  min-width: calc(100vw - 232px - 128px);
   height: 100vh;
-  padding: 64px 0 0 64px;
+  padding: 64px;
   background-color: var(--bgContent);
+  overflow-y: auto;
 }

src/app/app.routes.ts

@@ -1,4 +1,8 @@
 import { Routes } from '@angular/router';
 import { SummaryComponent } from './components/summary/summary.component';
+import { HelpComponent } from './shared/components/help/help.component';
 
-export const routes: Routes = [{ path: '', component: SummaryComponent }];
+export const routes: Routes = [
+  { path: '', component: SummaryComponent },
+  { path: 'help', component: HelpComponent },
+];

src/app/shared/components/header/header.component.html

@@ -1,9 +1,9 @@
 <section>
   <div class="headline">Kanban Project Management Tool</div>
   <div class="left-frame">
-    <div class="img-help">
+    <div class="img-help" routerLink="help">
       <img src="./../../../../assets/img/sidebar/help.svg" alt="" />
     </div>
-    <div class="img-user"></div>
+    <div class="img-user">G</div>
   </div>
 </section>

src/app/shared/components/header/header.component.ts

@@ -1,12 +1,11 @@
 import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
 
 @Component({
   selector: 'app-header',
   standalone: true,
-  imports: [],
+  imports: [RouterModule],
   templateUrl: './header.component.html',
-  styleUrl: './header.component.scss'
+  styleUrl: './header.component.scss',
 })
-export class HeaderComponent {
-
-}
+export class HeaderComponent {}

src/app/shared/components/help/help.component.html

@@ -0,0 +1,109 @@
+<section>
+  <div class="header">
+    <h1>Help</h1>
+    <img
+      (click)="backClicked()"
+      src="./../../../../assets/img/arrow-left.svg"
+    />
+  </div>
+  <p>
+    Welcome to the help page for <span class="color">Join</span>, your guide to
+    using our kanban project management tool. Here, we'll provide an overview of
+    what <span class="color">Join</span> is, how it can benefit you, and how to
+    use it.
+  </p>
+  <h2>What is Join?</h2>
+  <p>
+    Join is a kanban-based project management tool designed and built by a group
+    of dedicated students as part of their web development bootcamp at the
+    Developer Akademie.
+    <br />
+    <br />
+    Kanban, a Japanese term meaning "billboard", is a highly effective method to
+    visualize work, limit work-in-progress, and maximize efficiency (or flow).
+    <span class="color">Join</span> leverages the principles of kanban to help
+    users manage their tasks and projects in an intuitive, visual interface.
+    <br />
+    <br />
+    It is important to note that <span class="color">Join</span> is designed as
+    an educational exercise and is not intended for extensive business usage.
+    While we strive to ensure the best possible user experience, we cannot
+    guarantee consistent availability, reliability, accuracy, or other aspects
+    of quality regarding <span class="color">Join</span>.
+  </p>
+
+  <h2>How to use it</h2>
+  <p>
+    Here is a step-by-step guide on how to use
+    <span class="color">Join</span>:
+  </p>
+  <table class="content-table">
+    <tr>
+      <td>1.</td>
+      <td>
+        <h3>Exploring the Board</h3>
+        <p>
+          When you log in to <span class="color">Join</span>, you'll find a
+          default board. This board represents your project and contains four
+          default lists: "To Do", "In Progress", “Await feedback” and "Done".
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td>2.</td>
+      <td>
+        <h3>Creating Contacts</h3>
+        <p>
+          In <span class="color">Join</span>, you can add contacts to
+          collaborate on your projects. Go to the "Contacts" section, click on
+          "New contact", and fill in the required information. Once added, these
+          contacts can be assigned tasks and they can interact with the tasks on
+          the board.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td>3.</td>
+      <td>
+        <h3>Adding Cards</h3>
+        <p>
+          Now that you've added your contacts, you can start adding cards. Cards
+          represent individual tasks. Click the "+" button under the appropriate
+          list to create a new card. Fill in the task details in the card, like
+          task name, description, due date, assignees, etc.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td>4.</td>
+      <td>
+        <h3>Moving Cards</h3>
+        <p>
+          As the task moves from on stage to another, xou can reflect that on
+          the board by dragging and dropping the card from one list to another.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td>5.</td>
+      <td>
+        <h3>Deleting Cards</h3>
+        <p>
+          Once a task is completed, you can either move it to the "Done" list or
+          delete it. Deleting a card will permanently remove it from the board.
+          Please exercise caution when deleting cards, as this action is
+          irreversible.
+          <br />
+          Remember that using <span class="color">Join</span> effectively
+          requires consistent updates from you and your team to ensure the board
+          reflects the current state of your project.
+          <br />
+          Have more questions about <span class="color">Join</span>? Feel free
+          to contact us at .We're here to help you!
+        </p>
+      </td>
+    </tr>
+  </table>
+  <br />
+  <h2>Enjoy using Join!</h2>
+</section>

src/app/shared/components/help/help.component.scss

@@ -0,0 +1,73 @@
+section {
+  width: 100%;
+  a {
+    text-decoration: none;
+    color: var(--gray);
+    &:hover {
+      color: var(--light-blue);
+    }
+  }
+}
+
+h1 {
+  font-size: 61px;
+  font-weight: 700;
+}
+
+h2 {
+  font-size: 27px;
+  font-weight: 700;
+  margin: 24px 0;
+}
+
+h3 {
+  font-size: 20px;
+  font-weight: 700;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 32px;
+  img {
+    width: 32px;
+    height: 32px;
+    cursor: pointer;
+    margin-left: 48px;
+  }
+  &:hover {
+    width: 36px;
+    height: 36px;
+    background-color: var(--light-gray);
+    border-radius: 18px;
+  }
+}
+
+.content-table {
+  margin-top: 24px;
+  td:first-child {
+    display: flex;
+    font-size: 27px;
+    font-weight: 700;
+    margin-right: 35px;
+  }
+  p {
+    margin: 16px 0;
+  }
+}
+
+.color {
+  color: var(--light-blue);
+}
+
+@media (max-width: 634px) {
+  .navbar-links {
+    padding: 48px 16px 0 16px;
+  }
+
+  .navbar-links h1 {
+    font-size: 36px;
+    font-weight: 700;
+  }
+}

src/app/shared/components/help/help.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HelpComponent } from './help.component';
+
+describe('HelpComponent', () => {
+  let component: HelpComponent;
+  let fixture: ComponentFixture<HelpComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HelpComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(HelpComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/help/help.component.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { Location } from '@angular/common';
+
+@Component({
+  selector: 'app-help',
+  standalone: true,
+  imports: [RouterModule],
+  templateUrl: './help.component.html',
+  styleUrl: './help.component.scss',
+})
+export class HelpComponent {
+  constructor(private location: Location) {}
+
+  backClicked() {
+    this.location.back();
+  }
+}

src/app/shared/components/sidebar/sidebar.component.scss

@@ -35,7 +35,7 @@ nav {
     align-items: center;
     font-size: 16px;
     width: 100%;
-    color: var(--lightgray);
+    color: var(--light-gray);
   }
   &:hover {
     background-color: var(--very-dark-blue);
@@ -56,7 +56,7 @@ nav {
     display: flex;
     text-align: center;
     justify-content: center;
-    color: var(--lightgray);
+    color: var(--light-gray);
     padding-top: 2vh;
     padding-bottom: 2vh;
     cursor: pointer;

src/assets/img/arrow-left.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="arrow-left-line">
+<path id="Vector" d="M10.437 15.1667H25.333C26.0694 15.1667 26.6663 15.7637 26.6663 16.5001C26.6663 17.2364 26.0694 17.8334 25.333 17.8334H10.437L16.6463 24.0427C17.167 24.5634 17.167 25.4074 16.6463 25.9281C16.1257 26.4487 15.2816 26.4487 14.761 25.9281L6.74722 17.9143C5.96617 17.1332 5.96617 15.8669 6.74722 15.0858L14.761 7.07206C15.2816 6.55144 16.1257 6.55144 16.6463 7.07206C17.167 7.59268 17.167 8.43677 16.6463 8.95739L10.437 15.1667Z" fill="#29ABE2"/>
+</g>
+</svg>

src/styles.scss

@@ -9,7 +9,8 @@
   --bgContent: #f6f7f8;
   --white: #fff;
   --black: #000;
-  --lightgray: #cdcdcd;
+  --gray: #a8a8a8;
+  --light-gray: #cdcdcd;
   --light-blue: #29abe2;
   --very-dark-blue: #091931;
   --very-light-gray: #f6f7f8;
@@ -26,7 +27,7 @@
 }
 
 *::-webkit-scrollbar-thumb {
-  background-color: var(--lightgray);
+  background-color: var(--light-gray);
   border-radius: 10px;
   border: 3px solid var(--black);
 }