Pantry

by Darby Rathbone

HTML

<main>
    <aside>
        <nav>
            <ul>
                <li><a href="">My Pantry</a> 
                </li>
                <li><a href="">My Fridge</a> 
                </li>
                <li><a href="">My Freezer</a> 
                </li>
                <li><a href="">Spices</a> 
                </li>
                <li><a href="">Grocery List</a> 
                </li>
                <li><a href="">Coupons</a> 
                </li>
                <li><a href="">Recipes</a> 
                </li>
                <li><a href="">Alarms</a> 
                </li>
            </ul>
        </nav>
    </aside>
    <article>
        <header>My Pantry</header>
        <article></article>
    </article>
</main>

SCSS

$boxsize:calc(100vh/8);
$boxfontsize:calc(100vh/8/4);
$windowheight:calc(100vh);
$windowwidth:calc(100vw);


 article {
     border:dotted black 1px;
 }
 aside {
     padding:0px;
     margin:0px;
     position:fixed;
     right:0px;
     width:auto;
     max-width:60px;
     height:$windowheight:calc(100vh);
     top:0px;
     bottom:0px;
     nav {


         ul {
             top:0px;
             right:0px;
             bottom:0px;
       
            
             list-style:none;
             li {
                 position:relative;
                 height:$boxsize;
                 width:$boxsize;
                 outline:groove rgba(150, 150, 150, .4) 2px;
                right:0%;
                left:0%;
                transition:500ms all;
                
                &:hover{
                                        transition: 500ms all;
                        width:auto;
                    right:0%;
                        left:-5%;
                    color:transparent;
                        background-clip:text;
                    outline:groove rgba(50, 50, 50, .4) 2px;
                    background-color:rgba(255,200,100,.5);
                }
                 a {
                     text-align:center;
                     position: absolute;
                     width:100%;
                     top: 50%;
                        
                     left:50%;
                     transform: translate(-50%, -50%);
                     font-size:$boxfontsize;
                 }
             }
            
         }
     }
 }

 * {
     padding:0px;
     margin:0px;
 }

JavaScript

[{
    event: 'touchstart',
    Value: function touchStart() {}
}, {
    event: 'touchmove',
    Value: function touchMove() {}
}, {
    event: 'touchend',
    Value: function touchEnd() {}
}]
addEventListener(