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:
@@ -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>
|
||||
Reference in New Issue
Block a user