mirror of
https://github.com/audacity/audacity.github.io.git
synced 2026-06-07 08:35:53 -05:00
feat(nav): update to dark navbar, new logo, restructured links
- Swap AudacityIconSVG to the 2025 logo (paths drop hardcoded fills so the existing fill-accent class on consumers continues to recolor it). - Move the navbar onto the dark background, left-align logo + links, drop the "by muse group" subtext. - Update link list to: Downloads, Features, FAQ, Plugins, Blog, Help, Forum (drops Merch, adds Plugins + Blog, reorders Features). - "Audacity Cloud saving" -> "Try Audacity Cloud" (same /cloud-saving destination). - SignUpButton becomes a 36px outlined pill (white border, transparent fill, inverts on hover). - Keeps the 56px nav height. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Mudskipper
7
public/Audacity_logo_2025.svg
Normal file
7
public/Audacity_logo_2025.svg
Normal file
@@ -0,0 +1,7 @@
|
||||
<svg width="41" height="42" viewBox="0 0 41 42" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M40.8398 31.0351C40.8398 36.0694 36.6929 40.1506 31.5775 40.1506C26.462 40.1506 22.3151 36.0694 22.3151 31.0351C22.3151 26.0008 26.462 21.9197 31.5775 21.9197C36.6929 21.9197 40.8398 26.0008 40.8398 31.0351Z" fill="#DF135F"/>
|
||||
<path d="M20.5988 0C12.2072 0 5.40448 6.91542 5.40447 15.4459C5.40447 16.6978 5.5512 18.3459 5.82772 19.5114H6.47867C6.36034 18.7908 6.29825 17.6167 6.29825 16.8574C6.29826 10.1671 11.1002 4.74345 17.0236 4.74341C22.9471 4.74341 27.749 10.167 27.749 16.8574C27.749 17.4931 27.7056 18.7642 27.622 19.3735H35.4494C35.6744 18.3161 35.7931 16.5718 35.7931 15.4459C35.793 6.91543 28.9903 1.11945e-05 20.5988 0Z" fill="#DF135F"/>
|
||||
<path d="M0.160156 31.0351C0.160156 36.1359 4.21692 40.2709 9.22119 40.2709V21.7994C4.21692 21.7994 0.160156 25.9344 0.160156 31.0351Z" fill="#DF135F"/>
|
||||
<path d="M17.5656 20.097L20.9333 31.0351L17.5656 41.92L14.3963 31.0351L17.5656 20.097Z" fill="#DF135F"/>
|
||||
<path d="M12.8008 25.1754L14.5892 31.0351L12.8008 36.9742L10.6263 31.0351L12.8008 25.1754Z" fill="#DF135F"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -1,15 +1,14 @@
|
||||
const AudacityIconSVG = ({ className = "h-6 fill-accent" }) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 624 704"
|
||||
viewBox="0 0 41 42"
|
||||
className={className}
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M72.399 360h-2.137C52.109 333.582 40 290.104 40 251.667 40 110.626 138.44 0 305.875 0s276 114.668 278.041 260.783c.959 46.269-6.318 94.343-20.085 134.703C600.708 427.747 624 475.153 624 528c0 97.202-78.798 176-176 176s-176-78.798-176-176c0-94.296 74.156-171.271 167.332-175.79 12.606-25.427 19.751-55.942 19.751-87.346 0-112.627-82.192-193.809-198.881-193.809S61.321 161.352 61.321 274c0 28.323 3.012 59.66 11.078 86.001M0 528c0 97.202 78.798 176 176 176V352C78.798 352 0 430.798 0 528"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
<path d="M40.8398 31.0351C40.8398 36.0694 36.6929 40.1506 31.5775 40.1506C26.462 40.1506 22.3151 36.0694 22.3151 31.0351C22.3151 26.0008 26.462 21.9197 31.5775 21.9197C36.6929 21.9197 40.8398 26.0008 40.8398 31.0351Z" />
|
||||
<path d="M20.5988 0C12.2072 0 5.40448 6.91542 5.40447 15.4459C5.40447 16.6978 5.5512 18.3459 5.82772 19.5114H6.47867C6.36034 18.7908 6.29825 17.6167 6.29825 16.8574C6.29826 10.1671 11.1002 4.74345 17.0236 4.74341C22.9471 4.74341 27.749 10.167 27.749 16.8574C27.749 17.4931 27.7056 18.7642 27.622 19.3735H35.4494C35.6744 18.3161 35.7931 16.5718 35.7931 15.4459C35.793 6.91543 28.9903 1.11945e-05 20.5988 0Z" />
|
||||
<path d="M0.160156 31.0351C0.160156 36.1359 4.21692 40.2709 9.22119 40.2709V21.7994C4.21692 21.7994 0.160156 25.9344 0.160156 31.0351Z" />
|
||||
<path d="M17.5656 20.097L20.9333 31.0351L17.5656 41.92L14.3963 31.0351L17.5656 20.097Z" />
|
||||
<path d="M12.8008 25.1754L14.5892 31.0351L12.8008 36.9742L10.6263 31.0351L12.8008 25.1754Z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
|
||||
@@ -16,23 +16,16 @@ function NavigationReact(props) {
|
||||
|
||||
const navLinks = [
|
||||
{ href: "/download", linkText: "Downloads", target: "" },
|
||||
{ href: "/features/", linkText: "Features", target: "" },
|
||||
{ href: "/FAQ", linkText: "FAQ", target: "" },
|
||||
{ href: "/plugins", linkText: "Plugins", target: "" },
|
||||
{ href: "/blog", linkText: "Blog", target: "" },
|
||||
{
|
||||
href: "https://support.audacityteam.org",
|
||||
linkText: "Help",
|
||||
target: "_blank",
|
||||
},
|
||||
{ href: "/help", linkText: "Help", target: "" },
|
||||
{
|
||||
href: "https://forum.audacityteam.org/",
|
||||
linkText: "Forum",
|
||||
target: "_blank",
|
||||
},
|
||||
{
|
||||
href: "https://merch.audacityteam.org/",
|
||||
linkText: "Merch",
|
||||
target: "_blank",
|
||||
},
|
||||
];
|
||||
|
||||
function handleHamburgerMenuClick() {
|
||||
@@ -40,15 +33,16 @@ function NavigationReact(props) {
|
||||
}
|
||||
|
||||
function renderNavLink(navLink, index) {
|
||||
const isActive = getUrlPath(currentURL) === navLink.href;
|
||||
return (
|
||||
<a
|
||||
href={navLink.href}
|
||||
target={navLink.target}
|
||||
key={index}
|
||||
className={
|
||||
getUrlPath(currentURL) === navLink.href
|
||||
isActive
|
||||
? "font-muse-sans text-16 text-accent"
|
||||
: "font-muse-sans text-16 text-text-primary hover:text-accent"
|
||||
: "font-muse-sans text-16 text-text-contrast hover:text-accent transition-colors"
|
||||
}
|
||||
>
|
||||
{navLink.linkText}
|
||||
@@ -68,37 +62,35 @@ function NavigationReact(props) {
|
||||
}
|
||||
|
||||
return (
|
||||
<nav className="border-b-2 z-3 filter bg-white bg-opacity-90 backdrop-blur-xl">
|
||||
<div className="flex h-14 items-center max-w-screen-2xl mx-auto px-4 md:px-6">
|
||||
<div className="flex-1">
|
||||
<a className="flex w-fit items-center gap-2" href="/">
|
||||
<AudacityIconSVG className="h-5 fill-text-primary" />
|
||||
<AudacityWordmarkSVG className="h-5 fill-text-primary" />
|
||||
<span className="font-muse-sans text-14 text-black opacity-80">by muse group</span>
|
||||
</a>
|
||||
<nav className="z-3 bg-background-dark">
|
||||
<div className="flex h-14 items-center max-w-screen-2xl mx-auto px-6 md:px-10 gap-8">
|
||||
<a className="flex w-fit items-center gap-3 shrink-0" href="/">
|
||||
<AudacityIconSVG className="h-7 fill-accent" />
|
||||
<AudacityWordmarkSVG className="h-5 fill-accent" />
|
||||
</a>
|
||||
|
||||
<div className="hidden sm:flex items-center gap-8">
|
||||
{navLinks.map((navLink, index) => renderNavLink(navLink, index))}
|
||||
</div>
|
||||
|
||||
<div className="lg:flex-1 justify-center hidden gap-4 sm:flex">
|
||||
{navLinks.map((navLink, index) => {
|
||||
return renderNavLink(navLink, index);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="hidden lg:flex flex-1 justify-end items-center gap-3">
|
||||
<a href="/cloud-saving" className="font-muse-sans text-16 text-text-primary hover:text-accent">
|
||||
Audacity Cloud saving
|
||||
<div className="hidden lg:flex flex-1 justify-end items-center gap-5">
|
||||
<a
|
||||
href="/cloud-saving"
|
||||
className="font-muse-sans text-16 text-text-contrast hover:text-accent transition-colors"
|
||||
>
|
||||
Try Audacity Cloud
|
||||
</a>
|
||||
<SignUpButton onClick={handleButtonClick} />
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="flex w-10 h-10 hover:bg-gray-100 active:bg-gray-200 rounded-sm justify-center items-center sm:hidden"
|
||||
className="flex w-10 h-10 hover:bg-white/10 active:bg-white/20 rounded-sm justify-center items-center sm:hidden text-text-contrast"
|
||||
onClick={() => handleHamburgerMenuClick()}
|
||||
aria-label="Hamburger menu"
|
||||
>
|
||||
{isHamburgerMenuOpen ? (
|
||||
<svg
|
||||
className="fill-gray-700 w-4"
|
||||
className="fill-current w-4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 320 512"
|
||||
>
|
||||
@@ -106,7 +98,7 @@ function NavigationReact(props) {
|
||||
</svg>
|
||||
) : (
|
||||
<svg
|
||||
className="fill-gray-700 w-4"
|
||||
className="fill-current w-4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 448 512"
|
||||
>
|
||||
@@ -117,12 +109,12 @@ function NavigationReact(props) {
|
||||
</div>
|
||||
|
||||
{isHamburgerMenuOpen && (
|
||||
<div className="flex flex-col py-2 bg-gray-50 border-y-2 absolute left-0 right-0 z-40 transition-opacity duration-200 ease-in-out opacity-100">
|
||||
<div className="flex flex-col py-2 bg-background-dark border-y border-white/10 absolute left-0 right-0 z-40 transition-opacity duration-200 ease-in-out opacity-100">
|
||||
{navLinks.map((navLink, index) => (
|
||||
<a
|
||||
key={index}
|
||||
onClick={() => handleHamburgerMenuClick()}
|
||||
className="py-3 px-4 text-text-primary hover:text-accent hover:bg-gray-100 transition-all duration-200 ease-in-out"
|
||||
className="py-3 px-6 font-muse-sans text-16 text-text-contrast hover:text-accent hover:bg-white/5 transition-all duration-200 ease-in-out"
|
||||
style={{
|
||||
animationName: "fadeIn",
|
||||
animationDuration: "200ms",
|
||||
|
||||
@@ -9,9 +9,9 @@ function SignUpButton({ onClick }) {
|
||||
>
|
||||
<button
|
||||
onClick={onClick}
|
||||
className="bg-accent text-white rounded-full py-2 px-4 font-semibold hover:opacity-90 transition-opacity"
|
||||
className="inline-flex items-center justify-center h-9 px-5 font-muse-sans text-16 font-semibold text-text-contrast border border-text-contrast rounded-full hover:bg-text-contrast hover:text-background-dark transition-colors"
|
||||
>
|
||||
Sign up
|
||||
Sign Up
|
||||
</button>
|
||||
</a>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user