Files for my website
bwc9876.dev
Add More Socials, Better Navbar On Mobile
+119
-35
+13
-4
src/components/IconLink.astro
+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
+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
+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