Side Navigationready

Side Navigation Layout

This is the current layout.

    
...

<input type="checkbox" id="side" name="" value="">

...

<div class="page-wrap">

    <div class="sidebar">
      <div class="flex items-start content-start">
        <div class="flex-auto sidebar-menu pr-2">
        <img src="images/webvert-logo-darktheme.svg"  class="pb-4" />
          <ul>
            <li>
              <a href="#" class="text-neutral-content">
              <span>Root Menu</span>
              </a>
            </li>
            <li>
              <div class="text-neutral-content uppercase">
                <span>Header Menu</span>
              </div>
              <ul>
                <li><a href="#" class="text-accent-content font-semibold">Menu 1 - Selected</a></li>
                <li><a href="#" class="text-neutral-content">Menu 2</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="flex-none justify-end">
          <label for="side" class="toggle-side"><svg class="w-6 h-7"  viewBox="0 0 492 492" xmlns="http://www.w3.org/2000/svg"><path d="m198.608 246.104 184.056-184.064c5.068-5.056 7.856-11.816 7.856-19.024 0-7.212-2.788-13.968-7.856-19.032l-16.128-16.12c-5.06-5.072-11.824-7.864-19.032-7.864s-13.964 2.792-19.028 7.864l-219.148 219.144c-5.084 5.08-7.868 11.868-7.848 19.084-.02 7.248 2.76 14.028 7.848 19.112l218.944 218.932c5.064 5.072 11.82 7.864 19.032 7.864 7.208 0 13.964-2.792 19.032-7.864l16.124-16.12c10.492-10.492 10.492-27.572 0-38.06z"/></svg></label>
        </div>
      </div>
    </div>


    <div class="page-content">
    ...
    </div>

</div>