PoC Preview 2

haydncomley · Feb 5, 2024 · 2a1224c · 2a1224c
1 parent bf659e4
commit 2a1224c
Show file tree

Hide file tree

Showing 17 changed files with 476 additions and 66 deletions.
diff --git a/src/components/common/Content.astro b/src/components/common/Content.astro
@@ -0,0 +1,27 @@
+---
+import Sticker from "../items/Sticker.astro";
+import StickerText from "../items/StickerText.astro";
+
+interface Props {
+}
+
+const { } = Astro.props;
+---
+
+<div class="content">
+    <!-- <StickerText></StickerText> -->
+</div>
+
+<style lang="scss">
+    @use "easy-theme" as theme;
+
+    .content {
+        display: flex;
+        flex-direction: column;
+        // background-color: rgba(0,0,0,0.05);
+        width: 100%;
+        height: 100%;
+        max-width: 800px;
+        margin: auto;
+    }
+</style>
diff --git a/src/components/common/Navigation.astro b/src/components/common/Navigation.astro
@@ -1,28 +1,12 @@
 ---
 import NavigationItem from './NavigationItem.astro'
 import NavigationButton from './NavigationButton.astro'
-
-type NavItemProps = Omit<Parameters<typeof NavigationItem>[0], 'index'>;
-
-const navItems = [
-    {
-        label: 'Haydn Comley',
-        href: ''
-    },
-    {
-        label: 'About',
-        href: 'about'
-    },
-    {
-        label: 'Contact',
-        href: 'contact',
-    },
-] as const satisfies NavItemProps[];
+import NavigationName from './NavigationName.astro'
+import { navItems } from '../../lib/Pages.lib';
 ---
 
 <nav class="nav">
-    <div>
-    </div>
+    <NavigationName></NavigationName>
 
     <ul class="navLinks">
         { navItems.map((item, index) => (
@@ -38,11 +22,13 @@ const navItems = [
         border-bottom: var(--border);
         display: flex;
         justify-content: space-between;
+        align-items: center;
         z-index: 10;
         position: sticky;
         top: 0;
         background-color: var(--background);
         transition: var(--transitionSlow);
+        padding-left: .5rem;
     }
 
     body:has(#menu:checked) {

diff --git a/src/components/common/NavigationButton.astro b/src/components/common/NavigationButton.astro
@@ -1,7 +1,5 @@
 <span class="navBurgerWrapper">
-    <input type="checkbox" id="menu"></input>
-
-    <label class="navBurger" for="menu">
+    <div class="navBurger" id="menuBurger" tabindex="0">
         <span class="navBurgerRow">
             <span class="navBurgerDot"></span>
             <span class="navBurgerDot"></span>
@@ -17,7 +15,7 @@
             <span class="navBurgerDot"></span>
             <span class="navBurgerDot"></span>
         </span>
-    </label>
+    </div>
 </span>
 
 <style lang="scss">
@@ -28,12 +26,6 @@
 
     .navBurgerWrapper {
         position: relative;
-
-        input {
-            opacity: 0;
-            position: absolute;
-            pointer-events: none;
-        }
     }
 
     .navBurger {
@@ -49,8 +41,12 @@
         justify-content: center;
         overflow: hidden;
         cursor: pointer;
+
+        &:focus {
+            background-color: red;
+        }
 
-        #menu:not(:checked) ~ &:hover {
+        #menu:not(:focus) ~ &:hover {
             gap: 0;
             background-color: var(--secondary);
 
@@ -75,7 +71,7 @@
             }
         }
 
-        #menu:checked ~ & {
+        #menu:focus ~ & {
             gap: 0;
             background-color: var(--primary);
 

diff --git a/src/components/common/NavigationItem.astro b/src/components/common/NavigationItem.astro
@@ -18,7 +18,7 @@ const { href, label, index } = Astro.props;
     </a>
 </li>
 
-<style lang="scss" define:vars={{ index: `${(index * 0.05) }s` }}>
+<style lang="scss">
     @use "easy-theme" as theme;
 
     @keyframes softBlink {
@@ -40,7 +40,7 @@ const { href, label, index } = Astro.props;
         }
     }
     .navItem {
-        transition: .3s var(--index) ease;
+        transition: .3s ease;
         border-left: var(--border);
         position: relative;
         display: flex;
@@ -119,6 +119,4 @@ const { href, label, index } = Astro.props;
             }
         }
     }
-
-
 </style>
diff --git a/src/components/common/NavigationMenu.astro b/src/components/common/NavigationMenu.astro
@@ -1,23 +1,46 @@
-<div class="navMenu">
+---
+import { navItems } from '../../lib/Pages.lib';
+import NavigationMenuItem from './NavigationMenuItem.astro'
+---
 
+<div class="navMenu" id="menuSheet" tabindex="0">
+    <ul class="navMenuItems">
+        { navItems.map((item, index) => (
+            <NavigationMenuItem {...item} index={index}></NavigationMenuItem>
+        )) }
+    </ul>
 </div>
 
 <style lang="scss">
+    @use "../../styles/lib/helpers" as helpers;
+
+    @include helpers.showMenu() {
+        .navMenu {
+            transform: translateY(0%);
+            pointer-events: all;
+        }
+    }
+
     .navMenu {
         position: fixed;
         left: 0;
         top: 0;
         width: 100%;
-        height: 0%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
         background-color: var(--contrast);
+        color: var(--background);
         pointer-events: none;
-        transition: var(--transitionSlow);
         z-index: 5;
+        transform: translateY(-100%);
+        transition: var(--transitionSlow);
     }
 
-    body:has(#menu:checked) {
-        .navMenu {
-            height: 100%;
-        }
+    .navMenuItems {
+        list-style: none;
+        margin: auto;
     }
 </style>
diff --git a/src/components/common/NavigationMenuItem.astro b/src/components/common/NavigationMenuItem.astro
@@ -0,0 +1,34 @@
+---
+interface Props {
+    href: string;
+    label: string;
+    index: number;
+}
+
+const { href, label, index } = Astro.props;
+---
+
+<li class='navMenuItem'>
+    <a href={ '#' + href }>
+        0.{ index + 1 }
+
+        <span>
+            { label }
+        </span>
+    </a>
+</li>
+
+<style lang="scss">
+    @use "easy-theme" as theme;
+
+    .navMenuItem {
+        transition: .3s ease;
+        border-left: var(--border);
+        position: relative;
+        display: flex;
+        align-items: center;
+        white-space: nowrap;
+        background-color: var(--background);
+        overflow: hidden;
+    }
+</style>
diff --git a/src/components/common/NavigationName.astro b/src/components/common/NavigationName.astro
@@ -0,0 +1,25 @@
+<div class="name">
+    <p class="nameItem">Haydn</p>
+    <p class="nameItem">Comley</p>
+</div>
+
+<style lang="scss">
+    .name {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .nameItem {
+        font-family: 'Playfair Display', serif;
+        font-weight: 900;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        font-style: italic;
+
+        &:nth-child(2) {
+            margin-left: .4em;
+            margin-top: -.3em;
+        }
+    }
+</style>
diff --git a/src/components/common/Sidebar.astro b/src/components/common/Sidebar.astro
@@ -0,0 +1,55 @@
+---
+interface Props {
+    style: 'dark' | 'darker';
+}
+
+const { style } = Astro.props;
+---
+
+<div class:list={['sidebar', { 'darker': style === 'darker' }]}>
+    <slot></slot>
+</div>
+
+<style lang="scss">
+    @use "easy-theme" as theme;
+
+    .sidebar {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        background-color: theme.Color('primary', 'dark');
+        color: theme.Contrast('primary');
+        border-right: theme.Variable('border');
+        box-sizing: border-box;
+        width: 15rem;
+        transition: width 0.5s ease;
+
+        @include theme.Mobile {
+            width: 100%;
+            border-right: none;
+            border-bottom: theme.Variable('border');
+            transition: transform 0.5s ease;
+        }
+
+        &:nth-of-type(2) {
+            transition-delay: 0.075s;
+            z-index: -1;
+        }
+
+        &.darker {
+            background-color: theme.Color('primary', 'darker');
+        }
+    }
+
+    :global(#sidebar:not(:checked)) ~ .sidebar {
+        width: calc(theme.Variable('spacing') * 4);
+
+        @include theme.Mobile {
+            width: 100%;
+
+            &:nth-of-type(2) {
+                transform: translateY(-100%);
+            }
+        }
+    }
+</style>