From ed67c02bd02228930e2edb3fc70cb83f85c9d25d Mon Sep 17 00:00:00 2001 From: HotPaotatoes <113345557+ChanatpakornD@users.noreply.github.com> Date: Thu, 4 Jan 2024 21:38:31 +0700 Subject: [PATCH] web 1 navigation bar (#3) * feat: UI * feat: added animation * chore: format code * chore: refactor css * refactor: alt * refactor: format * refactor: pnpm format * feat: responsive to middle in mobile devices * refactor: homepath --------- Co-authored-by: HotPaotatoes <113345557+ChanatpakornDev@users.noreply.github.com> Co-authored-by: Nutthapat Pongtanyavichai <59821765+leomotors@users.noreply.github.com> --- src/assets/navbar/logo-sgcu.svg | 16 ++++ src/assets/navbar/menu-close.svg | 15 ++++ src/assets/navbar/menu-idle.svg | 6 ++ src/assets/navbar/rightArrow.png | Bin 0 -> 1675 bytes src/components/Navbar.svelte | 144 +++++++++++++++++++++++++++++++ src/layouts/Layout.astro | 2 + 6 files changed, 183 insertions(+) create mode 100644 src/assets/navbar/logo-sgcu.svg create mode 100644 src/assets/navbar/menu-close.svg create mode 100644 src/assets/navbar/menu-idle.svg create mode 100644 src/assets/navbar/rightArrow.png create mode 100644 src/components/Navbar.svelte diff --git a/src/assets/navbar/logo-sgcu.svg b/src/assets/navbar/logo-sgcu.svg new file mode 100644 index 0000000..1ddea58 --- /dev/null +++ b/src/assets/navbar/logo-sgcu.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/assets/navbar/menu-close.svg b/src/assets/navbar/menu-close.svg new file mode 100644 index 0000000..45c1abc --- /dev/null +++ b/src/assets/navbar/menu-close.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/assets/navbar/menu-idle.svg b/src/assets/navbar/menu-idle.svg new file mode 100644 index 0000000..0938140 --- /dev/null +++ b/src/assets/navbar/menu-idle.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/navbar/rightArrow.png b/src/assets/navbar/rightArrow.png new file mode 100644 index 0000000000000000000000000000000000000000..e41f5eb226209b2bea2b9221b8c55c380cfd7bd9 GIT binary patch literal 1675 zcmV;626Xv}P);jp%C7K~bb02-{Ml;gL1+j% zgWunS<5Y~9FXLyk2zmgz2fBKW-x+~6C$E2krcIe2CrPF+fj)))_I&&UeF2Rq^CJbu z-2`n-OrOkY{A4oVdkGqY7Fk5-QXk;7jhF08puwDf!_RI7GzR?vaS-?&@_y1p9Kf*E z(CyGEXv&MTA9@~IW+FZk^LKk=3Ri?Q^Ot#8@e{EC!&X3BpzUp#pJqPK{2RRHnXin` zfP6j)!@jaGPhVppzj^lN+0#ffe-m^VT8j7DgZG>=5eG1A6|@=pH93=Kyco=UuJEme z7MO?!7&hdM%s=nN;qorm_LcdukuiSWJW9K7EYMF1HP-EEfyAu4&uEI;XP+e z#6jk=e?XbvXC&s|pJaZ!^ZYdPwXqWu-k9p8<`q%(cg*0CoUy>yAzr@S)7Bc@lz(=HF*wV}}Kt z`|zIACgLEI`6}kn6Nn@T}hfy$Fq0)tsU1rGBM_3=^GUC{g7FoXYq(VCFv#T?YN>6%=!5$u=Hn z{v*&c^L(7Vv*(C<~$<(D=71hmUUE4awj z?#dlA{WSCe^cu8Z9XBGN&TI9eLwIPf!hQKN6**6PhbnTE@f`qWU5UdT(4!XC+KbM& zd7~x^I6tzmNmDs8zG7fHGkp}g7usmWKI1ggxtISw^u01Y5?nQR{e?$XWvfel1;8w> zowES~w@%y1^z^0-&eJ=R>CMRalECy!ak$&UV2-(7L#A^e$4Z!Wmj7l6!g)HkRzJ2dkQ>(x zk`dtLd*CqB*#l>TE7Rk^)%B|X@J2uTG}EWO7|e7wJmQlu20c8}uB#~H=fT6`4Cm== zUa;PZXZjK7bqkrUrUx;QT;4Z%`@L+lnO>`2wqg!k-K+Z#pWUyXjS7m+)AxF&U%l5L z)0E z_cw|8+dRy}TcIL~Uc$o$%C*o_(2sMN&T81M7Ex4zGCl)0P+;aS79JaR1;nBYHXP#T zlonAi&s9XxizJyp+?4qfnM|+s1A|2gI2X@k{!VXfxb#G(*M6a)TX5JCtcgb+dqA%qY@2qA`2(002ovPDHLkV1icK9wGn$ literal 0 HcmV?d00001 diff --git a/src/components/Navbar.svelte b/src/components/Navbar.svelte new file mode 100644 index 0000000..311dc99 --- /dev/null +++ b/src/components/Navbar.svelte @@ -0,0 +1,144 @@ + + + + + diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 883b2ef..16d728a 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -1,6 +1,7 @@ --- import "@fontsource-variable/space-grotesk"; import "@fontsource/noto-sans-thai-looped"; +import Navbar from "../components/Navbar.svelte"; interface Props { title: string; @@ -20,6 +21,7 @@ const { title } = Astro.props; {title} +