style desktop nav panel

This commit is contained in:
isUnknown 2024-04-15 13:43:57 +02:00
parent 57e9ca74da
commit 81454b3e4e
16 changed files with 157 additions and 136 deletions

View file

@ -1,12 +1,12 @@
<?php
return [
return array(
'debug' => true,
'panel' => [
'panel' => array(
'menu' => require __DIR__ . '/menu.php',
],
'routes' => [
),
'routes' => array(
require __DIR__ . '/routes/virtual-author.php',
require __DIR__ . '/routes/virtual-category.php',
]
];
),
);

View file

@ -16,11 +16,11 @@ $isOpen = isset($isOpen) ? $isOpen : false;
</header>
<div id="entry-btns">
<button
class="entry-btn entry-btn--left toggle-btn left"
onclick="togglePanel('left')"
class="entry-btn entry-btn--left toggle-btn--left"
onclick="togglePanel('left', event)"
>années</button>
<button
class="entry-btn entry-btn--right toggle-btn right"
onclick="togglePanel('right')"
class="entry-btn entry-btn--right toggle-btn--right"
onclick="togglePanel('right', event)"
>categories</button>
</div>

View file

@ -7,16 +7,19 @@ $entryTopPos = $entryTopPos ?? 20;
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?= $site->title() ?><?= e($page->url() !== $site->url(), '-' . $page->title()) ?></title>
<link rel="stylesheet" href="<?= url('assets/css/style.css') . '?version-cache-prevent' . rand(0, 1000) ?>" />
<script src="<?= url('assets') ?>/js/script.js?version-cache-prevent<?= rand(0, 1000)?>" defer></script>
<script defer src="<?= url('assets/js/alpine.min.js') ?>"></script>
<script defer src="<?= url('assets/js/ragadjust.js') ?>"></script>
<meta name="robots" content="noindex, nofollow, noarchive">
</head>
<body class="grid" data-template="<?= $page->template() ?>" >
<header id="main-header">
<div id="logo" >
<a href="/" class="no-line">
<a id="logo__link" href="/" class="no-line">
<h1 id="actuel">actuel</h1>
<h1 id="inactuel">inactuel</h1>
</a>

View file

@ -1,3 +1,29 @@
<sidebar id="desktop-nav">
<ul>
<li class="left top" style="--left: <?= rand(0, 4) ?>; --top: <?= rand(0, 6) ?>">
<button class="toggle-btn toggle-btn--left" onclick="togglePanel('left', event)">
années
</button>
</li>
<li class="left top" style="--left: <?= rand(0, 4) ?>; --top: <?= rand(0, 6) ?>">
<button class="toggle-btn toggle-btn--left" onclick="togglePanel('right', event)">
catégories
</button>
</li>
<li class="empty
"></li>
<li class="left top" style="--left: <?= rand(0, 4) ?>; --top: <?= rand(0, 6) ?>">
<a href="#">
s'abonner
</a>
</li>
<li class="left top" style="--left: <?= rand(0, 4) ?>; --top: <?= rand(0, 6) ?>">
<a href="<?= $site->find('a-propos')->url() ?>">
à propos
</a>
</li>
</ul>
</sidebar>
<nav
class="panel panel--left"
@ -7,7 +33,7 @@
<input
class="search__input"
type="text"
placeholder="titre / auteur / année / catégorie"
placeholder="titre / auteur / année / catégor"
x-model="search"
>
<img
@ -58,7 +84,7 @@
<button
:class="edito ? 'open' : 'close'"
x-show="search.length === 0"
class="see-more toggle left"
class="see-more toggle-btn toggle-btn--left"
@click="edito = !edito"
>Lire</button>
<ul class="panel-item-content__texts">
@ -111,7 +137,7 @@
<input
class="search__input"
type="text"
placeholder="titre / auteur / année / catégorie"
placeholder="titre / auteur / année / catégor"
x-model="search"
>
<img
@ -131,8 +157,8 @@
<ul class="panel__items">
<?php
$categories = $kirby->collection('categories');
shuffle($categories);
foreach($categories as $category): ?>
shuffle($categories);
foreach($categories as $category): ?>
<li
class="panel__item "
x-data='{ isOpen: false }'
@ -156,8 +182,8 @@
>
<ul class="panel-item-content__texts">
<?php
shuffle($category['texts']);
foreach($category['texts'] as $article): ?>
shuffle($category['texts']);
foreach($category['texts'] as $article): ?>
<li
class="text"
x-data="{

View file

@ -25,7 +25,7 @@ $activeTab = isset($activeTab) ? Str::slug($activeTab) : '';
><?= $left['label'] ?></button>
<?php endif ?>
<button
class="toggle right"
class="toggle-btn toggle-btn--right"
:class="activeTab === 'texts' ? 'open' : 'close'"
title="Voir tous les textes"
@click="toggleTab($data, 'texts')"
@ -69,9 +69,9 @@ $activeTab = isset($activeTab) ? Str::slug($activeTab) : '';
<?php if (!$authorFilter || $authorFilter == $article->author()->toUser()->name()->value()) : ?>
<?php snippet(
'text-item',
[
'article' => $article
]
array(
'article' => $article
)
) ?>
<?php endif ?>
<?php endforeach ?>

View file

@ -10,7 +10,7 @@
>
<h2 class="main-title <?= setTitleFontSizeClass($site->subtitle()) ?>"><?= $site->subtitle() ?></h2>
<p
class="main-edito-btn | toggle-btn left"
class="main-edito-btn | toggle-btn toggle-btn--left"
>édito</p>
</a>
<?php endslot() ?>

View file

@ -2,11 +2,11 @@
<main id="<?= $page->template() ?>">
<div id="entry-btns">
<button
class="entry-btn entry-btn--left toggle-btn left"
class="entry-btn entry-btn--left toggle-btn toggle-btn--left"
onclick="togglePanel('left')"
>années</button>
<button
class="entry-btn entry-btn--right toggle-btn right"
class="entry-btn entry-btn--right toggle-btn toggle-btn--right"
onclick="togglePanel('right')"
>categories</button>
</div>