Reused the Navigation menu for footer.

UCF · Jun 13, 2024 · 6576ccf · 6576ccf
1 parent 7e09f0b
commit 6576ccf
Show file tree

Hide file tree

Showing 12 changed files with 78 additions and 17 deletions.
diff --git a/public/img/social-icons/facebook-white.png b/public/img/social-icons/facebook-white.png
diff --git a/public/img/social-icons/instagram-white.png b/public/img/social-icons/instagram-white.png
diff --git a/public/img/social-icons/linkedin-white.png b/public/img/social-icons/linkedin-white.png
diff --git a/public/img/social-icons/social-links-gray.svg b/public/img/social-icons/social-links-gray.svg
diff --git a/public/img/social-icons/social-white.png b/public/img/social-icons/social-white.png
diff --git a/public/img/social-icons/x-white.png b/public/img/social-icons/x-white.png
diff --git a/public/img/social-icons/youtube-white.png b/public/img/social-icons/youtube-white.png
diff --git a/src/App.scss b/src/App.scss
@@ -67,3 +67,68 @@
     }
   }
 }
+
+.ucf-footer-social-link {
+    background-image: url(../img/social-icons/social-links-gray.svg);
+    background-repeat: no-repeat;
+    background-size: 240px 66px;
+    display: none;
+    height: 33px;
+    margin: 0 4px;
+    overflow: hidden;
+    width: 34px
+}
+
+.ucf-footer-social-link[href*=facebook] {
+    background-position: 0 0;
+    display: block
+}
+
+.ucf-footer-social-link[href*=facebook]:active,.ucf-footer-social-link[href*=facebook]:focus,.ucf-footer-social-link[href*=facebook]:hover {
+    background-position: 0 100%
+}
+
+.ucf-footer-social-link[href*=twitter] {
+    background-position: -34px 0;
+    display: block
+}
+
+.ucf-footer-social-link[href*=twitter]:active,.ucf-footer-social-link[href*=twitter]:focus,.ucf-footer-social-link[href*=twitter]:hover {
+    background-position: -34px 100%
+}
+
+.ucf-footer-social-link[href*=youtube] {
+    background-position: -172px 0;
+    display: block
+}
+
+.ucf-footer-social-link[href*=youtube]:active,.ucf-footer-social-link[href*=youtube]:focus,.ucf-footer-social-link[href*=youtube]:hover {
+    background-position: -172px 100%
+}
+
+.ucf-footer-social-link[href*="ucf.edu/social"] {
+    background-position: -69px 0;
+    display: block
+}
+
+.ucf-footer-social-link[href*="ucf.edu/social"]:active,.ucf-footer-social-link[href*="ucf.edu/social"]:focus,.ucf-footer-social-link[href*="ucf.edu/social"]:hover {
+    background-position: -69px 100%
+}
+
+.ucf-footer-social-link[href*=linkedin] {
+    background-position: -138px 0;
+    display: block
+}
+
+.ucf-footer-social-link[href*=linkedin]:active,.ucf-footer-social-link[href*=linkedin]:focus,.ucf-footer-social-link[href*=linkedin]:hover {
+    background-position: -138px 100%
+}
+
+.ucf-footer-social-link[href*=instagram] {
+    background-position: -206px 0;
+    display: block
+}
+
+.ucf-footer-social-link[href*=instagram]:active,.ucf-footer-social-link[href*=instagram]:focus,.ucf-footer-social-link[href*=instagram]:hover {
+    background-position: -206px 100%
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -41,10 +41,10 @@ import { Visibility } from './types/Visibility';
 
 // Data Imports
 import campusData from './assets/campuses.json';
-import SocialMedia from './components/SocialMedia';
 
 const TOKEN = import.meta.env.VITE_MAPBOX_TOKEN;
 const FOOTER_MENU_ID = import.meta.env.VITE_REMOTE_FOOTER_MENU_ID;
+const FOOTER_SOCIAL_ID = import.meta.env.VITE_REMOTE_SOCIAL_LINKS_ID;
 
 function App() {
   const initialLng = -81.200142;
@@ -726,9 +726,15 @@ function App() {
           </div>
 
         <div className='h3 mb-3 mt-0 my-md-0'><a href='#copyright' className='text-white text-decoration-none'>&#65088;</a></div>
+        <NavigationMenu 
+            listClasses='ucf-footer-social mb-2 list-unstyled list-group list-group-horizontal d-flex justify-content-center'
+            listItemClasses='ucf-footer-social-item ms-1'
+            anchorClasses="ucf-footer-social-link"
+            menuId='social-links'
+            remoteMenuId={FOOTER_SOCIAL_ID}
+          /> 
         <div className='ucf-footer-nav'>
-        <SocialMedia />
-
+
           <NavigationMenu
             listItemClasses='nav-item my-2'
             anchorClasses='nav-link text-white py-0'

diff --git a/src/components/NavigationMenu.tsx b/src/components/NavigationMenu.tsx
@@ -31,7 +31,7 @@ export default function NavigationMenu(props: NavigationMenuProps) {
         setLinks(response.items);
       });
   }, []);
-
+  console.log(links);
   return (
     <ul id={menuId} className={listClasses}>
       {links.map((link: RestMenuItem) => {
@@ -40,7 +40,7 @@ export default function NavigationMenu(props: NavigationMenuProps) {
           <a
             className={anchorClasses}
             href={link.url}>
-              {parse(link.title)}
+              { menuId !== 'social-links' && parse(link.title) }
             </a>
         </li>
         );

diff --git a/src/components/SocialMedia.tsx b/src/components/SocialMedia.tsx
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
@@ -4,6 +4,7 @@ interface ImportMetaEnv {
     readonly VITE_REMOTE_MENU_BASE_URL: string
     readonly VITE_REMOTE_HEADER_MENU_ID: number
     readonly VITE_REMOTE_FOOTER_MENU_ID: number
+    readonly VITE_REMOTE_SOCIAL_LINKS_ID: number
 }
 
 interface ImportMeta {