From a97942ace2641473060e3f74ef6bde68811b3e45 Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Mon, 2 Sep 2024 21:20:48 +0200
Subject: [PATCH] Update Home.vue: add with-sidebar container, add tabs and
 project items templates and style

---
 src/views/Home.vue | 278 ++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 274 insertions(+), 4 deletions(-)

diff --git a/src/views/Home.vue b/src/views/Home.vue
index 41fd2ca..fe0581d 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,10 +1,280 @@
 <template>
   <h1 class="sr-only">{{ data.content.title }}</h1>
-  <Menu />
-  <header class="header">
-    
-  </header>
+  <div class="with-sidebar">  
+    <Menu />
+    <!-- TODO: convert to Tabs.vue component -->
+    <main>
+      <h2 id="tabslist" class="sr-only">Projets</h2>
+      <header role="tablist"
+              aria-labelledby="tablist">
+        <button id="projets-en-cours-label"
+                type="button"
+                role="tab"
+                aria-selected="true" 
+                aria-controls="projets-en-cours">
+                <!-- 
+                id="{ tab.slug }-label"
+                aria-selected="true | false"
+                aria-controls="{ tab.slug }"
+                -->
+          <span class="label">Projets en cours</span> <!-- tab.label -->
+          <span class="count">3</span> <!-- tab.items.count -->
+        </button>
+        <button id="projet-archives-label"
+                type="button"
+                role="tab"
+                aria-selected="false"
+                aria-controls="projets-archives"
+                tabindex="-1"> <!-- remove tabindex="-1" attribute if aria-selected="true" -->
+          <span class="label">Projets archivés</span>
+          <span class="count">8</span>
+        </button>
+      </header>
+      <section id="projets-en-cours"
+               role="tabpanel"
+               tabindex="0"
+               aria-labelledby="projets-en-cours-label"
+               class="flow">
+        <!-- TODO: convert to ProjectItem.vue component -->
+        <article class="project-item | flex | rounded-lg | px-2xl py-2xl">
+          <hgroup>
+            <h3>Miss Dior Blooming Bouquet</h3>
+            <p>Dernière mise à jour le <time datetime="2024-06-12">12 juin 2024</time></p>
+          </hgroup>
+          <img src="" alt="Logo" class="project-logo | rounded-sm">
+          <ol class="project-steps" data-steps="1">
+            <li class="project-step" data-status="in-progress">
+              <span class="pill" data-icon="search">Votre Brief</span>
+            </li>
+          </ol>
+        </article>
+        <article class="project-item | flex | rounded-lg | px-2xl py-2xl">
+          <hgroup>
+            <h3>Miss Dior Blooming Bouquet</h3>
+            <p>Dernière mise à jour le <time datetime="2024-06-12">12 juin 2024</time></p>
+          </hgroup>
+          <img src="" alt="Logo" class="project-logo | rounded-sm">
+          <ol class="project-steps" data-steps="3">
+            <li class="project-step" data-status="done">
+              <span class="pill" data-icon="search">Votre Brief</span>
+            </li>
+            <li class="project-step" data-status="in-progress">
+              <span class="pill" data-icon="palette">Brief Enrichi</span>
+            </li>
+            <li class="project-step" data-status="uncompleted">
+              <span class="pill" data-icon="3d">Rendu 360°</span>
+            </li>
+          </ol>
+        </article>
+      </section>
+      <section id="projets-archives"
+               role="tabpanel"
+               tabindex="0"
+               aria-labelledby="projet-archives-label"
+               hidden> <!-- remove hidden attribute if aria-selected="true" -->
+        <div>Tab 2 content</div>
+      </section>
+    </main>
+  </div>
 </template>
+
+<style>
+
+  /* TABS */
+
+  [role="tablist"] {
+    width: fit-content;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    margin: 0 auto var(--space-md);
+    border-radius: var(--rounded-full);
+    min-height: 60px;
+  }
+
+  [role="tab"] {
+    --tab-height: 2.5rem;
+    --tab-py: var(--space-md);
+    --tab-px: var(--space-lg);
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    font-size: var(--text-lg);
+    border-radius: var(--rounded-full);
+    background-color: var(--background, var(--color-background));
+    color: var(--color, var(--color-text));
+    z-index: 2;
+    padding: var(--tab-py) var(--tab-px);
+    margin: 0;
+    cursor: pointer;
+    gap: var(--space-lg);
+    height: var(--tab-height);
+  }
+  [role="tab"]:focus,
+  [role="tab"]:hover {
+
+  }
+  [role="tab"] .label {
+    flex-grow: 1;
+    font-family: var(--font-serif);
+  }
+  [role="tab"] .count {
+    font-weight: 500;
+  }
+
+  [role="tab"][aria-selected="true"] {
+    --background: var(--color-background);
+    z-index: 10;
+  }
+  [role="tab"][aria-selected="false"] {
+    --background: var(--color-grey-200);
+    --color: var(--color-grey-700);
+  }
+
+  [role="tab"][aria-selected="true"] + [aria-selected="false"]::before {
+    content: '';
+    display: inline-block;
+    height: var(--tab-height);
+    width: calc(var(--tab-px) * 2);
+    position: absolute;
+    left: calc(var(--tab-px) * -1);
+    background-color: var(--color-grey-200);
+    z-index: -1;
+  }
+
+  [role="tabpanel"] {
+    width: 100%;
+    overflow: auto;
+  }
+
+
+  /* PROJECT ITEM */
+
+  .project-item {
+    --wrap: no-wrap;
+    background: var(--color-background);
+  }
+
+  .project-item hgroup {
+    flex: 1 1 0%;
+  }
+  .project-item h3 {
+    font-family: var(--font-serif);
+    font-size: var(--text-xl);
+    margin-bottom: var(--space-sm);
+  }
+  .project-item p {
+    font-size: var(--text-sm);
+    line-height: var(--leading-sm);
+  }
+
+  .project-logo {
+    order: -1;
+    background: var(--color-grey-50);
+    color: var(--color-grey-400);
+    text-align: center;
+    line-height: 4.5rem;
+    width: 4.5rem;
+    height: 4.5rem;
+  }
+
+  .project-steps {
+    --color: var(--color-primary-100);
+    flex: 1 1 0%;
+    display: flex;
+    gap: var(--space-lg);
+    margin-top: -2.75rem;
+    position: relative;
+  }
+  .project-steps[data-steps="1"]::after {
+    content: "étapes à venir";
+    font-size: var(--text-sm);
+    font-weight: 500;
+    width: 8rem;
+    position: absolute;
+    text-align: center;
+    color: var(--color-grey-700);
+    background: var(--color-background);
+    bottom: -2rem;
+    left: 50%;
+    transform: translate(-50%, -0.2em);
+  }
+
+  .project-step {
+    --color: var(--color-white);
+    position: relative;
+    flex: 1 1 0%;
+    text-align: center;
+  }
+  .project-step:last-child {
+    text-align: right;
+  }
+  .project-step:only-child,
+  .project-step:first-child {
+    text-align: left;
+  }
+
+  .project-step[data-status="in-progress"]:only-child::before,
+  .project-step[data-status="in-progress"]:only-child::after {
+    content: "";
+    display: inline-block;
+    height: 1.25rem;
+    position: absolute;
+    right: 3.75rem;
+    bottom: -2rem;
+  }
+  .project-step[data-status="in-progress"]:only-child::before {
+    height: 1rem;
+    color: red;
+    background-repeat: repeat;
+    background-position: left center;
+    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50%' cy='50%' r='4' opacity='0.15' fill='black'/%3E%3C/svg%3E%0A");
+    background-size: .75rem;
+    left: 5.5rem;
+    right: 5.5rem;
+    bottom: -1.875rem;
+  }
+  .project-step[data-status="in-progress"]:only-child::after {
+    --icon-size: 1.25rem;
+    width: var(--icon-size);
+    background: var(--color-grey-300);
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: var(--icon-size);
+    mask-image: var(--icon-point);
+    right: 3.75rem;
+    bottom: -2rem;
+  }
+  
+  .project-step .pill::after {
+    content: "";
+    display: inline-block;
+    width: var(--icon-size, 1.25rem);
+    height: var(--icon-size, 1.25rem);
+    background-color: var(--icon-color, var(--color-primary-100));
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: var(--size, 1.25rem);
+    mask-image: var(--icon, var(--icon-point));
+    position: absolute;
+    bottom: -2rem;
+  }
+  .project-step[data-status="done"] > .pill,
+  .project-step[data-status="uncompleted"] > .pill {
+    --background: transparent;
+  }
+  .project-step[data-status="done"] .pill::after {
+    mask-image: var(--icon-check-3);
+  }
+  .project-step[data-status="in-progress"] .pill::after {
+    mask-image: var(--icon-point-active);
+  }
+  .project-step[data-status="uncompleted"] .pill::after {
+    --icon-color: var(--color-grey-300);
+  }
+
+</style>
+
 <script setup>
 import Menu from "../components/Menu.vue";
 const { data } = defineProps({