Shopping Cart Feature

Problem/Feature Description

An online bookstore is building a Vue 3 shopping cart feature. The cart needs to be accessible from multiple places in the app: the navigation bar shows the number of items, a sidebar panel shows the full cart contents, and a checkout page reads the cart total. Currently, each component has its own local copy of the cart data and they drift out of sync — adding a book in the sidebar doesn't update the badge in the nav bar until page refresh.

The team wants to centralize cart state so all components stay in sync automatically. The cart should track an array of items (each item has id, title, author, price, and quantity), expose the total item count and total price as derived values, and support adding, removing, and clearing items. When the cart is cleared, the user should see a confirmation toast notification. The navigation bar also needs to handle a case where users who are not logged in attempt to proceed to checkout — they should be redirected to /login automatically when that condition is detected, without the checkout button's click handler doing the redirect itself.

Output Specification

Produce the following files:

• A Pinia state module for the cart, including all cart state, derived values, and actions. The module should handle the side effects (toast on clear, redirect on unauthenticated checkout attempt) reactively.
• src/components/NavBar.vue — displays the item count badge and has a "Checkout" button. Uses the cart store for data.
• src/components/CartSidebar.vue — shows the full list of cart items with title, author, price, and quantity; has remove buttons per item; has a "Clear cart" button. Uses the cart store.

The NavBar.vue component also needs a local UI toggle for showing/hiding the cart sidebar — keep that state local to the component, not in the shared store.

Use TypeScript throughout.