Sup .idea et Vendor et Push Index

assets/styles/app.css

@@ -1,3 +1,55 @@
-body {
+.left-background {
-    background-color: skyblue;
+    background-color: #db5559; /* Couleur de fond */
+    width: 20%; /* Prend 1/4 de la largeur de l'écran */
+    height: 100%; /* Prend toute la hauteur de la fenêtre */
+    position: fixed; /* Reste en place même si on fait défiler la page */
+    top: 0; /* Commence en haut de l'écran */
+    left: 0; /* Aligne à gauche de l'écran */
 }
+
+.index-title-page{
+    font-family: 'Brittany Signature', sans-serif;
+}
+
+ul {
+    list-style-type: none; /* Enlève les points de la liste */
+    padding: 0;
+}
+
+li {
+
+    padding-bottom:30px;
+}
+
+.btn-custom {
+    background-color: #FFFFFF; /* Couleur de fond verte */
+    color: black; /* Couleur du texte blanche */
+    border: none; /* Pas de bordure */
+    padding: 15px 30px; /* Espace intérieur (padding) */
+    font-size: 16px; /* Taille de police */
+    font-weight: bold; /* Texte en gras */
+    cursor: pointer; /* Curseur en forme de main au survol */
+    width: 100%; /* Ajuste la largeur automatiquement en fonction du contenu */
+    display: inline-block; /* Empêche le bouton de s'étendre à 100% */
+}
+
+/* Effet au survol */
+.btn-custom:hover {
+    background-color: #f8b5b5; /* Couleur légèrement plus foncée au survol */
+    color: #FFFFFF;
+}
+
+.icon-medium {
+    display: inline-flex; /* Utilise inline-flex pour gérer l'alignement facilement */
+    align-items: center; /* Centre verticalement l'icône */
+    width: 25px;
+    height: 25px;
+    margin-right: 8px; /* Espace entre l'icône et le texte */
+}
+
+.icon-container {
+    display: inline-flex; /* Permet d'afficher l'icône et le texte sur la même ligne */
+    align-items: center; /* Centre verticalement le contenu */
+}
+
+

composer.json

@@ -38,6 +38,7 @@
         "symfony/string": "7.1.*",
         "symfony/translation": "7.1.*",
         "symfony/twig-bundle": "7.1.*",
+        "symfony/ux-icons": "^2.20",
         "symfony/ux-turbo": "^2.20",
         "symfony/validator": "7.1.*",
         "symfony/web-link": "7.1.*",
@@ -100,7 +101,7 @@
         "symfony/browser-kit": "7.1.*",
         "symfony/css-selector": "7.1.*",
         "symfony/debug-bundle": "7.1.*",
-        "symfony/maker-bundle": "^1.0",
+        "symfony/maker-bundle": "^1.61",
         "symfony/phpunit-bridge": "^7.1",
         "symfony/stopwatch": "7.1.*",
         "symfony/web-profiler-bundle": "7.1.*"

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": "1bc99d81c026aaf4e662ffffde457d04",
+    "content-hash": "2ae388272b6e63ed6fdd209dca48fbba",
     "packages": [
         {
             "name": "composer/semver",
@@ -6837,6 +6837,94 @@
             ],
             "time": "2024-09-19T21:48:23+00:00"
         },
+        {
+            "name": "symfony/ux-icons",
+            "version": "v2.20.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/ux-icons.git",
+                "reference": "07328c6d3cf480f7d5dafdf621f0d54323e23035"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/ux-icons/zipball/07328c6d3cf480f7d5dafdf621f0d54323e23035",
+                "reference": "07328c6d3cf480f7d5dafdf621f0d54323e23035",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.1",
+                "symfony/framework-bundle": "^6.4|^7.0",
+                "symfony/twig-bundle": "^6.4|^7.0"
+            },
+            "conflict": {
+                "symfony/flex": "<1.13"
+            },
+            "require-dev": {
+                "psr/log": "^2|^3",
+                "symfony/asset-mapper": "^6.4|^7.0",
+                "symfony/console": "^6.4|^7.0",
+                "symfony/http-client": "6.4|^7.0",
+                "symfony/phpunit-bridge": "^6.3|^7.0",
+                "symfony/ux-twig-component": "^2.14",
+                "zenstruck/console-test": "^1.5"
+            },
+            "type": "symfony-bundle",
+            "extra": {
+                "thanks": {
+                    "name": "symfony/ux",
+                    "url": "https://github.com/symfony/ux"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\UX\\Icons\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Kevin Bond",
+                    "email": "kevinbond@gmail.com"
+                },
+                {
+                    "name": "Simon André",
+                    "email": "smn.andre@gmail.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Renders local and remote SVG icons in your Twig templates.",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "icons",
+                "svg",
+                "symfony-ux",
+                "twig"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/ux-icons/tree/v2.20.0"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-09-18T14:55:01+00:00"
+        },
         {
             "name": "symfony/ux-turbo",
             "version": "v2.20.0",

config/bundles.php

@@ -13,4 +13,5 @@ return [
     Symfony\Bundle\SecurityBundle\SecurityBundle::class => ['all' => true],
     Symfony\Bundle\MonologBundle\MonologBundle::class => ['all' => true],
     Symfony\Bundle\MakerBundle\MakerBundle::class => ['dev' => true],
+    Symfony\UX\Icons\UXIconsBundle::class => ['all' => true],
 ];

src/Controller/IndexController.php

@@ -1 +1,13 @@
 <?php
+
+namespace App\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\Routing\Attribute\Route;
+
+class IndexController extends AbstractController{
+    #[Route('/index', name: 'index_app')]
+    public function index(){
+        return $this->render('base.html.twig');
+    }
+}

symfony.lock

@@ -248,6 +248,18 @@
             "templates/base.html.twig"
         ]
     },
+    "symfony/ux-icons": {
+        "version": "2.20",
+        "recipe": {
+            "repo": "github.com/symfony/recipes",
+            "branch": "main",
+            "version": "2.17",
+            "ref": "803a3bbd5893f9584969ab8670290cdfb6a0a5b5"
+        },
+        "files": [
+            "assets/icons/symfony.svg"
+        ]
+    },
     "symfony/ux-turbo": {
         "version": "v2.20.0"
     },

templates/base.html.twig

@@ -4,6 +4,8 @@
         <meta charset="UTF-8">
         <title>{% block title %}Welcome!{% endblock %}</title>
         <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text><text y=%221.3em%22 x=%220.2em%22 font-size=%2276%22 fill=%22%23fff%22>sf</text></svg>">
+        <link href="https://fonts.cdnfonts.com/css/brittany-signature" rel="stylesheet">
+
         {% block stylesheets %}
         {% endblock %}
 
@@ -12,6 +14,43 @@
         {% endblock %}
     </head>
     <body>
-        {% block body %}{% endblock %}
+        {% block body %}
+            <div class="left-background">
+                <h1 class="index-title-page">FestinHegre</h1>
+                <div class="nav-bar">
+                    <ul>
+                        <li>
+                            <div class="btn-custom">
+                                Gestion Utilisateur
+                            </div>
+                        </li>
+                        <li>
+                            <div class="btn-custom">
+                                Gestion Table
+                            </div>
+                        </li>
+                        <li>
+                            <div class="btn-custom">
+                                Gestion Menu
+                            </div>
+                        </li>
+                        <li>
+                            <div class="btn-custom">
+                                <span>Gestion Promo</span>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+                <div class="Information-perso">
+                    <div class="btn-custom icon-container">
+                        <i class="icon-medium"> {{ ux_icon('ph:user-circle-fill') }}</i>
+                        <span>Compte</span>
+                    </div>
+                    <div class="">
+                        <i class="icon-medium">{{ ux_icon('iconamoon:exit-bold') }}</i>
+                    </div>
+                </div>
+            </div>
+        {% endblock %}
     </body>
 </html>

templates/index/index.html.twig

@@ -0,0 +1,45 @@
+{% extends 'base.html.twig' %}
+
+
+{% block title %}Accueil{% endblock %}
+
+
+{% block body %}
+    <div class="left-menu">
+        <h1 class="index-title-page">FestinHegre</h1>
+        <div class="nav-bar">
+            <ul>
+                <li>
+                    <div>
+                        Gestion Utilisateur
+                    </div>
+                </li>
+                <li>
+                    <div>
+                        Gestion Table
+                    </div>
+                </li>
+                <li>
+                    <div>
+                        <i class="fa-light fa-square-list"></i>
+                        Gestion Menu
+                    </div>
+                </li>
+                <li>
+                    <div>
+                        Gestion Promo
+                    </div>
+                </li>
+            </ul>
+        </div>
+        <div class="Information-perso">
+            <div>
+                <i class="fa-solid fa-circle-user"></i>
+                Compte
+            </div>
+            <div >
+                <i class="icon-medium">{{ ux_icon('iconamoon:exit-bold') }}</i>
+            </div>
+        </div>
+    </div>
+{% endblock %}