Files for my website bwc9876.dev
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Add More Socials, Better Navbar On Mobile

Ben C 72c6fae1 2edaf6d3

+119 -35
+13 -4
src/components/IconLink.astro
··· 2 2 import { Icon } from "astro-icon"; 3 3 import ExtLink from "./ExtLink.astro"; 4 4 5 + export type LabelPlacement = "top" | "left" | "right" | "bottom" | "inside"; 6 + 5 7 export interface Props { 6 8 href: string; 7 9 icon: string; 8 10 size: number; 9 11 label: string; 10 - placement: "top" | "left" | "right" | "bottom"; 12 + placement: LabelPlacement; 13 + overridePack?: string; 11 14 } 12 15 13 - const { href, label, placement, icon, size } = Astro.props; 16 + const { href, label, placement, icon, size, overridePack } = Astro.props; 14 17 --- 15 18 16 - <ExtLink aria-label={label} data-tooltip={label} data-placement={placement} href={href}> 17 - <Icon width={size} height={size} name={`bi:${icon}`} /> 19 + <ExtLink 20 + aria-label={label} 21 + data-tooltip={placement !== "inside" ? label : null} 22 + data-placement={placement !== "inside" ? placement : null} 23 + href={href} 24 + > 25 + <Icon width={size} height={size} name={`${overridePack ?? "bi"}:${icon}`} /> 26 + {placement === "inside" && label} 18 27 </ExtLink>
+69
src/components/Socials.astro
··· 1 + --- 2 + import IconLink, { LabelPlacement } from "@components/IconLink.astro"; 3 + import type { AriaRole } from "astro-icon/lib/Props"; 4 + 5 + export interface Props { 6 + labelPlacement: LabelPlacement; 7 + [rest: string | number | symbol]: unknown; 8 + } 9 + 10 + const { labelPlacement, ...rest } = Astro.props; 11 + --- 12 + 13 + <ul {...rest}> 14 + <li> 15 + <IconLink 16 + icon="github" 17 + size={25} 18 + href="https://github.com/Bwc9876" 19 + label="GitHub" 20 + placement={labelPlacement} 21 + /> 22 + </li> 23 + <li> 24 + <IconLink 25 + icon="twitter" 26 + size={25} 27 + href="https://twitter.com/Bwc9876" 28 + label="Twitter" 29 + placement={labelPlacement} 30 + /> 31 + </li> 32 + <li> 33 + <IconLink 34 + icon="instagram" 35 + size={25} 36 + href="https://www.instagram.com/bwc6789/" 37 + label="Instagram" 38 + placement={labelPlacement} 39 + /> 40 + </li> 41 + <li> 42 + <IconLink 43 + icon="linkedin" 44 + size={25} 45 + href="https://www.linkedin.com/in/bwc9876" 46 + label="LinkedIn" 47 + placement={labelPlacement} 48 + /> 49 + </li> 50 + <li> 51 + <IconLink 52 + icon="paypal" 53 + size={25} 54 + href="https://paypal.me/bwc9876" 55 + label="Paypal" 56 + placement={labelPlacement} 57 + /> 58 + </li> 59 + <li> 60 + <IconLink 61 + icon="patreon" 62 + overridePack="mdi" 63 + size={25} 64 + href="https://patreon.com/Bwc9876" 65 + label="Patreon" 66 + placement={labelPlacement} 67 + /> 68 + </li> 69 + </ul>
+37 -31
src/layouts/Layout.astro
··· 5 5 import "@picocss/pico/css/pico.min.css"; 6 6 7 7 import defaultOg from "@images/default-og.png"; 8 + import Socials from "@components/Socials.astro"; 8 9 9 10 export interface Props { 10 11 title: string; ··· 78 79 <li class="brand-name"> 79 80 <b>Bwc9876</b>.dev 80 81 </li> 81 - <li> 82 + <li class="home-link"> 82 83 <a href="/">Home</a> 83 84 </li> 84 85 <li> 85 86 <a href="/projects">Projects</a> 86 87 </li> 87 88 </ul> 88 - <ul> 89 - <li> 90 - <IconLink 91 - icon="github" 92 - size={25} 93 - href="https://github.com/Bwc9876" 94 - label="GitHub" 95 - placement="bottom" 96 - /> 97 - </li> 98 - <li> 99 - <IconLink 100 - icon="twitter" 101 - size={25} 102 - href="https://twitter.com/Bwc9876" 103 - label="Twitter" 104 - placement="bottom" 105 - /> 106 - </li> 89 + <ul class="mobile-socials"> 107 90 <li> 108 - <IconLink 109 - icon="linkedin" 110 - size={25} 111 - href="https://www.linkedin.com/in/bwc9876" 112 - label="Linkedin" 113 - placement="bottom" 114 - /> 91 + <details role="list" dir="rtl"> 92 + <summary aria-haspopup="listbox" role="link">Socials</summary> 93 + <Socials role="listbox" labelPlacement="inside" /> 94 + </details> 115 95 </li> 116 96 </ul> 97 + <Socials class="normal-socials" labelPlacement="bottom" /> 117 98 </nav> 118 99 <main class="container"> 119 100 <slot /> ··· 127 108 --muted-color: hsl(205 10% 65% / 1) !important; 128 109 } 129 110 111 + .home-link { 112 + padding-left: calc(var(--spacing) * 2); 113 + } 114 + 130 115 @media (width <= 575px) { 131 116 .brand-name { 132 117 display: none; 133 118 } 119 + 120 + .container { 121 + padding: 0 calc(var(--spacing) * 2) !important; 122 + } 134 123 } 135 124 136 - @media (width <= 330px) { 137 - nav [astro-icon] { 138 - width: 1em; 139 - height: 1em; 125 + nav .mobile-socials { 126 + display: none; 127 + } 128 + 129 + nav details a { 130 + direction: ltr !important; 131 + } 132 + 133 + nav details [astro-icon] { 134 + width: var(--font-size); 135 + height: var(--font-size); 136 + margin-right: 0.2rem; 137 + } 138 + 139 + @media (width <= 800px) { 140 + nav .normal-socials { 141 + display: none; 142 + } 143 + 144 + nav .mobile-socials { 145 + display: flex; 140 146 } 141 147 } 142 148