Move header and footer to App, setup basic routing

paulolieuthier · Sep 18, 2021 · bbad24e · bbad24e
1 parent 7008f85
commit bbad24e
Show file tree

Hide file tree

Showing 7 changed files with 268 additions and 209 deletions.
diff --git a/theme/package-lock.json b/theme/package-lock.json
diff --git a/theme/package.json b/theme/package.json
@@ -18,6 +18,7 @@
     "@apollo/client": "^3.4.8",
     "@vue/apollo-composable": "^4.0.0-alpha.14",
     "graphql": "^15.5.1",
-    "graphql-tag": "^2.12.5"
+    "graphql-tag": "^2.12.5",
+    "vue-router": "^4.0.11"
   }
 }
diff --git a/theme/src/components/App.vue b/theme/src/components/App.vue
@@ -1,17 +1,91 @@
 <template>
-    <Home />
+    <template v-if="!loading">
+        <Section id="header" flow="row" class="light-gray">
+            <div id="content">
+                <header>
+                    <img :src="data.logo" />
+                    <div id="title">
+                        <h1>{{ data.title }}</h1>
+                        <h2>{{ data.subtitle }}</h2>
+                    </div>
+                </header>
+                <div id="menu-horizontal">
+                    <MenuHorizontal ref="menu" />
+                </div>
+                <div id="menu-collapsible">
+                    <MenuCollapsible />
+                </div>
+            </div>
+        </Section>
+
+        <router-view @scrolledToSection="onScrolledToSection" />
+
+        <Section id="footer" class="dark">
+            <div id="footer-items">
+                <div id="footer-main-item">
+                    <h3>{{ data.footer.first.title }}</h3>
+                    {{ data.footer.first.content }}
+                </div>
+                <div id="footer-secondary-items">
+                    <div id="item">
+                        <h3>{{ data.footer.second.title }}</h3>
+                        {{ data.footer.second.content }}
+                    </div>
+                    <div id="item">
+                        <h3>Redes Sociais</h3>
+                        <a v-if="data.footer.social.youtube" :href="data.footer.social.youtube">
+                            <i class="fab fa-youtube" />
+                        </a>
+                        <a v-if="data.footer.social.instagram" :href="data.footer.social.instagram">
+                            <i class="fab fa-instagram" />
+                        </a>
+                        <a v-if="data.footer.social.facebook" :href="data.footer.social.facebook">
+                            <i class="fab fa-facebook" />
+                        </a>
+                        <a v-if="data.footer.social.spotify" :href="data.footer.social.spotify">
+                            <i class="fab fa-spotify" />
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </Section>
+
+        <Section id="copyright" class="darker center">
+            {{ data.title }}
+        </Section>
+    </template>
 </template>
-  
+
 <script>
-import Home from './Home.vue'
-  
+import Section from './Section.vue'
+import MenuHorizontal from './MenuHorizontal.vue'
+import MenuCollapsible from './MenuCollapsible.vue'
+
+import { ref } from 'vue'
+import Querier from '../querier.js'
+
 export default {
     components: {
-        Home
-    } 
-} 
+        Section,
+        MenuHorizontal,
+        MenuCollapsible,
+    },
+    setup() {
+        const { loading, data } = Querier.home()
+        return {
+            menu: ref(null),
+            loading,
+            data,
+        }
+    },
+    methods: {
+        onScrolledToSection(section) {
+            this.menu.activate(section)
+        }
+    }
+}
 </script>
-  
+
 <style lang="stylus">
 html, body
     margin 0
@@ -29,3 +103,122 @@ body
 a
     color black
 </style>
+
+<style scoped lang="stylus">
+Section#header
+    border-bottom 1px solid #ccc
+    border-top 5px solid #3069B3 !important
+    box-shadow 0 0 2px 0 #aaa
+    height 90px
+    position sticky
+    top 0
+    z-index 1000
+
+    #content
+        align-items center
+        display flex
+        flex-flow row nowrap
+        height 100%
+        justify-content space-between
+        padding 0 10px
+        width 100%
+
+        header
+            display grid
+            grid-template-columns  55px 1fr
+            grid-template-rows  55px
+
+            img
+                height 100%
+
+            #title
+                display flex
+                flex-flow column nowrap
+                height 100%
+                justify-content center
+                padding-left 20px
+
+                h1
+                    font-size @css{min(26px, max(16px, 2vw))}
+                    margin 0
+                    padding 0
+
+                    span
+                        white-space nowrap
+
+                h2
+                    color #3069B3
+                    font-size @css{min(14px, max(12px, 1.4vw))}
+                    font-weight 600
+                    margin 0
+                    padding 0
+                    white-space nowrap
+
+    #menu-collapsible
+        display none
+        width 100%
+
+@media (max-width: 767px)
+    Section#header
+        height auto
+        position initial
+
+        #menu-horizontal
+            display none
+
+        #menu-collapsible
+            display block
+
+        #content
+            flex-flow column nowrap
+
+            header
+                padding 10px 0
+
+                #title h1 span
+                    white-space normal
+
+Section#footer
+    color #eee
+    font-size 14px
+    padding 40px 15px 40px
+
+    #footer-items
+        display grid
+        grid-gap 40px
+        grid-template-columns repeat(auto-fit, minmax(@css{min(100%, 300px)}, 1fr))
+
+        #footer-main-item, #footer-secondary-items
+            padding 0 20px
+            white-space pre-line
+
+        #footer-secondary-items
+            display grid
+            grid-gap 40px
+            grid-template-columns repeat(auto-fit, minmax(@css{min(100%, 200px)}, 1fr))
+
+            #item
+                font-weight 300
+                white-space pre-line
+
+        h3
+            font-size 16px
+            margin 0 0 10px
+
+        a
+            color white
+
+        i
+            font-size 22px
+            padding 5px 20px 0 0
+
+        i:hover
+            transform scale(1.1)
+
+Section#copyright
+    color #eee
+    font-size 15px
+    font-weight 300
+    padding 20px 0
+    text-align center
+</style>