Ajout d'un menu

assets/app.js

@@ -6,9 +6,5 @@ import './bootstrap.js';
  * which should already be in your base.html.twig.
  */
 
-import Test from './js/test.js';
-const test = new Test()
-test.tellMe()
-console.log("Et là ?")
 
 import './styles/app.css';

assets/controllers/hello_controller.js

@@ -1,16 +0,0 @@
-import { Controller } from '@hotwired/stimulus';
-
-/*
- * This is an example Stimulus controller!
- *
- * Any element with a data-controller="hello" attribute will cause
- * this controller to be executed. The name "hello" comes from the filename:
- * hello_controller.js -> "hello"
- *
- * Delete this file or adapt it for your use!
- */
-export default class extends Controller {
-    connect() {
-        this.element.textContent = 'Hello Stimulus! Edit me in assets/controllers/hello_controller.js';
-    }
-}

assets/controllers/menuburger_controller.js

@@ -0,0 +1,11 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    static targets = ['navlinks']
+
+    toggle() {
+        this.navlinksTarget.classList.toggle('mobile-menu')
+        const header = document.querySelector('header')
+        header.classList.toggle('big')
+    }
+}

assets/js/test.js

@@ -1,5 +0,0 @@
-export default class Test {
-    tellMe() {
-        console.log("je suis lu")
-    }
-}

assets/styles/app.css

@@ -1,4 +1,132 @@
-@tailwind base;
+/* @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+@layer components {
+    .btn-primary {
+      @apply py-2 px-5 bg-violet-500 text-white font-semibold rounded-full shadow-md hover:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-400 focus:ring-opacity-75;
+    }
+}
+
+@layer components {
+    .btn-danger {
+      @apply py-2 px-5 bg-red-500 text-white font-semibold rounded-full shadow-md hover:bg-red-700 focus:outline-none focus:ring focus:ring-red-400 focus:ring-opacity-75;
+    }
+} */
+
+*{
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  text-decoration: none;
+}
+
+header {
+  height: 40vh;
+  width: 100vw;
+  background-image: url(../images/landscape.jpg);
+  background-size: cover;
+  transition: all 0.1s ease;
+}
+
+.navbar {
+  position: absolute;
+  padding: 50px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.navbar a {
+  color: white;
+}
+
+.navbar .logo {
+  font-size: 6em;
+  font-weight: bold;
+}
+
+.navbar .nav-links ul {
+  display: flex;
+}
+
+.navbar .nav-links ul li {
+  margin: 0 25px;
+}
+
+.navbar .nav-links ul li.active a {
+  color: #ed3c57;
+  font-weight: 600;
+}
+
+.navbar .menu-burger {
+  display: none;
+  position: absolute;
+  top: 50px;
+  right: 30px;
+  width: 35px;
+}
+
+.navbar .nav-links ul li {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+@media screen and (max-width: 900px) {
+  header.big {
+    height: 100vh;
+  }
+
+  .navbar {
+    padding: 0;
+  }
+
+  .nav-links {
+    top: 0;
+    left: 0;
+    position: absolute;
+    background-color: rgba(0, 255, 221, 0.308);
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    backdrop-filter: blur(7px);
+    margin-left: -100%;
+    transition: all 0.1s ease;
+  }
+
+  .nav-links ul {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .navbar .menu-burger {
+    display: block;
+  }
+  .nav-links.mobile-menu {
+    margin-left: 0;
+  }
+
+  .navbar .nav-links > ul > li {
+    margin: 25px 0;
+    font-size: 1.2em;
+  }
+
+  .navbar .nav-links ul li {
+    flex-direction: column;
+  }
+
+  .navbar .logo {
+    position: absolute;
+    top: 40px;
+    left: 30px;
+    font-size: 2em;
+  }
+}
+

composer.json

@@ -44,7 +44,6 @@
         "symfony/web-link": "7.1.*",
         "symfony/workflow": "7.1.*",
         "symfony/yaml": "7.1.*",
-        "symfonycasts/tailwind-bundle": "^0.6.0",
         "twig/extra-bundle": "^2.12|^3.0",
         "twig/twig": "^2.12|^3.0"
     },

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "15bdbd92b80ef033d41bfc293c18c528",
+    "content-hash": "3ec795619f12a12c89ef1c6569260bf3",
     "packages": [
         {
             "name": "composer/semver",
@@ -7520,60 +7520,6 @@
             ],
             "time": "2024-09-17T12:49:58+00:00"
         },
-        {
-            "name": "symfonycasts/tailwind-bundle",
-            "version": "v0.6.0",
-            "source": {
-                "type": "git",
-                "url": "https://github.com/SymfonyCasts/tailwind-bundle.git",
-                "reference": "4cde58e23605e136d5c40a9c945c673b488d4fd6"
-            },
-            "dist": {
-                "type": "zip",
-                "url": "https://api.github.com/repos/SymfonyCasts/tailwind-bundle/zipball/4cde58e23605e136d5c40a9c945c673b488d4fd6",
-                "reference": "4cde58e23605e136d5c40a9c945c673b488d4fd6",
-                "shasum": ""
-            },
-            "require": {
-                "php": ">=8.1",
-                "symfony/asset-mapper": "^6.3|^7.0",
-                "symfony/cache": "^6.3|^7.0",
-                "symfony/console": "^5.4|^6.3|^7.0",
-                "symfony/http-client": "^5.4|^6.3|^7.0",
-                "symfony/process": "^5.4|^6.3|^7.0"
-            },
-            "require-dev": {
-                "symfony/filesystem": "^6.3|^7.0",
-                "symfony/framework-bundle": "^6.3|^7.0",
-                "symfony/phpunit-bridge": "^6.3|^7.0"
-            },
-            "type": "library",
-            "autoload": {
-                "psr-4": {
-                    "Symfonycasts\\TailwindBundle\\": "src"
-                }
-            },
-            "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
-            "authors": [
-                {
-                    "name": "Ryan Weaver",
-                    "homepage": "https://symfonycasts.com"
-                }
-            ],
-            "description": "Delightful Tailwind Support for Symfony + AssetMapper",
-            "keywords": [
-                "asset-mapper",
-                "tailwind"
-            ],
-            "support": {
-                "issues": "https://github.com/SymfonyCasts/tailwind-bundle/issues",
-                "source": "https://github.com/SymfonyCasts/tailwind-bundle/tree/v0.6.0"
-            },
-            "time": "2024-07-05T21:02:14+00:00"
-        },
         {
             "name": "twig/extra-bundle",
             "version": "v3.13.0",
@@ -10120,7 +10066,7 @@
     ],
     "aliases": [],
     "minimum-stability": "stable",
-    "stability-flags": [],
+    "stability-flags": {},
     "prefer-stable": true,
     "prefer-lowest": false,
     "platform": {
@@ -10128,6 +10074,6 @@
         "ext-ctype": "*",
         "ext-iconv": "*"
     },
-    "platform-dev": [],
+    "platform-dev": {},
     "plugin-api-version": "2.6.0"
 }

config/bundles.php

@@ -14,5 +14,4 @@ return [
     Symfony\Bundle\MonologBundle\MonologBundle::class => ['all' => true],
     Symfony\Bundle\MakerBundle\MakerBundle::class => ['dev' => true],
     FOS\CKEditorBundle\FOSCKEditorBundle::class => ['all' => true],
-    Symfonycasts\TailwindBundle\SymfonycastsTailwindBundle::class => ['all' => true],
 ];

symfony.lock

@@ -300,9 +300,6 @@
             "config/packages/workflow.yaml"
         ]
     },
-    "symfonycasts/tailwind-bundle": {
-        "version": "v0.6.0"
-    },
     "twig/extra-bundle": {
         "version": "v3.13.0"
     }

templates/_menu.html.twig

@@ -1,29 +1,30 @@
-<nav id="topbar">
-    <ul>
-        <li><a href="{{ path('app_index') }}">Blog</a></li>
-        <li><a href="#">Contact</a></li>
-        {% if is_granted('ROLE_AUTHOR') %}
-        <li>Administation
-            <ul>
-                <li><a href="{{ path('app_article_index') }}">Articles</a></li>
-            </ul>
-        </li>
-        {% endif %}
-    </ul>
-    {% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
-    <ul>
-        <li>
-            {{ app.user }}
-            <ul>
-                <li><a href="{{ path('app_logout') }}">Se déconnecter</a></li>
-            </ul>
-        </li>
-    </ul>
-    {% else %}
-    <ul>
-        <li>
-            <a href="{{ path('app_login') }}">Se connecter</a>
-        </li>
-    </ul>
-    {% endif %}
-</nav>
+<nav class="navbar" data-controller="menuburger">
+    <a href="#" class="logo">Opinions sur le réel</a>
+    <div class="nav-links" data-menuburger-target="navlinks">
+        <ul>
+            <li><a href="{{ path('app_index') }}">Blog</a></li>
+            <li><a href="#">Contact</a></li>
+            {% if is_granted('ROLE_AUTHOR') %}
+            <li>
+                <a href="#">Administation</a>
+                <ul>
+                    <li><a href="{{ path('app_article_index') }}">Articles</a></li>
+                </ul>
+            </li>
+            {% endif %}
+            {% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
+            <li>
+                <a href="#">{{ app.user }}</a>
+                <ul>
+                    <li><a href="{{ path('app_logout') }}">Se déconnecter</a></li>
+                </ul>
+            </li>
+            {% else %}
+            <li>
+                <a href="{{ path('app_login') }}">Se connecter</a>
+            </li>
+            {% endif %}
+        </ul>
+    </div>
+    <img src="{{ asset('images/menu-btn.png')}}" alt="Menu burger" class="menu-burger" data-action="click->menuburger#toggle">
+</nav>

templates/base.html.twig

@@ -14,6 +14,10 @@
     </head>
     <body>
         {{ include('_menu.html.twig')}}
-        {% block body %}{% endblock %}
+        <header>
+        </header>
+        <main>    
+            {% block body %}{% endblock %}
+        </main>
     </body>
 </html>

templates/index/index.html.twig

@@ -4,7 +4,7 @@
 
 {% block body %}
 
-<div class="">
+<div>
     <h1>Opinions sur le réel</h1>
 
     Le blog de benj