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 './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 {
display: none;
}
@ -285,6 +299,10 @@
box-shadow: none;
}
.shadow-1 {
box-shadow: 10px 10px 5px 0px var(--prj-shadow);
}
.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 './utils.scss';
@use './animations.scss';
// SASS variables are imported without namespace, but try to always use native
// 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">
<nav class="navbar d-none d-lg-block">
<nav class="navbar navbar-desktop d-none d-lg-block">
<ul class="list-unstyle hstack">
{
links.map((link) => (
@ -29,7 +29,7 @@ const links = [
<div class="text-end d-lg-none">
<OffCanvasBtn />
<OffCanvas>
<nav class="navbar">
<nav class="navbar navbar-mobile">
<ul class="list-unstyle text-start">
{
links.map((link) => (
@ -63,6 +63,10 @@ const links = [
</script>
<style lang="scss">
.navbar-desktop {
margin-left: auto;
}
nav {
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" />
</head>
<body transition:animate="fade">
<header>
<header class="position-sticky py-1 py-lg-3">
<Navbar />
</header>
<main>
@ -35,13 +35,12 @@ const { title } = Astro.props;
</div>
<slot />
</main>
<style>
header > :global(*) {
margin-left: auto;
}
body > main {
position: relative;
<style lang="scss">
body {
header {
background-color: var(--prj-bg);
border-radius: 0 0 var(--prj-border-radius) var(--prj-border-radius);
}
}
/* Position spinner in the center of the screen instead of the center of it's parent */