Layout navigation

.env.example

@@ -1,8 +1,8 @@
-APP_NAME=Attended
+APP_NAME=attended.io
 APP_ENV=local
 APP_KEY=
 APP_DEBUG=true
-APP_URL=http://attended.io
+APP_URL=https://attended.io
 
 LOG_CHANNEL=stack
 

package.json

@@ -18,6 +18,7 @@
     "laravel-mix": "^4.0.7",
     "laravel-mix-purgecss": "^4.1.0",
     "postcss-easy-import": "^3.0.0",
+    "postcss-nested": "^4.1.2",
     "prettier": "^1.16.4",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",

public/browserconfig.xml

@@ -3,7 +3,7 @@
     <msapplication>
         <tile>
             <square150x150logo src="/mstile-150x150.png"/>
-            <TileColor>#e6002a</TileColor>
+            <TileColor>#da532c</TileColor>
         </tile>
     </msapplication>
 </browserconfig>

public/site.webmanifest

@@ -1,6 +1,6 @@
 {
-    "name": "attended.io",
-    "short_name": "attended.io",
+    "name": "",
+    "short_name": "",
     "icons": [
         {
             "src": "/android-chrome-192x192.png",

resources/css/bootstrap.css

@@ -18,6 +18,11 @@ html {
     box-sizing: border-box;
 }
 
+body {
+    @apply font-sans;
+    @apply leading-normal;
+}
+
 h1 {
     font-size: inherit; /* Reset normalize 2em */
 }

resources/css/components/cards.css

@@ -0,0 +1,9 @@
+.cards {
+    display: grid;
+    grid-gap: 2rem;
+    align-items: stretch;
+
+    @screen md {
+        grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
+    }
+}

resources/css/components/layout.css

@@ -0,0 +1,36 @@
+.layout {
+    @screen md {
+        display: grid;
+        min-height: 100vh;
+        grid-template-columns: minmax(auto, 25rem) 1fr;
+        grid-template-areas: 'nav content';
+        grid-template-columns: minmax(auto, 25rem) 1fr;
+    }
+}
+
+.layout-nav {
+    position: fixed;
+    height: 100vh;
+    width: auto;
+    max-width: 100vw;
+    z-index: 2;
+    transform: translateX(calc(-100% + 4px));
+    transition: transform 0.3s ease;
+    background-attachment: fixed;
+    background-image: linear-gradient(
+        -15deg,
+        config('colors.grey-dark'),
+        config('colors.grey-darker')
+    );
+
+    @screen md {
+        position: relative;
+        grid-area: nav;
+        height: auto;
+        transform: translateX(0);
+    }
+}
+
+.layout-content {
+    grid-area: content;
+}

resources/css/components/markup.css

@@ -0,0 +1,2 @@
+.markup {
+}

resources/css/components/menu.css

@@ -0,0 +1,34 @@
+.menu-title {
+    @apply font-condensed;
+    @apply font-bold;
+    @apply text-sm;
+    @apply text-grey;
+    @apply mt-0 mb-2;
+    text-transform: uppercase;
+}
+
+.menu {
+    & li {
+        @apply my-2;
+        @apply text-grey-lighter;
+
+        &:before {
+            @apply bg-red;
+            position: absolute;
+            content: '';
+            height: 100%;
+            width: 4px;
+            left: -2rem;
+            opacity: 0;
+        }
+
+        &.active:before {
+            opacity: 1;
+        }
+
+        &.active a,
+        & a:hover {
+            @apply text-white;
+        }
+    }
+}

resources/css/components/nav-toggle.css

@@ -0,0 +1,70 @@
+.nav-toggle {
+    @apply bg-grey;
+    @apply text-white;
+    @apply shadow;
+    position: absolute;
+    display: grid;
+    align-items: center;
+    justify-content: center;
+    top: 2rem;
+    right: 1rem;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 0 500px 500px 500px;
+    transition: border-radius 0.5s ease, transform 0.5s ease, background-color 0.5s ease;
+    transform: translateX(3.15rem) rotate(-45deg);
+
+    @screen md {
+        display: none;
+    }
+}
+
+.nav-toggle-icon {
+    width: 1rem;
+    display: block;
+    transform: rotate(45deg);
+
+    &:before,
+    &:after {
+        @apply bg-white;
+        display: block;
+        content: '';
+        height: 2px;
+        width: 100%;
+        opacity: 0.5;
+        transition: transform 0.5s ease;
+    }
+
+    &:before {
+        transform: translateY(-3px);
+    }
+
+    &:after {
+        position: absolute;
+        top: 0;
+        transform: translateY(3px);
+    }
+}
+
+html.nav-is-toggled {
+    & .layout-nav {
+        transform: translateX(0);
+        @apply shadow-lg;
+    }
+
+    & .nav-toggle {
+        transform: translateX(-1rem);
+        border-radius: 500px;
+        @apply shadow-none;
+    }
+
+    & .nav-toggle-icon {
+        &:before {
+            transform: translateY(0);
+        }
+
+        &:after {
+            transform: translateY(0) rotate(90deg);
+        }
+    }
+}

resources/css/utilities/grid.css

@@ -0,0 +1,15 @@
+.grid {
+    display: grid;
+}
+
+.justify-self-start {
+    justify-self: start;
+}
+
+.justify-self-center {
+    justify-self: center;
+}
+
+.justify-self-end {
+    justify-self: end;
+}