templates/base.html.twig

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Mixed Vinyl{% endblock %}</title>

        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="apple-touch-icon" sizes="180x180" href="{{ asset('apple-touch-icon.png') }}">
        <link rel="icon" type="image/png" sizes="32x32" href="{{ asset('favicon-32x32.png') }}">
        <link rel="icon" type="image/png" sizes="16x16" href="{{ asset('favicon-16x16.png') }}">

        {% block stylesheets %}
        {% endblock %}

        {% block javascripts %}
            <script src="https://kit.fontawesome.com/5a377fab5b.js" crossorigin="anonymous"></script>
        {% endblock %}
    </head>
    <body class="bg-gray-800 text-white">
        <div class="mb-20">
            <!-- Main Navigation -->
            <nav class="bg-gray-900">
                <div class="container mx-auto flex items-center justify-between px-4 py-2">
                    <a href="{{ path('app_homepage') }}" class="flex">
                        <i class="fas fa-record-vinyl"></i>
                        <span class="pt-1 px-2 font-bold">Mixed Vinyl</span>
                    </a>
                    <!-- For simplicity, the collapse feature is omitted -->
                    <div class="flex justify-end items-center">
                        <ul class="flex space-x-4">
                            <li class="pt-3">
                                <a href="{{ path('app_browse') }}">Browse Mixes</a>
                            </li>
                            <!-- If Authenticated -->
                            <li class="relative group">
                                <a href="#" class="flex items-center justify-center border-2 border-white rounded-full p-2 w-12 h-12">
                                    <i class="fas fa-user-astronaut text-xl"></i>
                                </a>
                            </li>
                            <!-- End If Authenticated -->
                        </ul>
                    </div>
                </div>
            </nav>
            <!-- End Main Navigation -->
        </div>

        {% block body %}{% endblock %}

        <!-- Footer -->
        <div class="container mx-auto mt-20">
            <footer class="flex items-center justify-between py-12 px-5 border-t border-gray-600">
                <div class="flex items-center space-x-2 text-red-600">
                    <i class="fas fa-heart"></i>
                    <span class="text-gray-400">The guys and gals at</span>
                    <a target="_blank" href="https://symfonycasts.com/" class="text-blue-500">
                        SymfonyCasts
                    </a>
                </div>
                <ul class="flex space-x-4">
                    <li><a class="text-gray-400" target="_blank" href="https://github.com/SymfonyCasts/symfony6"><i class="fab fa-github"></i></a></li>
                </ul>
            </footer>
        </div>
        <!-- End Footer -->
    </body>
</html>