alecodes/personal-page
2
0
Fork 0
Code Issues 17 Pull requests Projects 1 Releases Packages 1 Wiki Activity Actions

feat(Navbar): apply sticky style to the main navbar

Browse source
This commit is contained in:
Alexander Navarro 2024-03-14 14:43:46 -03:00
parent 544815e4d2
commit 9f15e40d6e
5 changed files with 32 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

0
src/assets/style/_animations.scss Normal file
View file

18
src/assets/style/_utils.scss
View file

@ -1,6 +1,20 @@
@use './variables' as *; @use './variables' as *;
@use './mixins'; @use './mixins';
.position-fixed {
position: fixed;
left: 0;
top: 0;
z-index: 2;
}
.position-sticky {
position: sticky;
left: 0;
top: 0;
z-index: 2;
}
.d-none { .d-none {
display: none; display: none;
} }
@ -285,6 +299,10 @@
box-shadow: none; box-shadow: none;
} }
.shadow-1 {
box-shadow: 10px 10px 5px 0px var(--prj-shadow);
}
.border-radius { .border-radius {
border-radius: var(--prj-border-radius); border-radius: var(--prj-border-radius);
} }

1
src/assets/style/style.scss
View file

@ -1,5 +1,6 @@
@use './variables.scss' as *; @use './variables.scss' as *;
@use './utils.scss'; @use './utils.scss';
@use './animations.scss';
// SASS variables are imported without namespace, but try to always use native // SASS variables are imported without namespace, but try to always use native
// CSS variables when possible so they can be overrwritten by custom styles // CSS variables when possible so they can be overrwritten by custom styles

8
src/components/Navbar.astro
View file

@ -12,7 +12,7 @@ const links = [
--- ---
<div id="main-navbar"> <div id="main-navbar">
<nav class="navbar d-none d-lg-block"> <nav class="navbar navbar-desktop d-none d-lg-block">
<ul class="list-unstyle hstack"> <ul class="list-unstyle hstack">
{ {
links.map((link) => ( links.map((link) => (
@ -29,7 +29,7 @@ const links = [
<div class="text-end d-lg-none"> <div class="text-end d-lg-none">
<OffCanvasBtn /> <OffCanvasBtn />
<OffCanvas> <OffCanvas>
<nav class="navbar"> <nav class="navbar navbar-mobile">
<ul class="list-unstyle text-start"> <ul class="list-unstyle text-start">
{ {
links.map((link) => ( links.map((link) => (
@ -63,6 +63,10 @@ const links = [
</script> </script>
<style lang="scss"> <style lang="scss">
.navbar-desktop {
margin-left: auto;
}
nav { nav {
width: fit-content; width: fit-content;
} }

15
src/layouts/Layout.astro
View file

@ -26,7 +26,7 @@ const { title } = Astro.props;
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gardevoir" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gardevoir" />
</head> </head>
<body transition:animate="fade"> <body transition:animate="fade">
<header> <header class="position-sticky py-1 py-lg-3">
<Navbar /> <Navbar />
</header> </header>
<main> <main>
@ -35,13 +35,12 @@ const { title } = Astro.props;
</div> </div>
<slot /> <slot />
</main> </main>
<style> <style lang="scss">
header > :global(*) { body {
margin-left: auto; header {
} background-color: var(--prj-bg);
border-radius: 0 0 var(--prj-border-radius) var(--prj-border-radius);
body > main { }
position: relative;
} }
/* Position spinner in the center of the screen instead of the center of it's parent */ /* Position spinner in the center of the screen instead of the center of it's parent */