Expand logo to fill in the horizontal space in the sidebar menu

yamyr commented 1 day ago

Expand logo space to fill up the space on top of the sidebar menu,
replace logo with the attached logo_collapsed.png when sidebar is collapsed for mobile version

use-tusk[bot] commented 1 day ago

I have investigated the issue and determined the following advice:

Based on the provided information and task requirements, here are the detailed coding instructions to expand the logo to fill in the horizontal space in the sidebar menu:

General Notes

The task involves modifying the logo in the sidebar menu to expand and fill the horizontal space. We need to update the logo container and image styles in the navigation.html file and adjust the JavaScript handling of the sidebar collapse state in the default.html layout file.

File: _includes/navigation.html

Update the logo container and image styles to expand the logo horizontally while maintaining compatibility with the existing sidebar functionality.

Locate the logo container within the sidebar (near the top of the file) and replace it with the following code:

<div class="p-5 border-b border-gray-700 flex-shrink-0 flex flex-row items-center justify-between">
  <a href="/" class="flex items-center w-full justify-center">
    <img src="{{ "assets/images/logo.png" | relative_url }}" class="w-full max-w-[200px] transition-all duration-300" alt="Yanok AI Logo" id="sidebar-logo">
  </a>
  <button id="sidebar-toggle" class="bg-blue-500 p-2 rounded-full md:hidden ml-2">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
    </svg>
  </button>
</div>

This update includes the following changes:

The outer <div> now uses flex-row and justify-between to align items horizontally and distribute space between the logo and toggle button.
The <a> tag uses the full width (w-full) and centers its contents (justify-center) to allow the logo to expand.
The <img> tag is set to expand to fill the available space (w-full) while maintaining a maximum width (max-w-[200px]) to prevent excessive stretching.
Added transition-all duration-300 to the image for smooth resizing when the sidebar state changes.
Added an id="sidebar-logo" to the image for easy JavaScript selection and manipulation.

File: _layouts/default.html

Update the JavaScript handling of the sidebar collapse state to properly resize the logo when the sidebar is collapsed or expanded.

Locate the collapseSidebar function and replace it with the following code:

function collapseSidebar() {
  sidebar.classList.toggle('w-64');
  sidebar.classList.toggle('w-16');
  contentWrapper.classList.toggle('md:ml-64');
  contentWrapper.classList.toggle('md:ml-16');

  const sidebarContent = document.querySelectorAll('#sidebar > *:not(:first-child, :last-child)');
  sidebarContent.forEach(el => el.classList.toggle('hidden'));

  sidebarCollapse.querySelector('svg').classList.toggle('rotate-180');

  sidebar.classList.toggle('overflow-y-auto');
  sidebar.classList.toggle('overflow-hidden');

  // Update logo resizing
  const logo = sidebar.querySelector('#sidebar-logo');
  if (sidebar.classList.contains('w-16')) {
    logo.classList.remove('w-full', 'max-w-[200px]');
    logo.classList.add('w-8', 'h-8');
  } else {
    logo.classList.add('w-full', 'max-w-[200px]');
    logo.classList.remove('w-8', 'h-8');
  }

  saveMenuState();
}

This updated function now includes logo resizing logic:

When the sidebar is collapsed (w-16), the logo is set to a fixed small size (w-8, h-8).
When the sidebar is expanded, the logo returns to its full-width state with a maximum width.

Update the loadMenuState function by adding the following code at the end of the function:

const logo = sidebar.querySelector('#sidebar-logo');
if (state.isCollapsed) {
  logo.classList.remove('w-full', 'max-w-[200px]');
  logo.classList.add('w-8', 'h-8');
} else {
  logo.classList.add('w-full', 'max-w-[200px]');
  logo.classList.remove('w-8', 'h-8');
}

This addition ensures that the logo state is correctly set when the page is loaded, based on the saved sidebar state.

These changes will allow the logo to expand and fill the horizontal space in the sidebar menu, while also providing appropriate resizing behavior when the sidebar is collapsed or expanded. The transitions added to the logo will ensure smooth visual changes during these state changes.

After implementing these changes, thoroughly test the sidebar functionality, including:

Expanding and collapsing the sidebar
Refreshing the page in both expanded and collapsed states
Testing on different screen sizes to ensure responsive behavior
Verifying that the logo resizes smoothly and appropriately in all states

See activity logs for more info.

use-tusk[bot] commented 7 hours ago

I'm working on this issue. Will comment once I have an update.

See activity logs for more info.

use-tusk[bot] commented 7 hours ago

I created a pull request for this issue. 🧑‍💻

Please approve and merge the PR once you've verified that the changes work. If there are nits, leave a "Request Changes" review for me. Otherwise, checkout the branch to make changes.

yanok-stage / www.yanok.ai