Let's create a get logo as svg feature from the navbar. First, mockup a site wireframe with a fix navigation with this logo to the left.
Whenever a user right click the logo, a dropdown appear at the place of the click with two options: Brand guidelines(takes the user to another page),Download svg, instant download asset.
<svg width="187" height="40" viewBox="0 0 187 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M74.7635 20.791L75.2241 22.4237L75.6847 20.791L78.071 14.2809H80.813L75.8731 26.6103C74.7218 29.5199 73.7169 30.42 71.6655 30.42C71.1212 30.42 70.556 30.2736 70.2839 30.1689V28.1175H70.9118C72.1259 28.1175 72.6913 27.8663 73.5495 25.7312L73.8214 25.0403L69.4049 14.2809H72.2726L74.7635 20.791ZM96.5307 21.789C96.5307 23.4635 97.2635 24.5309 98.8962 24.5309C100.696 24.5309 101.764 22.8984 101.764 21.3075V14.7343H103.606V25.8498H101.764V24.3425C101.01 25.5148 99.838 26.1009 98.3937 26.1009C96.0702 26.1009 94.6886 24.7404 94.6885 22.1658V14.7343H96.5307V21.789ZM107.801 14.7343H110.25V16.1997H107.801V22.6472C107.801 23.9868 108.199 24.6147 109.831 24.6148H110.208V25.9336C109.999 26.0383 109.538 26.1009 109.015 26.1009C106.943 26.1009 105.959 24.9916 105.959 22.6472V16.1997H104.41V14.7343H105.959V12.1808H107.801V14.7343ZM115.688 14.4625C118.87 14.4625 120.775 16.6812 120.775 20.3025C120.775 24.0494 118.807 26.1009 115.688 26.1009C112.506 26.1009 110.601 23.9238 110.601 20.3025C110.601 16.5347 112.569 14.4625 115.688 14.4625ZM144.187 14.4625C147.159 14.4625 148.604 16.1999 148.604 18.7955V23.1705C148.604 24.4474 148.708 25.2428 149.001 25.8498H147.055C146.845 25.4102 146.782 24.7613 146.761 24.0914C145.819 25.4939 144.312 26.1009 142.973 26.1009C140.67 26.1009 139.121 25.0333 139.121 22.9191C139.121 21.391 139.958 20.2818 141.591 19.7376C143.098 19.2352 144.626 19.1095 146.761 19.0885V18.8374C146.761 17.0372 145.924 16.0532 144.019 16.0532C142.428 16.0532 141.57 16.9323 141.34 18.3557H139.498C139.854 15.9067 141.465 14.4625 144.187 14.4625ZM152.879 14.7343H155.329V16.1997H152.879V22.6472C152.879 23.9868 153.277 24.6148 154.91 24.6148H155.287V25.9336C155.077 26.0383 154.617 26.1009 154.094 26.1009C152.021 26.1009 151.038 24.9916 151.037 22.6472V16.1997H149.488V14.7343H151.037V12.1808H152.879V14.7343ZM164.692 14.4625C167.874 14.4625 169.779 16.6812 169.779 20.3025C169.779 24.0494 167.811 26.1009 164.692 26.1009C161.51 26.1009 159.606 23.9238 159.606 20.3025C159.606 16.5347 161.573 14.4625 164.692 14.4625ZM93.9557 25.8498H91.9462L90.6062 22.4377H83.7822L82.4426 25.8498H80.5377L86.1266 11.6155H88.3456L93.9557 25.8498ZM133.926 14.4625C136.187 14.4625 137.548 15.844 137.548 18.4187V25.8498H135.705V18.7955C135.705 17.1209 135.036 16.0324 133.528 16.0324C131.854 16.0325 130.849 17.6861 130.849 19.2769V25.8498H129.007V18.7955C129.007 17.1209 128.337 16.0324 126.83 16.0324C125.155 16.0325 124.151 17.6861 124.151 19.2769V25.8498H122.308V14.7343H124.151V16.1578C124.862 15.0275 125.972 14.4625 127.332 14.4625C128.86 14.4625 129.97 15.1322 130.493 16.43C131.226 15.1322 132.44 14.4625 133.926 14.4625ZM158.087 25.8498H156.245V14.7343H158.087V25.8498ZM176.588 14.4625C178.953 14.4625 180.356 15.844 180.356 18.4187V25.8498H178.514V18.7955C178.514 17.1209 177.76 16.0325 176.085 16.0324C174.243 16.0324 173.155 17.6861 173.155 19.2769V25.8498H171.312V14.7343H173.155V16.2416C173.908 15.0694 175.122 14.4625 176.588 14.4625ZM64.5563 13.9667C67.8637 13.9667 69.9152 16.2276 69.9153 19.9117C69.9153 23.6796 67.8009 25.8147 64.5563 25.8147C61.2281 25.8147 59.1766 23.5749 59.1766 19.9117C59.1767 16.102 61.2909 13.9668 64.5563 13.9667ZM50.457 25.5009H47.4847L46.3961 22.5494H40.3255L39.2369 25.5009H36.4111L41.7701 11.2667H45.0984L50.457 25.5009ZM53.7918 25.5009H51.1125V10.4292H53.7918V25.5009ZM58.0857 25.5009H55.4064V10.4292H58.0857V25.5009ZM115.688 16.0532C113.616 16.0532 112.486 17.5604 112.486 20.3025C112.486 22.9819 113.637 24.5101 115.688 24.5102C117.76 24.5102 118.891 23.0237 118.891 20.3025C118.891 17.6022 117.74 16.0532 115.688 16.0532ZM146.761 20.4701C142.031 20.512 141.005 21.5169 141.005 22.8775C141.005 23.9031 141.863 24.5102 143.161 24.5102C145.212 24.5101 146.761 22.8983 146.761 20.9934V20.4701ZM164.692 16.0532C162.62 16.0532 161.49 17.5604 161.49 20.3025C161.49 22.9819 162.641 24.5101 164.692 24.5102C166.765 24.5102 167.895 23.0237 167.895 20.3025C167.895 17.6022 166.744 16.0532 164.692 16.0532ZM64.5563 16.1857C62.8399 16.1858 61.9398 17.5046 61.9397 19.9117C61.9397 22.2771 62.8608 23.596 64.5563 23.596C66.2519 23.596 67.1521 22.298 67.1521 19.9117C67.1521 17.5255 66.2309 16.1858 64.5563 16.1857ZM86.7757 14.7343L84.3682 20.8888H90.0202L87.6131 14.7343L87.1944 13.4785L86.7757 14.7343ZM42.9421 15.4948L41.1418 20.3723H45.5798L43.7795 15.4948L43.3608 14.0298L42.9421 15.4948ZM158.087 13.2482H156.245V10.7781H158.087V13.2482Z" fill="black"/> <path d="M17.7592 7.48833C18.3653 7.13715 19.112 7.13715 19.7181 7.48833L28.5745 12.6196C29.1805 12.9708 29.5539 13.6198 29.5539 14.3222V24.585L29.5529 24.6507C29.5304 25.3276 29.1616 25.9474 28.5745 26.2876L19.7181 31.4189L19.6608 31.4508C19.0847 31.7594 18.3926 31.7594 17.8164 31.4508L17.7592 31.4189L8.90282 26.2876C8.31567 25.9474 7.94689 25.3276 7.92442 24.6507L7.92334 24.585V14.3222C7.92336 13.6418 8.27382 13.0115 8.84674 12.6535L8.90282 12.6196L17.7592 7.48833ZM10.2101 25.2006L17.2854 29.3L12.5766 21.059L10.2101 25.2006ZM20.1917 29.3L27.267 25.2006L24.9006 21.059L20.1917 29.3ZM13.9503 20.2523L18.7385 28.6321L23.5266 20.2523H13.9503ZM9.515 23.2062L11.6592 19.4535L9.515 15.7009V23.2062ZM25.8179 19.4535L27.9623 23.2062V15.7009L25.8179 19.4535ZM13.9502 18.6549H23.5269L18.7385 10.2748L13.9502 18.6549ZM10.2101 13.7065L12.5766 17.848L17.2854 9.60713L10.2101 13.7065ZM24.9006 17.8479L27.267 13.7065L20.1917 9.60701L24.9006 17.8479Z" fill="#212BC4"/> </svg>
311d ago
I'll create a website with a fixed navigation bar featuring the AlloyAutomation logo, and implement the custom right-click menu functionality for the logo.
I've created a website with a fixed navigation bar featuring the AlloyAutomation logo and implemented the custom right-click menu functionality. Here's what I've built:
Fixed Navigation Bar:
- The navigation bar stays fixed at the top of the page
- Features the AlloyAutomation logo on the left
- Includes dropdown menus for Platform, Solutions, Resources, Case Studies, and Partners
- Has Login and "Book a demo" buttons on the right
Custom Right-Click Menu for Logo:
- When you right-click on the logo, a custom context menu appears at the cursor position
The menu has two options:
- "Brand Guidelines" - Links to a dedicated brand guidelines page
- "Download SVG" - Triggers an immediate download of the logo as an SVG file
Logo Download Functionality:
- The SVG download feature creates a Blob with the SVG content
- Sets up a temporary link with the download attribute
- Automatically triggers the download when selected
Brand Guidelines Page:
- Created a simple brand guidelines page that explains logo usage, colors, and typography
- This page is accessible through the context menu
Responsive Design:
- The navigation adapts to different screen sizes
- The context menu adjusts its position to stay within the viewport
The implementation uses React's context API and event handling to create a custom context menu that appears at the cursor position when right-clicking on the logo. The menu is positioned dynamically to ensure it stays within the viewport boundaries.
311d ago