3 - Style navbar

This commit is contained in:
myrmidex 2026-06-05 19:38:42 +00:00
parent 1daec3cc71
commit c154404c6f
4 changed files with 25 additions and 7 deletions

View file

@ -1,5 +1,7 @@
@import "tailwindcss";
@plugin "../daisyui.mjs";
@plugin "../daisyui.mjs" {
themes: aqua --default;
}
html, body { height: 100%; margin: 0; }
.map-container { height: 100vh; width: 100%; }
.map-container { height: calc(100vh - 4rem); width: 100%; }

View file

@ -1,10 +1,12 @@
{% extends 'base.html.twig' %}
{% block navbar %}{% endblock %}
{% block body %}
<div class="min-h-screen flex">
<div class="hidden lg:flex lg:w-1/2 bg-primary flex-col items-center justify-center gap-6 p-12">
<span class="text-5xl font-bold text-primary-content tracking-tight">Rater</span>
<p class="text-primary-content/70 text-lg text-center max-w-xs">
<div class="hidden lg:flex lg:w-1/2 bg-neutral flex-col items-center justify-center gap-6 p-12">
<span class="text-5xl font-bold text-neutral-content tracking-tight">Rater</span>
<p class="text-neutral-content/70 text-lg text-center max-w-xs">
Rate and discover restaurants near you.
</p>
</div>

View file

@ -18,7 +18,22 @@
<script src="https://cdn.jsdelivr.net/npm/frankenphp-hot-reload/+esm" type="module"></script>
{% endif %}
</head>
<body>
<body class="flex flex-col min-h-screen">
{% block navbar %}
<nav class="navbar bg-base-100 text-base-content shrink-0">
<div class="flex-1">
<a href="{{ path('app_index_index') }}" class="btn btn-ghost text-xl font-bold">Rater</a>
</div>
<div class="flex-none gap-2">
{% if app.user %}
<span class="text-sm opacity-75 hidden sm:inline">{{ app.user.userIdentifier }}</span>
<a href="{{ path('app_logout') }}" class="btn btn-ghost btn-sm">Log out</a>
{% else %}
<a href="{{ path('app_login') }}" class="btn btn-ghost btn-sm">Log in</a>
{% endif %}
</div>
</nav>
{% endblock %}
{% block body %}{% endblock %}
</body>
</html>

View file

@ -1,6 +1,5 @@
{% extends 'base.html.twig' %}
{% block body %}
<h1>Rater</h1>
<div {{ stimulus_controller('map') }} class="map-container"></div>
{% endblock %}