feat(ui): add toggle button to show or hide sidebar

[suryastef]

feat(ui): add toggle button to show or hide sidebar

What's new

• Implement sidebar toggle functionality with button positioned on the left side of the note title header
• Add JavaScript state and function to track and toggle sidebar visibility
• Use intuitive arrow icons: left-pointing arrow (<) to hide sidebar when visible, right-pointing arrow (>) to show sidebar when hidden
• Persist sidebar state across sessions using localStorage
• Update CSS to properly handle hiding/showing the sidebar and resize handle

Files Changed

frontend/app.js

• Added sidebarHidden state variable to track sidebar visibility
• Added loadSidebarHiddenState() method to restore sidebar state from localStorage on app initialization
• Added toggleSidebar() method to switch the sidebar state and persist it to localStorage
• Integrated loadSidebarHiddenState() into the initialization flow
• Added logic in toggle function to restore proper width when showing sidebar

frontend/index.html

• Added a toggle button in the toolbar section on the left side of the note title header
• Implemented conditional rendering: left-pointing arrow (<) when sidebar is visible to hide it, right-pointing arrow (>) when sidebar is hidden to show it
• Updated CSS classes to handle sidebar visibility state (:class="{'sidebar-hidden': sidebarHidden}")
• Added dynamic width calculation based on sidebar state
• Added class to hide resize handle when sidebar is hidden (:class="{'sidebar-resize-handle-hidden': sidebarHidden}")
• Added CSS styles for .sidebar-hidden and .sidebar-resize-handle-hidden classes