From a3b01cd364c5e6d17a1ddbfc69816f63c07eece7 Mon Sep 17 00:00:00 2001
From: Alisha Evans <alishaevn2@gmail.com>
Date: Tue, 27 Feb 2024 15:19:05 -0600
Subject: [PATCH] contain the logo in the navbar

previously, wide logo's would overflow the width of the Navbar.Brand. this
commit adds height to the brand element, instead of the logo image,
containing the logo height and width within the Navbar.Brand.

there isn't a bootstrap element that sets height to a specific value. the
choice was to use inline styles or create a new class. I opted to create
a new class. it's specific to the Header component so it's not in
globals.scss. the name "custom-navbar-brand" makes it easier to denote
that it's our class and not bootstrap's when inspecting from the browser.

- ref: https://github.com/scientist-softserv/webstore-component-library/issues/209
---
 src/compounds/Header/Header.jsx  | 5 +++--
 src/compounds/Header/styles.scss | 3 +++
 2 files changed, 6 insertions(+), 2 deletions(-)
 create mode 100644 src/compounds/Header/styles.scss

diff --git a/src/compounds/Header/Header.jsx b/src/compounds/Header/Header.jsx
index f468ed6..51b1838 100644
--- a/src/compounds/Header/Header.jsx
+++ b/src/compounds/Header/Header.jsx
@@ -2,6 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Container, Nav, Navbar } from 'react-bootstrap'
 import Logo from '../Logo/Logo'
+import './styles.scss'
 
 const Header = ({ auth, linkColor, logo, navLinks, userSession }) => {
   const { src, alt } = logo
@@ -9,8 +10,8 @@ const Header = ({ auth, linkColor, logo, navLinks, userSession }) => {
   return (
     <Navbar bg='primary' expand='lg'>
       <Container>
-        <Navbar.Brand className='w-50'>
-          <Logo src={src} alt={alt} height={45} />
+        <Navbar.Brand className='w-75 custom-navbar-brand'>
+          <Logo src={src} alt={alt} height='auto' addClass='mw-100 mh-100' />
         </Navbar.Brand>
         <Navbar.Toggle aria-controls='basic-navbar-nav' />
         <Navbar.Collapse id='basic-navbar-nav'>
diff --git a/src/compounds/Header/styles.scss b/src/compounds/Header/styles.scss
new file mode 100644
index 0000000..7b5f2e8
--- /dev/null
+++ b/src/compounds/Header/styles.scss
@@ -0,0 +1,3 @@
+.custom-navbar-brand {
+  height: 45px;
+}