Add content for header

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Header.razor

@@ -1,5 +1,38 @@
-<div class="header-tab">
+@using GameIdeas.Resources
-    <div class="icon" @onclick="HandleIconClicked">
+@inherits ComponentBase
+
+<div class="header-tab">
+    <div class="header-icon" @onclick="HandleIconClicked">
         <img src="icon.png" alt="Game Ideas">        
     </div>
-</div>
+    <div class="header-body">
+        @Body
+    </div>
+    <div class="account-container">
+        <div class="add-container">
+            <div class="manual-add button">
+                <svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
+                    <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
+                </svg>
+            </div>
+            <div class="more-add button">
+                <svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
+                    <path d="M1 3H23L12 22" />
+                </svg>
+            </div>
+            <div class="dropdown-more-add">
+                <div class="drowdown-more-element">
+                    @ResourcesKey.ManualAdd
+                </div>
+                <div class="drowdown-more-element">
+                    @ResourcesKey.AutoAdd
+                </div>
+            </div>
+        </div>
+        <div class="account-icon">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+                <path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" />
+            </svg>
+        </div>
+    </div>
+</div>

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Header.razor.cs

@@ -1,7 +1,10 @@
+using Microsoft.AspNetCore.Components;
+
 namespace GameIdeas.BlazorApp.Shared.Components;
 
 public partial class Header
 {
+    [Parameter] public RenderFragment? Body { get; set; }
 
     private Task HandleIconClicked()
     {

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Header.razor.css

@@ -0,0 +1,257 @@
+.header-tab {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-end;
+    padding: 0px 10px;
+    height: 40px;
+    width: 100%;
+}
+
+.header-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 4px;
+    width: 40%;
+    height: 100%;
+}
+
+.header-body {
+
+}
+
+.account-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: flex-end;
+}
+
+.button-icon {
+    color: var(--white);
+}
+
+.account-icon {
+}
+
+.add-container {
+
+}
+
+.button {
+
+}
+
+.manual-add {
+
+}
+
+.more-add {
+
+}
+
+.dropdown-more-add {
+
+}
+
+.drowdown-more-element {
+
+}
+
+/* Frame */
+
+/* Auto layout */
+
+padding: 0px;
+gap: 40px;
+
+width: 136px;
+height: 40px;
+/* Inside auto layout */
+flex: none;
+order: 2;
+flex-grow: 0;
+/* Frame 9 */
+width: 56px;
+height: 28px;
+/* Violet */
+background: #A380D1;
+border-radius: 4px;
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+/* Frame 55 */
+/* Auto layout */
+display: flex;
+flex-direction: column;
+align-items: flex-start;
+padding: 0px;
+gap: 10px;
+
+position: absolute;
+width: 132px;
+height: 56px;
+left: 0px;
+top: 28px;
+/* Violet */
+background: #A380D1;
+box-shadow: 
+border-radius: 4px;
+/* Frame 56 */
+/* Auto layout */
+display: flex;
+flex-direction: column;
+align-items: flex-start;
+padding: 4px;
+gap: 10px;
+
+width: 132px;
+height: 56px;
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+/* Ajout manuel */
+width: 89px;
+height: 19px;
+
+font-family: 'Noto Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 19px;
+/* identical to box height */
+color: #FFFFFF;
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+/* Ajout automatique */
+width: 124px;
+height: 19px;
+
+font-family: 'Noto Sans';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 19px;
+/* identical to box height */
+color: #FFFFFF;
+/* Inside auto layout */
+flex: none;
+order: 1;
+flex-grow: 0;
+/* Frame */
+/* Auto layout */
+display: flex;
+flex-direction: column;
+justify-content: center;
+align-items: center;
+padding: 0px;
+
+position: absolute;
+width: 28px;
+height: 28px;
+left: 0px;
+top: 0px;
+/* Frame 10 */
+/* Auto layout */
+display: flex;
+flex-direction: column;
+justify-content: center;
+align-items: center;
+padding: 0px;
+
+width: 16px;
+height: 16px;
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+/* Frame */
+width: 24px;
+height: 24px;
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+/* Vector */
+position: absolute;
+left: 20.83%;
+right: 20.83%;
+top: 20.83%;
+bottom: 20.83%;
+/* White */
+background: #FFFFFF;
+/* Line 5 */
+position: absolute;
+width: 28px;
+height: 0px;
+left: 28px;
+top: 0px;
+
+border: 1px solid rgba(0, 0, 0, 0.2);
+transform: rotate(90deg);
+/* Frame */
+/* Auto layout */
+display: flex;
+flex-direction: column;
+justify-content: center;
+align-items: center;
+padding: 0px;
+
+position: absolute;
+width: 28px;
+height: 28px;
+left: 28px;
+top: 0px;
+/* Frame 10 */
+/* Auto layout */
+display: flex;
+flex-direction: column;
+justify-content: center;
+align-items: center;
+padding: 0px;
+
+width: 16px;
+height: 16px;
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 0;
+/* Polygon 11 */
+width: 16px;
+height: 10px;
+/* White */
+background: #FFFFFF;
+transform: rotate(-180deg);
+/* Inside auto layout */
+flex: none;
+order: 0;
+align-self: stretch;
+flex-grow: 0;
+/* Icon account */
+/* Auto layout */
+display: flex;
+flex-direction: row;
+justify-content: center;
+align-items: center;
+padding: 4px;
+
+width: 40px;
+height: 40px;
+/* Inside auto layout */
+flex: none;
+order: 1;
+flex-grow: 0;
+/* Vector */
+width: 32px;
+height: 32px;
+/* Light black */
+background: #5C5C5E;
+/* Inside auto layout */
+flex: none;
+order: 0;
+flex-grow: 1;

src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css

@@ -1,15 +1,31 @@
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;700&display=swap');
 
+:root {
+    --background: linear-gradient(180deg, #2B1D3D 0%, #171229 100%);
+    --violet: #A380D1;
+    --red: #FF5E51;
+    --yellow: #FFC107;
+    --green: #43F8C0;
+    --light-grey: #5C5C5E;
+    --black: rgba(44, 43, 46, 0.8);
+    --white: #fff;
+    --semi-black: rgba(0, 0, 0, 0.5);
+    --small-radius: 4px;
+    --radius: 6px;
+    --drop-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
+}
+
 html, body {
     margin: 0;
     padding: 0;
     height: 100%;
 
     font-family: 'Noto Sans', sans-serif;
+    font-size: 12rem
 }
 
 body {
-    background: linear-gradient(180deg, #2B1D3D 0%, #171229 100%);
+    background: var(--background);
     overflow: hidden
 }
 

src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs

@@ -4,6 +4,8 @@ namespace GameIdeas.Resources;
 public class Translations (TranslationService translationService)
 {
     public string GamesIdeas => translationService.Translate(nameof(GamesIdeas));
+    public string ManualAdd => translationService.Translate(nameof(ManualAdd));
+    public string AutoAdd => translationService.Translate(nameof(AutoAdd));
 }
 
 public static class ResourcesKey
@@ -16,4 +18,6 @@ public static class ResourcesKey
     }
 
     public static string GamesIdeas => _instance?.GamesIdeas ?? throw new InvalidOperationException("ResourcesKey.GamesIdeas is not initialized.");
+    public static string ManualAdd => _instance?.ManualAdd ?? throw new InvalidOperationException("ResourcesKey.ManualAdd is not initialized.");
+    public static string AutoAdd => _instance?.AutoAdd ?? throw new InvalidOperationException("ResourcesKey.AutoAdd is not initialized.");
 }

src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json

@@ -1,3 +1,5 @@
 {
-  "GamesIdeas": "Game Ideas"
+  "GamesIdeas": "Game Ideas",
+  "ManualAdd": "Ajout manuel",
+  "AutoAdd": "Ajout automatique"
 }