processNotes.txt

Responsive Burger Navigation Process Notes
==========================================

STEP 1: Create a burger icon in html
====================================
    To do this, all you need to do is create a "hamberger div" with 3 "line" divs.
    This will be invisible at larger media sizes.
    Also remember that this is INSIDE the nav element.
    -----------------------------------------------
    <nav>
        <div class="hamberger">
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
        </div>
    </nav>
    -----------------------------------------------

STEP 2: Then add the links that you want for your navigation with an unordered list of list items.
=================================================================================================

----------------------------------------------
    <nav>
        <div class="hamberger">
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
        </div>
        <ul class="nav-links">
            <li><a class="link" href="#">Discover</a></li>
            <li><a class="link" href="#">Services</a></li>
            <li><a class="link" href="#">Contact</a></li>
        </ul>
    </nav>
----------------------------------------------

STEP 3: Add stylizations to the navigation
==========================================
The styling below will be used for larger viewport sizes.
-----------------------------------------------------

nav {
    height: 10vh;                             /* nav bar relative to the rest of the viewport (90vh)*/
    background: rgb(36, 35, 35);
}

.nav-links {
    display: flex;                              /* display elements side by side */
    list-style: none;                           /* remove default stylization (i.e. bullet points*/
    width: 50%;                                 /* make the wdith of nav-links 50% of the nav bar itself (i.e. XXXXXXXX--------*/
    height: 100%;                               /* make it 100% of the nav-links box*/
    align-items: center;                        /* position the links vertically in the center */
    justify-content: space-around;               /* space all the links so they are evenly spaced in the nav-links box */
    margin-left: auto;                          /* margin-left auto will position the links to the far RIGHT of the nav-links section*/

} 

.nav-links .link {                                /* For each link in the nav link... */
    color: white;                                 /* text is white...*/
    text-decoration: none;                       /* remove deafult style (i.e. underline)*/
}

-----------------------------------------------------

STEP 4: Add media query for 768 px and below
=============================================
-------------------------------------------
    @media screen and (max-width: 768px) {         /* media query when the screen is at or BELOW 768 px...*/
    
    }
-------------------------------------------

STEP 5: style the navigation menu for smaller screen
=====================================================
---------------------------------------------------------
@media screen and (max-width: 768px) {          /* media query when the screen is at or BELOW 768 px...*/

    .nav-links {
        position: fixed;                        /* with position: fixed, element is relative to viewport and stays in the same place even on scroll*/
        background: rgb(36, 35, 35);            /* color (same as the nav bar) */
        height: 100vh;                          /* height is 100% if the viewport */
        width: 100%;                            /* width is 100% of the viewport */
        flex-direction: column;                 /* let the flex direction be stacked on top of each other*/
    }

}
---------------------------------------------------------

STEP 6: style the burger icon
=============================
for this step, it would be useful to add a "display: none" so that you can see behind the nav-links stylization you just created.

Then, remember to set nav to relative so that we can freely position the hamburger icon.
Also, remember to remove the "display: none" from the nav-links in your media query to see the menu again.
-----------------------------------------------------------------
    nav {
        position: relative;                     /* since we want to place our burger menu on the far right we set position to relative...*/  
    }

    .hamburger {                               /* and because the nav has a realtive position, the hamburger can be moved freely...*/
        position: absolute;                    /* outside normal document flow */
        cursor: pointer;                       /* on hover, a pointer will show */
        right: 5%;                             /* and positioned 5% from the right of the window */

        top: 50%;                              /* 1. to center burger icon, set 50% (i.e. mid) */   
        transform: translate(-5%, -50%);       /* 2. and transform translate with offset*/
    }

-----------------------------------------------------------------

STEP 7: Add animation:
======================
To add an animation, we have to use "clip-path" so that we can essentially block-in what we see. So first, you need to add the clip=path property
to your element you want to animate, which in this case is the nav-links element.  The shape we use now is a circle, so add that in.
------------------------
clip-path: cirle();
------------------------

Next, you want to add the position you want the shape to be at with "at" with percentages 
------------------------------

                                position from top
                                |
clip-path: cirle(100px at 90% -10%);
                           |  
                           position from right

------------------------------

Also, because compatibility with the clip-path property might be lacking, add a webkit property as well.
--------------------------------
-webkit-clip-path: circle(100px at 90% -10%);
--------------------------------

Then, add a transition
-----------------------------------
transition: all 1s ease-out;
-----------------------------------


STEP 8: Create classes for JS for open and close animations
===========================================================
-----------------------------------------------------
   .nav-links.open {
        clip-path: circle(1000px at 90% -10%);              /* add the clip-path property with a circle that starts at the top right*/
        -webkit-clip-path: circle(1000px at 90% -10%);      /* and to ensure compatibility, add a webkit*/   
    }
-----------------------------------------------------
 

STEP 9: JS for burger
======================
-----------------------------------------------------------------------------
"use strict";

const hamburger = document.querySelector('.hamburger');         // selects hamburger icon.
const navLinks = document.querySelector('.nav-links');          // selects nav-links element
const links = document.querySelectorAll(".nav-links li");       // selects all the li's in nav-links

hamburger.addEventListener("click", (event) => {                 // on click of the hamburger icon...
    navLinks.classList.toggle('open');                           // toggle the "open" style
});

-----------------------------------------------------------------------------



STEP 10: JS for link animation
==============================
-----------------------------------------------------------------------------
hamburger.addEventListener("click", (event) => {                 // on click of the hamburger icon...
    navLinks.classList.toggle('open');                           // toggle the "open" style
    links.forEach(link => {
        link.classList.toggle('fade');
    });
});

-----------------------------------------------------------------------------









resources:
==========
https://bennettfeely.com/clippy/  -- good generator for shapes of menu