Add external url icons to Navbar

Team5599 · Nov 11, 2023 · d08b3a4 · d08b3a4
1 parent a3eaf3c
commit d08b3a4
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git a/app/components/Navbar/Navbar.jsx b/app/components/Navbar/Navbar.jsx
@@ -14,11 +14,19 @@ import useWindowDimensions from '@lib/useWindowDimensions';
 import ChevronSVG from './chevron-svg';
 import useScrollPosition from '@/lib/useScrollPosition';
 
-const NavbarButton = ({label, href = '/404', target='', className = [], handleHover}) => {
+const NavbarButton = ({label, href = '/404', target='', className = [], handleHover, hideExternalIcon = false}) => {
     return (
         <li className={`${styles.navbarButton} ${className}`} navbar-button={label} onMouseEnter={handleHover}>     
             <Link className={styles.navbarButtonInternal} href={href} target={target}>
                 <span>{label}</span>
+                {
+                    (href.startsWith('http') && hideExternalIcon == false) && <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-external-link" width="14" height="14" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                        <path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path>
+                        <path d="M11 13l9 -9"></path>
+                        <path d="M15 4h5v5"></path>
+                    </svg>
+                }
             </Link>
         </li>
     )
@@ -244,7 +252,7 @@ const Navbar = () => {
                             </>
                         }
                     />
-                    <NavbarButton label={'Blog'} href='https://blog.team5599.com/' target='_blank' handleHover={handleNavbarItemMouseEnter}/>
+                    <NavbarButton label={'Blog'} href='https://blog.team5599.com/' target='_blank' handleHover={handleNavbarItemMouseEnter} hideExternalIcon={true} />
                     <NavbarButtonDropdown
                         label={'Members'}
                         ignoreChevron={true}

diff --git a/app/components/Navbar/navbar.module.css b/app/components/Navbar/navbar.module.css
@@ -133,11 +133,24 @@
 
 .navbarDropdownColumn > li.navbarButton > .navbarButtonInternal {
     flex : 1;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     padding-left: 20px;
     padding-right: 20px;
     padding-top: 8px;
     padding-bottom: 8px;
     width: 100%;
+    gap : 20px;
+}
+
+.navbarDropdownColumn > li.navbarButton > .navbarButtonInternal > svg {
+    opacity: 0;
+    transition: opacity 0.2s;
+}
+
+.navbarDropdownColumn > li.navbarButton:hover > .navbarButtonInternal > svg {
+    opacity: 0.4;
 }
 
 .navbarButtonInternal > svg {
@@ -197,7 +210,8 @@
 
 .navbarButtonsWrapper > li.navbarButton.navbarButtonTeam > .navbarDropdown > .navbarDropdownColumn > li.navbarButton {
     /* padding-left: 16px; */
-    width: 160px;
+    width: 100%;
+    min-width: 160px;
 }
 
 
@@ -297,7 +311,7 @@
         width: 100%;
         padding-top: 8px;
         padding-bottom: 8px;
-        justify-content: flex-start;
+        justify-content: space-between;
         padding-left: 40px !important;
         flex-wrap: wrap;
     }