feat: add fixed sidebar navigation with hover expand and mobile hamburger

Implements Task 3: fixed left sidebar (70px collapsed → 250px on hover) with
9 nav items, social links, active-state detection, and mobile hamburger toggle
that matches the existing sidebar-nav.js selectors.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-03 01:03:57 +05:00
parent 6befaedb8f
commit b47ad7bef4
15 changed files with 409 additions and 0 deletions
@@ -0,0 +1,150 @@
<?php
/**
* БИТ.WMS Child Theme — Sidebar navigation template
*
* Fixed left sidebar: collapses to 70px (icons only), expands to 250px on hover.
* On mobile (<768px) hidden by default, toggled via .sidebar-nav__toggle button.
*
* @package bitwms-child
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
$theme_uri = get_stylesheet_directory_uri();
// Current path for active-state detection.
$current_path = wp_parse_url( get_permalink(), PHP_URL_PATH );
if ( empty( $current_path ) ) {
$current_path = $_SERVER['REQUEST_URI'] ?? '/';
}
$nav_items = array(
array(
'label' => 'БИТ.WMS',
'url' => '/bit-wms/',
'icon' => 'warehouse.svg',
),
array(
'label' => 'Кейсы',
'url' => '/cases/',
'icon' => 'folder.svg',
),
array(
'label' => 'Статьи',
'url' => '/articles/',
'icon' => 'document.svg',
),
array(
'label' => 'Вебинары',
'url' => '/webinars/',
'icon' => 'camera.svg',
),
array(
'label' => 'Курсы',
'url' => '/courses/',
'icon' => 'graduation.svg',
),
array(
'label' => 'Мероприятия',
'url' => '/events/',
'icon' => 'calendar.svg',
),
array(
'label' => 'Материалы',
'url' => '/materials/',
'icon' => 'download.svg',
),
array(
'label' => 'Новости',
'url' => '/news/',
'icon' => 'bell.svg',
),
array(
'label' => 'Контакты',
'url' => '/contacts/',
'icon' => 'phone.svg',
),
);
?>
<button class="sidebar-nav__toggle" aria-label="<?php esc_attr_e( 'Открыть меню', 'bitwms-child' ); ?>" aria-expanded="false">
<span class="sidebar-nav__toggle-bar"></span>
<span class="sidebar-nav__toggle-bar"></span>
<span class="sidebar-nav__toggle-bar"></span>
</button>
<aside class="sidebar-nav" aria-label="<?php esc_attr_e( 'Основная навигация', 'bitwms-child' ); ?>">
<div class="sidebar-nav__logo">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" aria-label="<?php esc_attr_e( 'На главную', 'bitwms-child' ); ?>">
<img
src="<?php echo esc_url( $theme_uri . '/img/logo-short.svg' ); ?>"
alt="<?php esc_attr_e( 'БИТ.WMS', 'bitwms-child' ); ?>"
width="32"
height="32"
/>
</a>
</div>
<nav class="sidebar-nav__menu" aria-label="<?php esc_attr_e( 'Разделы сайта', 'bitwms-child' ); ?>">
<ul class="sidebar-nav__list">
<?php foreach ( $nav_items as $item ) :
$is_active = rtrim( $current_path, '/' ) === rtrim( $item['url'], '/' );
$item_class = 'sidebar-nav__item' . ( $is_active ? ' sidebar-nav__item--active' : '' );
$icon_src = esc_url( $theme_uri . '/img/icons/' . $item['icon'] );
?>
<li class="<?php echo esc_attr( $item_class ); ?>">
<a
href="<?php echo esc_url( $item['url'] ); ?>"
class="sidebar-nav__link"
<?php if ( $is_active ) : ?>aria-current="page"<?php endif; ?>
>
<img
class="sidebar-nav__icon"
src="<?php echo $icon_src; ?>"
alt=""
width="24"
height="24"
aria-hidden="true"
/>
<span class="sidebar-nav__label"><?php echo esc_html( $item['label'] ); ?></span>
</a>
</li>
<?php endforeach; ?>
</ul>
</nav>
<div class="sidebar-nav__social">
<a
href="https://t.me/bitwms"
class="sidebar-nav__social-link"
target="_blank"
rel="noopener noreferrer"
aria-label="<?php esc_attr_e( 'Telegram', 'bitwms-child' ); ?>"
>
<img
src="<?php echo esc_url( $theme_uri . '/img/icons/telegram.svg' ); ?>"
alt="Telegram"
width="24"
height="24"
/>
</a>
<a
href="https://vk.com/bitwms"
class="sidebar-nav__social-link"
target="_blank"
rel="noopener noreferrer"
aria-label="<?php esc_attr_e( 'ВКонтакте', 'bitwms-child' ); ?>"
>
<img
src="<?php echo esc_url( $theme_uri . '/img/icons/vk.svg' ); ?>"
alt="ВКонтакте"
width="24"
height="24"
/>
</a>
</div>
</aside>