From b47ad7bef47670dea82bd6941ca8c521f2d40539 Mon Sep 17 00:00:00 2001 From: nekenny Date: Fri, 3 Apr 2026 01:03:57 +0500 Subject: [PATCH] feat: add fixed sidebar navigation with hover expand and mobile hamburger MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- wp-content/themes/bitwms-child/functions.php | 8 + .../themes/bitwms-child/img/icons/bell.svg | 4 + .../bitwms-child/img/icons/calendar.svg | 6 + .../themes/bitwms-child/img/icons/camera.svg | 4 + .../bitwms-child/img/icons/document.svg | 7 + .../bitwms-child/img/icons/download.svg | 5 + .../themes/bitwms-child/img/icons/folder.svg | 3 + .../bitwms-child/img/icons/graduation.svg | 4 + .../themes/bitwms-child/img/icons/phone.svg | 3 + .../bitwms-child/img/icons/telegram.svg | 4 + .../themes/bitwms-child/img/icons/vk.svg | 3 + .../bitwms-child/img/icons/warehouse.svg | 4 + .../themes/bitwms-child/img/logo-short.svg | 4 + wp-content/themes/bitwms-child/style.css | 200 ++++++++++++++++++ .../bitwms-child/templates/sidebar-nav.php | 150 +++++++++++++ 15 files changed, 409 insertions(+) create mode 100644 wp-content/themes/bitwms-child/img/icons/bell.svg create mode 100644 wp-content/themes/bitwms-child/img/icons/calendar.svg create mode 100644 wp-content/themes/bitwms-child/img/icons/camera.svg create mode 100644 wp-content/themes/bitwms-child/img/icons/document.svg create mode 100644 wp-content/themes/bitwms-child/img/icons/download.svg create mode 100644 wp-content/themes/bitwms-child/img/icons/folder.svg create mode 100644 wp-content/themes/bitwms-child/img/icons/graduation.svg create mode 100644 wp-content/themes/bitwms-child/img/icons/phone.svg create mode 100644 wp-content/themes/bitwms-child/img/icons/telegram.svg create mode 100644 wp-content/themes/bitwms-child/img/icons/vk.svg create mode 100644 wp-content/themes/bitwms-child/img/icons/warehouse.svg create mode 100644 wp-content/themes/bitwms-child/img/logo-short.svg create mode 100644 wp-content/themes/bitwms-child/templates/sidebar-nav.php diff --git a/wp-content/themes/bitwms-child/functions.php b/wp-content/themes/bitwms-child/functions.php index a6ee156..2215fe2 100644 --- a/wp-content/themes/bitwms-child/functions.php +++ b/wp-content/themes/bitwms-child/functions.php @@ -52,3 +52,11 @@ foreach ( $bitwms_includes as $bitwms_file ) { } } unset( $bitwms_file, $bitwms_path ); + +// --------------------------------------------------------------------------- +// 3. Inject sidebar navigation before the GeneratePress header +// --------------------------------------------------------------------------- + +add_action( 'generate_before_header', function () { + get_template_part( 'templates/sidebar-nav' ); +} ); diff --git a/wp-content/themes/bitwms-child/img/icons/bell.svg b/wp-content/themes/bitwms-child/img/icons/bell.svg new file mode 100644 index 0000000..ce60657 --- /dev/null +++ b/wp-content/themes/bitwms-child/img/icons/bell.svg @@ -0,0 +1,4 @@ + + + + diff --git a/wp-content/themes/bitwms-child/img/icons/calendar.svg b/wp-content/themes/bitwms-child/img/icons/calendar.svg new file mode 100644 index 0000000..618cfe6 --- /dev/null +++ b/wp-content/themes/bitwms-child/img/icons/calendar.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/wp-content/themes/bitwms-child/img/icons/camera.svg b/wp-content/themes/bitwms-child/img/icons/camera.svg new file mode 100644 index 0000000..e7161f1 --- /dev/null +++ b/wp-content/themes/bitwms-child/img/icons/camera.svg @@ -0,0 +1,4 @@ + + + + diff --git a/wp-content/themes/bitwms-child/img/icons/document.svg b/wp-content/themes/bitwms-child/img/icons/document.svg new file mode 100644 index 0000000..3f1a29c --- /dev/null +++ b/wp-content/themes/bitwms-child/img/icons/document.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/wp-content/themes/bitwms-child/img/icons/download.svg b/wp-content/themes/bitwms-child/img/icons/download.svg new file mode 100644 index 0000000..d298d68 --- /dev/null +++ b/wp-content/themes/bitwms-child/img/icons/download.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/wp-content/themes/bitwms-child/img/icons/folder.svg b/wp-content/themes/bitwms-child/img/icons/folder.svg new file mode 100644 index 0000000..6873565 --- /dev/null +++ b/wp-content/themes/bitwms-child/img/icons/folder.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/bitwms-child/img/icons/graduation.svg b/wp-content/themes/bitwms-child/img/icons/graduation.svg new file mode 100644 index 0000000..47c8770 --- /dev/null +++ b/wp-content/themes/bitwms-child/img/icons/graduation.svg @@ -0,0 +1,4 @@ + + + + diff --git a/wp-content/themes/bitwms-child/img/icons/phone.svg b/wp-content/themes/bitwms-child/img/icons/phone.svg new file mode 100644 index 0000000..84a168a --- /dev/null +++ b/wp-content/themes/bitwms-child/img/icons/phone.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/bitwms-child/img/icons/telegram.svg b/wp-content/themes/bitwms-child/img/icons/telegram.svg new file mode 100644 index 0000000..fd87308 --- /dev/null +++ b/wp-content/themes/bitwms-child/img/icons/telegram.svg @@ -0,0 +1,4 @@ + + + + diff --git a/wp-content/themes/bitwms-child/img/icons/vk.svg b/wp-content/themes/bitwms-child/img/icons/vk.svg new file mode 100644 index 0000000..df8c575 --- /dev/null +++ b/wp-content/themes/bitwms-child/img/icons/vk.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/bitwms-child/img/icons/warehouse.svg b/wp-content/themes/bitwms-child/img/icons/warehouse.svg new file mode 100644 index 0000000..365bbe4 --- /dev/null +++ b/wp-content/themes/bitwms-child/img/icons/warehouse.svg @@ -0,0 +1,4 @@ + + + + diff --git a/wp-content/themes/bitwms-child/img/logo-short.svg b/wp-content/themes/bitwms-child/img/logo-short.svg new file mode 100644 index 0000000..ebc4a88 --- /dev/null +++ b/wp-content/themes/bitwms-child/img/logo-short.svg @@ -0,0 +1,4 @@ + + + Б + diff --git a/wp-content/themes/bitwms-child/style.css b/wp-content/themes/bitwms-child/style.css index 2526ee1..3f16be8 100644 --- a/wp-content/themes/bitwms-child/style.css +++ b/wp-content/themes/bitwms-child/style.css @@ -280,3 +280,203 @@ body.sidebar-overlay::after { background-color: rgba(0, 0, 0, 0.4); z-index: 199; } + +/* ========================================================================== + Sidebar navigation + ========================================================================== */ + +/* Base sidebar */ +.sidebar-nav { + position: fixed; + top: 0; + left: 0; + width: var(--sidebar-width-collapsed); + height: 100vh; + background: var(--color-white); + border-right: 1px solid var(--color-gray-light); + z-index: 1000; + display: flex; + flex-direction: column; + transition: width 0.25s ease; + overflow: hidden; +} + +.sidebar-nav:hover { + width: var(--sidebar-width-expanded); +} + +/* Logo area */ +.sidebar-nav__logo { + display: flex; + align-items: center; + justify-content: center; + min-height: 60px; + border-bottom: 1px solid var(--color-gray-light); + flex-shrink: 0; +} + +.sidebar-nav__logo a { + display: flex; + align-items: center; + justify-content: center; + text-decoration: none; +} + +/* Menu / navigation area */ +.sidebar-nav__menu { + flex: 1; + overflow-y: auto; + overflow-x: hidden; +} + +.sidebar-nav__list { + list-style: none; + margin: 0; + padding: 0; +} + +/* Individual links */ +.sidebar-nav__link { + display: flex; + align-items: center; + gap: 16px; + padding: 12px 23px; + color: var(--color-black); + text-decoration: none; + white-space: nowrap; + transition: + background-color var(--transition-base), + color var(--transition-base); +} + +.sidebar-nav__link:hover, +.sidebar-nav__link:focus { + background-color: var(--color-gray-light); + color: var(--color-black); + text-decoration: none; +} + +/* Active item */ +.sidebar-nav__item--active .sidebar-nav__link { + color: var(--color-primary); + font-weight: var(--font-weight-bold); +} + +/* Icon */ +.sidebar-nav__icon { + flex-shrink: 0; + width: 24px; + height: 24px; +} + +/* Label — hidden when collapsed, visible when sidebar hovered */ +.sidebar-nav__label { + opacity: 0; + transition: opacity 0.2s ease; + font-size: 0.9375rem; /* 15px */ +} + +.sidebar-nav:hover .sidebar-nav__label { + opacity: 1; +} + +/* Social links at the bottom */ +.sidebar-nav__social { + display: flex; + align-items: center; + justify-content: center; + gap: 12px; + padding: 16px; + border-top: 1px solid var(--color-gray-light); + flex-shrink: 0; +} + +.sidebar-nav__social-link { + display: flex; + align-items: center; + justify-content: center; + color: var(--color-black); + opacity: 0.6; + transition: opacity var(--transition-base); + text-decoration: none; +} + +.sidebar-nav__social-link:hover, +.sidebar-nav__social-link:focus { + opacity: 1; + text-decoration: none; + color: var(--color-black); +} + +/* Content shift on desktop — push main content right of the sidebar */ +.site-content, +.site-header, +.site-footer { + margin-left: var(--sidebar-width-collapsed); +} + +/* Hamburger / toggle button */ +.sidebar-nav__toggle { + display: none; + position: fixed; + top: 12px; + left: 12px; + z-index: 1100; + flex-direction: column; + gap: 4px; + align-items: center; + justify-content: center; + width: 44px; + height: 44px; + padding: 0; + background: var(--color-white); + border: 1px solid var(--color-gray-light); + cursor: pointer; + appearance: none; + -webkit-appearance: none; +} + +.sidebar-nav__toggle:focus-visible { + outline: 2px solid var(--color-primary); + outline-offset: 2px; +} + +.sidebar-nav__toggle-bar { + display: block; + width: 24px; + height: 2px; + background-color: var(--color-black); + transition: transform 0.2s ease, opacity 0.2s ease; +} + +/* Mobile styles */ +@media (max-width: 767px) { + /* Hide sidebar off-screen by default */ + .sidebar-nav { + transform: translateX(-100%); + transition: transform 0.25s ease, width 0.25s ease; + width: var(--sidebar-width-expanded); + } + + /* Show sidebar when open */ + .sidebar-nav--open { + transform: translateX(0); + } + + /* Always show labels on mobile when open */ + .sidebar-nav .sidebar-nav__label { + opacity: 1; + } + + /* Show hamburger button on mobile */ + .sidebar-nav__toggle { + display: flex; + } + + /* Remove content margin on mobile */ + .site-content, + .site-header, + .site-footer { + margin-left: 0; + } +} diff --git a/wp-content/themes/bitwms-child/templates/sidebar-nav.php b/wp-content/themes/bitwms-child/templates/sidebar-nav.php new file mode 100644 index 0000000..3043fd8 --- /dev/null +++ b/wp-content/themes/bitwms-child/templates/sidebar-nav.php @@ -0,0 +1,150 @@ + 'БИТ.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', + ), +); +?> + + + +