Feature: Shopping cart slide-out drawer

<html>
<body>
<html><head></head><body><h1>Feature: Shopping cart slide-out drawer</h1><p><strong>Type:</strong> Feature / UX<br><strong>Track:</strong> Frontend (React)<br><strong>Priority:</strong> High<br><strong>Difficulty:</strong> Intermediate</p><h2>Problem statement</h2><p>Currently, clicking <strong>Add to Cart</strong> only updates the cart counter in the Navbar. Users have no quick way to review the contents of their cart without navigating to a separate page, creating unnecessary friction during the shopping experience.</p><p>A slide-out cart drawer provides a faster and more intuitive shopping flow by allowing users to review, modify, and proceed to checkout without leaving the current page.</p><h2>Description</h2><p>Implement a <strong>slide-out Cart Drawer</strong> that opens from the right side of the screen when the user clicks the cart icon in the Navbar.</p><p>The drawer should display:</p><ul><li><p>Book thumbnail</p></li><li><p>Book title</p></li><li><p>Price</p></li><li><p>Quantity controls</p></li><li><p>Remove item button</p></li></ul><p>At the bottom of the drawer, display a dynamically calculated <strong>subtotal</strong> and a prominent <strong>Proceed to Checkout</strong> button.</p><p>The drawer should be dismissible via:</p><ul><li><p>Backdrop click</p></li><li><p>Close (X) button</p></li><li><p>Escape key (recommended for accessibility)</p></li></ul><blockquote><p><strong>Important:</strong> Keep this Pull Request focused solely on implementing the Cart Drawer UI and interactions. Avoid implementing payment processing or backend checkout functionality.</p></blockquote><h2>Objective</h2><p>Create a responsive, accessible, and reusable slide-out cart drawer that allows users to manage their cart without leaving the current page.</p><h2>Scope</h2><p>The implementation should include:</p><ul><li><p>Slide-out drawer</p></li><li><p>Cart item list</p></li><li><p>Quantity controls</p></li><li><p>Remove functionality</p></li><li><p>Dynamic subtotal</p></li><li><p>Checkout button</p></li><li><p>Backdrop overlay</p></li><li><p>Close interactions</p></li><li><p>Responsive design</p></li><li><p>Accessibility improvements</p></li></ul><h2>Functional requirements</h2><h3>Open drawer</h3><p>Clicking the cart icon in the Navbar should:</p><ul><li><p>Open the drawer</p></li><li><p>Display the current cart contents</p></li><li><p>Prevent background scrolling while open</p></li></ul><h3>Cart item display</h3><p>Each cart item should show:</p><ul><li><p>Book cover thumbnail</p></li><li><p>Book title</p></li><li><p>Price</p></li><li><p>Quantity</p></li><li><p>Quantity increase button</p></li><li><p>Quantity decrease button</p></li><li><p>Remove item button</p></li></ul><p>Example:</p><pre><code class="language-text">--------------------------------

Cart

--------------------------------

[IMG] Atomic Habits

$14.99

[-] 2 [+]

Remove

--------------------------------

[IMG] Deep Work

$18.50

[-] 1 [+]

Remove

--------------------------------
</code></pre><h3>Quantity controls</h3><p>Users should be able to:</p><ul><li><p>Increase quantity</p></li><li><p>Decrease quantity</p></li><li><p>Remove items completely</p></li></ul><p>Behavior:</p><ul><li><p>Quantity cannot go below 1</p></li><li><p>Removing deletes the item from the cart</p></li><li><p>Navbar cart counter updates immediately</p></li><li><p>Subtotal updates automatically</p></li></ul><h3>Subtotal</h3><p>Display:</p><pre><code class="language-text">Subtotal

$48.48
</code></pre><p>The subtotal should update whenever:</p><ul><li><p>Items are added</p></li><li><p>Items are removed</p></li><li><p>Quantities change</p></li></ul><h3>Checkout button</h3><p>Display a primary action button:</p><pre><code class="language-text">Proceed to Checkout
</code></pre><p>Clicking the button should navigate to:</p><pre><code class="language-text">/checkout
</code></pre><h3>Empty cart state</h3><p>When the cart is empty:</p><pre><code class="language-text">🛍️

Your cart is empty

Browse our collection and add your favorite books.

[ Start Shopping ]
</code></pre><p>Hide subtotal and checkout controls when the cart is empty.</p><h2>Technical requirements</h2><ul><li><p>Use React functional components.</p></li><li><p>Reuse existing cart state.</p></li><li><p>Keep the drawer reusable.</p></li><li><p>Support smooth animations.</p></li><li><p>Maintain accessibility best practices.</p></li></ul><h2>Required file changes</h2><h3>Existing files to modify</h3>
File | Folder | Purpose
-- | -- | --
Navbar.jsx | bookshelf-frontend/src/components/ | Open/close drawer
Navbar.css | bookshelf-frontend/src/components/ | Cart icon interaction

<h2>Project structure impact</h2><pre><code class="language-text">bookshelf-frontend/
└── src/
    ├── components/
    │   ├── Navbar.jsx
    │   ├── CartDrawer.jsx
    │   └── CartDrawer.css
    └── ...
</code></pre><p>Minimal architectural impact.</p><h2>Implementation details</h2><h3>Drawer animation</h3><p>Behavior:</p><pre><code class="language-text">Closed

----------------

→

Open

        ------------------

        Cart

        Items

        Subtotal

        Checkout

        ------------------
</code></pre><p>Use CSS transitions for:</p><ul><li><p>Slide-in</p></li><li><p>Slide-out</p></li><li><p>Backdrop fade</p></li></ul><h3>State management</h3><p>Suggested state:</p><pre><code class="language-javascript">const [isCartOpen, setIsCartOpen] = useState(false);
</code></pre><p>The Navbar controls opening.</p><p>The CartDrawer receives:</p><pre><code class="language-jsx">&lt;CartDrawer
  isOpen={isCartOpen}
  onClose={handleClose}
/&gt;
</code></pre><h3>Backdrop</h3><p>When open:</p><ul><li><p>Display a semi-transparent overlay.</p></li><li><p>Clicking the backdrop closes the drawer.</p></li></ul><h3>Accessibility</h3><p>Support:</p><ul><li><p>Escape key to close</p></li><li><p>Focus trap inside the drawer (recommended)</p></li><li><p><code inline="">aria-label</code> on close button</p></li><li><p><code inline="">role="dialog"</code></p></li><li><p><code inline="">aria-modal="true"</code></p></li></ul><h2>Components affected</h2><h3>Frontend</h3><ul><li><p>Navbar</p></li><li><p>Cart state</p></li><li><p>CartDrawer</p></li><li><p>Checkout navigation</p></li></ul><h2>Dependencies</h2><p>None required.</p><p>Reuse:</p><ul><li><p>Existing cart context/state</p></li><li><p>Existing routing</p></li><li><p>Existing book data</p></li></ul><h2>Edge cases</h2><ul><li><p>Empty cart</p></li><li><p>Single item</p></li><li><p>Large quantities</p></li><li><p>Long book titles</p></li><li><p>Rapid quantity updates</p></li><li><p>Removing the last item</p></li><li><p>Drawer already open</p></li><li><p>Mobile screen sizes</p></li></ul><h2>Acceptance criteria</h2><ul><li><p>Clicking the Navbar cart icon opens the drawer.</p></li><li><p>Drawer slides in smoothly.</p></li><li><p>Cart items display correctly.</p></li><li><p>Quantity controls work.</p></li><li><p>Remove item works.</p></li><li><p>Subtotal updates dynamically.</p></li><li><p>Checkout button navigates to <code inline="">/checkout</code>.</p></li><li><p>Clicking outside closes the drawer.</p></li><li><p>Clicking the X button closes the drawer.</p></li><li><p>Empty cart state displays correctly.</p></li><li><p>Existing cart functionality remains unchanged.</p></li></ul><h2>Testing requirements</h2><h3>Manual testing</h3><h4>Open / close</h4><ul><li><p>Open the drawer.</p></li><li><p>Close with X.</p></li><li><p>Close with backdrop.</p></li><li><p>Close with Escape.</p></li></ul><h4>Quantity</h4><ul><li><p>Increase quantity.</p></li><li><p>Decrease quantity.</p></li><li><p>Verify subtotal updates.</p></li></ul><h4>Remove</h4><ul><li><p>Remove one item.</p></li><li><p>Remove all items.</p></li><li><p>Verify empty state appears.</p></li></ul><h4>Checkout</h4><ul><li><p>Click Proceed to Checkout.</p></li><li><p>Verify navigation.</p></li></ul><h4>Responsive</h4><ul><li><p>Test desktop.</p></li><li><p>Test tablet.</p></li><li><p>Test mobile.</p></li></ul><h4>Accessibility</h4><ul><li><p>Tab through controls.</p></li><li><p>Verify keyboard navigation.</p></li><li><p>Verify focus behavior.</p></li></ul><h4>Regression</h4><ul><li><p>Add to Cart continues working.</p></li><li><p>Navbar counter remains correct.</p></li><li><p>Existing navigation remains unchanged.</p></li><li><p>Existing tests continue to pass.</p></li></ul><h2>Breaking changes</h2><p><strong>No</strong></p><p>The drawer extends the cart experience without changing existing cart behavior.</p><h2>Performance impact</h2><p>Minimal.</p><ul><li><p>Lightweight conditional rendering</p></li><li><p>CSS-based animations</p></li><li><p>Reuse existing cart state</p></li></ul><h2>Security considerations</h2><p>None.</p><p>The drawer only displays existing client-side cart data.</p><h2>Benefits</h2><ul><li><p>Faster cart access.</p></li><li><p>Reduced navigation friction.</p></li><li><p>Improved shopping experience.</p></li><li><p>Better mobile usability.</p></li><li><p>Increased checkout conversion potential.</p></li><li><p>Reusable drawer infrastructure for future features.</p></li></ul><h2>Definition of done</h2><ul><li><p>CartDrawer component implemented.</p></li><li><p>Slide-out animation completed.</p></li><li><p>Cart items rendered.</p></li><li><p>Quantity controls implemented.</p></li><li><p>Remove functionality implemented.</p></li><li><p>Dynamic subtotal implemented.</p></li><li><p>Checkout navigation implemented.</p></li><li><p>Backdrop close implemented.</p></li><li><p>X button close implemented.</p></li><li><p>Responsive styling completed.</p></li><li><p>Manual testing completed.</p></li><li><p>Existing functionality preserved.</p></li><li><p>Code follows project standards.</p></li></ul><h2>Suggested branch name</h2><pre><code class="language-text">feature/cart-slideout-drawer
</code></pre><h2>Labels</h2><pre><code class="language-text">feature
frontend
react
cart
drawer
checkout
ui
ux
accessibility
intermediate
</code></pre></body></html>
</body>
</html>

File	Folder	Purpose
Navbar.jsx	bookshelf-frontend/src/components/	Open/close drawer
Navbar.css	bookshelf-frontend/src/components/	Cart icon interaction

Feature: Shopping cart slide-out drawer #162

Description

Feature: Shopping cart slide-out drawer

Problem statement

Description

Objective

Scope

Functional requirements

Open drawer

Cart item display

Quantity controls

Subtotal

Checkout button

Empty cart state

Technical requirements

Required file changes

Existing files to modify

Project structure impact

Implementation details

Drawer animation

State management

Backdrop

Accessibility

Components affected

Frontend

Dependencies

Edge cases

Acceptance criteria

Testing requirements

Manual testing

Open / close

Quantity

Remove

Checkout

Responsive

Accessibility

Regression

Breaking changes

Performance impact

Security considerations

Benefits

Definition of done

Suggested branch name

Labels

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions