From b120fb5804f9fd52fb50043c2057ac83fda3e566 Mon Sep 17 00:00:00 2001
From: Julien WITTOUCK <julien.wittouck@gmail.com>
Date: Fri, 5 Jul 2024 16:40:57 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20:=20layout=20without=20menu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../templates/layout-without-menu.html        | 134 ++++++------------
 src/main/resources/templates/layout.html      |   3 -
 2 files changed, 40 insertions(+), 97 deletions(-)

diff --git a/src/main/resources/templates/layout-without-menu.html b/src/main/resources/templates/layout-without-menu.html
index 35414d9..e1008cf 100644
--- a/src/main/resources/templates/layout-without-menu.html
+++ b/src/main/resources/templates/layout-without-menu.html
@@ -14,106 +14,52 @@
 </head>
 <body class="h-full">
 
-<!--
-    Created from template : https://tailwindui.com/components/application-ui/application-shells/stacked#component-2573937b459d64c1734b4141b1eff8d7
--->
-<div class="min-h-full">
-    <div class="bg-gray-800 pb-32">
-        <nav class="bg-gray-800">
-            <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
-                <div class="border-b border-gray-700">
-                    <div class="flex h-16 items-center justify-between px-4 sm:px-0">
-                        <!-- main menu -->
-                        <div class="flex items-center">
-                            <div class="flex-shrink-0">
-                                <a th:href="@{/}">
-                                    <svg class="h-8 w-8" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg"
-                                         aria-hidden="true" role="img"
-                                         preserveAspectRatio="xMidYMid meet" fill="#000000">
-                                        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
-                                        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
-                                        <g id="SVGRepo_iconCarrier">
-                                            <path fill="#6366f1"
-                                                  d="M13.431 9.802c.658 2.638-8.673 10.489-11.244 4.098C.696 10.197-.606 2.434.874 2.065c1.48-.368 11.9 5.098 12.557 7.737z"></path>
-                                            <path fill="#1E23DC"
-                                                  d="M11.437 10.355c.96 1.538-1.831 4.561-3.368 5.522c-1.538.961-2.899-.552-4.414-4.414c-.662-1.689-1.666-6.27-1.103-6.622c.562-.351 7.924 3.976 8.885 5.514z"></path>
-                                            <path fill="#6366f1"
-                                                  d="M22.557 9.802C21.9 12.441 31.23 20.291 33.802 13.9c1.49-3.703 2.792-11.466 1.312-11.835c-1.48-.368-11.899 5.098-12.557 7.737z"></path>
-                                            <path fill="#1E23DC"
-                                                  d="M24.552 10.355c-.96 1.538 1.831 4.561 3.368 5.522c1.537.961 2.898-.552 4.413-4.414c.662-1.688 1.666-6.269 1.104-6.621c-.563-.352-7.924 3.975-8.885 5.513z"></path>
-                                            <path fill="#6366f1"
-                                                  d="M32.347 26.912c0-.454-.188-1.091-.407-1.687c.585.028 1.519.191 2.77.817a4.003 4.003 0 0 0-.273-1.393c.041.02.075.034.116.055c-1.103-3.31-3.309-5.517-3.309-5.517h2.206c-2.331-4.663-4.965-8.015-8.075-9.559c-1.39-.873-3.688-1.338-7.373-1.339h-.003c-3.695 0-5.996.468-7.385 1.346c-3.104 1.547-5.734 4.896-8.061 9.552H4.76s-2.207 2.206-3.311 5.517c.03-.015.055-.025.084-.04a2.685 2.685 0 0 0-.282 1.377c1.263-.632 2.217-.792 2.813-.818c-.189.513-.343 1.044-.386 1.475a3.146 3.146 0 0 0-.135 1.343C6.75 26.584 8.25 26.792 10 27.667C11.213 31.29 14.206 34 18.001 34c3.793 0 6.746-2.794 7.958-6.416c1.458-1.25 3.708-.875 6.416.416a2.843 2.843 0 0 0-.036-1.093l.008.005z"></path>
-                                            <path fill="#B5B7FB"
-                                                  d="M31.243 23.601c.006 0 1.108.003 3.309 1.103c-1.249-2.839-7.525-4.07-9.931-3.291c-1.171 1.954-1.281 5.003-3.383 6.622c-1.741 1.431-4.713 1.458-6.479 0c-2.345-1.924-2.559-5.813-3.382-6.622c-2.407-.781-8.681.454-9.931 3.291c2.201-1.101 3.304-1.103 3.309-1.103c0 .001-1.103 2.208-1.103 3.311l.001-.001v.001c2.398-1.573 5.116-2.271 7.429-.452c1.666 7.921 12.293 7.545 13.833 0c2.314-1.818 5.03-1.122 7.429.452v-.001l.001.001c.002-1.103-1.101-3.311-1.102-3.311z"></path>
-                                            <path fill="#272B2B"
-                                                  d="M11 17s0-1.5 1.5-1.5S14 17 14 17v1.5s0 1.5-1.5 1.5s-1.5-1.5-1.5-1.5V17zm11 0s0-1.5 1.5-1.5S25 17 25 17v1.5s0 1.5-1.5 1.5s-1.5-1.5-1.5-1.5V17zm-7.061 10.808c-1.021.208 2.041 3.968 3.062 3.968c1.02 0 4.082-3.76 3.062-3.968c-1.021-.208-5.103-.208-6.124 0z"></path>
-                                        </g>
-                                    </svg>
-                                </a>
-                            </div>
-                        </div>
+<div class="min-h-full max-w-screen-2xl mx-auto px-20">
+    <nav class="py-2">
+        <div class="mx-auto flex items-center justify-between">
+            <!-- main menu -->
+            <a th:href="@{/}" class="flex justify-center items-center text-white font-bold gap-2">
+                <img src="/images/fox-svgrepo-com.svg" class="h-8 w-8" alt="GitLab Classrooms logo"/>
+                <span>GitLab Classrooms</span>
+            </a>
 
-                        <!-- profile icon -->
-                        <div class="hidden md:block">
-                            <div class="ml-4 flex items-center md:ml-6">
-                                <div class="ml-10 flex items-baseline space-x-4">
-                                    <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
-                                    <a href="https://gitlab-classrooms.gitlabpages.univ-lille.fr/gitlab-classrooms/user-documentation/student/01-student-dashboard/"
-                                       target="_blank"
-                                       class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
-                                       aria-current="page">Documentation</a>
-                                </div>
-
-                                <!-- Profile dropdown -->
-                                <div class="relative ml-3" x-data="{ open: false }">
-                                    <div>
-                                        <button type="button"
-                                                class="relative flex max-w-xs items-center rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
-                                                id="user-menu-button" aria-expanded="false" aria-haspopup="true"
-                                                @click=" open = ! open ">
-                                            <span class="absolute -inset-1.5"></span>
-                                            <span class="sr-only">Open user menu</span>
-                                            <img class="h-8 w-8 rounded-full" th:src="${user.avatarUrl}"
-                                                 alt="">
-                                        </button>
-                                    </div>
-                                    <div
-                                            :class="{ 'opacity-0': !open , 'opacity-100': open }"
-                                            class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
-                                            role="menu"
-                                            aria-orientation="vertical"
-                                            aria-labelledby="user-menu-button"
-                                            tabindex="-1">
-                                        <!-- Active: "bg-gray-100", Not Active: "" -->
-                                        <form th:action="@{/logout}" method="post">
-                                            <button type="submit" class="block px-4 py-2 text-sm text-gray-700  w-full text-left"
-                                               role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</button>
-                                        </form>
-
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
+            <!-- profile icon -->
+            <div class="flex items-center">
+                <div class="relative" x-data="{ open: false }">
+                    <div>
+                        <button type="button"
+                                id="user-menu-button" aria-expanded="false" aria-haspopup="true"
+                                @click="open = ! open">
+                            <img class="h-8 w-8 rounded-full" th:src="${user.avatarUrl}" alt="">
+                        </button>
                     </div>
-                </div>
-        </nav>
-        <header class="py-10">
-            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-                <h1 th:text="${pageTitle}" class="text-3xl font-bold tracking-tight text-white">Page Title</h1>
-            </div>
-        </header>
-    </div>
+                    <div
+                            :class="{ 'opacity-0': !open , 'opacity-100': open }"
+                            class="absolute right-0 z-10 mt-2 w-32 text-white bg-primary-100 hover:bg-primary-80 origin-top-right rounded-md py-1"
+                            role="menu"
+                            aria-orientation="vertical"
+                            aria-labelledby="user-menu-button"
+                            tabindex="-1">
+                        <!-- Active: "bg-gray-100", Not Active: "" -->
+                        <form th:action="@{/logout}" method="post">
+                            <button type="submit" class="block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out
+                            </button>
+                        </form>
 
-    <main class="-mt-32">
-        <div class="mx-auto max-w-7xl px-4 pb-12 sm:px-6 lg:px-8">
-            <div class="rounded-lg bg-white px-5 py-6 shadow sm:px-6">
-                <div
-                        class="relative overflow-hidden rounded opacity-75"
-                        th:insert="${content}"
-                >
+                    </div>
                 </div>
             </div>
         </div>
+    </nav>
+
+    <header class="py-10">
+        <h4 th:text="${pageTitle}" class="font-extrabold text-white pl-10">Page Title</h4>
+    </header>
+
+    <main
+            class="rounded-3xl bg-dark-2 p-10"
+            th:insert="${content}"
+    >
     </main>
 </div>
 
diff --git a/src/main/resources/templates/layout.html b/src/main/resources/templates/layout.html
index 58d8703..03e67d7 100644
--- a/src/main/resources/templates/layout.html
+++ b/src/main/resources/templates/layout.html
@@ -14,9 +14,6 @@
 </head>
 <body class="h-full">
 
-<!--
-    Created from template : https://tailwindui.com/components/application-ui/application-shells/stacked#component-2573937b459d64c1734b4141b1eff8d7
--->
 <div class="min-h-full max-w-screen-2xl mx-auto px-20">
     <nav class="">
         <div class="mx-auto flex items-center justify-between">
-- 
2.51.2