subline/views/dashboardPage/sidebars.css

@media screen and (orientation: portrait){
    @media screen and (max-width: 1400px){
        .sidebar{
            width: 100vw;
            color: white;
        }

        .sidebarIconButtons{
            display: none;
        }

        /* MENU */
        #menu{
            display: none;
            width: 100vw;
            padding: 0;
        }
    
            .menuShifter{
                display: none;
            }

            .menuHead{
                justify-content: right;
                padding: 0;
                margin-bottom: 25px;
            }

                .menuHead a{
                    justify-content: center;
                    margin: auto;
                }


            .menuButton{
                padding-left: 0;
                justify-content: center;
                background: rgb(201, 201, 201);
                color: black;
                width: 90%;
                margin: 15px auto;
                box-shadow: 0 0 5px white;
            }
    }

    @media screen and (min-width: 601px){
        .menuHead a p{
            font-size: 40px;
        }
    }
}

@media screen and (orientation: landscape){
    @media screen and (max-width: 1200px){
        .sidebar{
            width: 100vw;
            color: white;
            padding: 3px 15px;
        }

        .sidebarIconButtons{
            display: none;
        }

        /* MENU */
        #menu{
            display: none;
            width: 100vw;
            height: 100vh;
            padding: 0;
            flex-wrap: wrap;
            flex-direction: row;
            justify-content: space-around;
        }

            .menuShifter{
                display: none;
            }

            .menuHead{
                justify-content: center;
                padding: 0;
                margin-bottom: 0;
                height: 50px;
            }

                .menuHead a{
                    width: initial;
                    justify-content: center;
                }

                    .menuLogo{
                        max-height: 50px;
                        max-width: 50px;
                    }

                .menuButton{
                    width: 40%;
                    justify-content: center;
                    background: rgb(201, 201, 201);
                    color: black;
                    margin: 15px;
                    padding-left: 0;
                    box-shadow: 0 0 5px white;
                    height: 10vh;
                }

            /* INGREDIENT DETAILS */
            #ingredientDetails > *{
                margin: 0;
            }

            #recipeListLabel, #subIngredientList{
                display: none;
            }

            /* FILTER ORDERS */
            #orderFilter > *{
                margin: 0;
            }

            #orderFilter h1{
                padding: 0;
            }

            #filterOrderDateRange, #orderFilter .lineBorder{
                display: none;
            }

            .dateRange{
                padding-bottom: 3px;
            }

            #orderFilterSubmit{
                margin-top: 3px;
            }

            /* ORDER DETAILS */
            #orderIngredients{
                display: none;
            }

            /* TRANSACTION DETAILS */
            #transactionRecipesLabel, .transactionRecipes, #transactionDetails .lineBorder{
                display: none;
            }

            /* FILTER TRANSACTIONS */
            #transactionFilter > *{
                margin: 0;
            }

            #transactionFilterDateLabel{
                display: none;
            }

            #transactionFilter .dateRange{
                margin-bottom: 5px;
            }

            #transFilterSubmit{
                margin-top: 5px;
            }

        @media screen and (min-width: 1000px){
            .menuLogo{
                max-height: initial;
                max-width: 300px;
            }

            .menuHead a p{
                font-size: 35px;
            }

            #recipeListLabel, #subIngredientList{
                display: flex;
            }

            /* ORDER FILTER */
            #orderFilterIngredients{
                max-height: 70%;
            }

            #orderFilterSubmit{
                margin-top: 15px;
            }

            /* ORDER DETAILS */
            #orderIngredients{
                display: flex;
                flex-direction: column;
            }

            /* TRANSACTION DETAILS */
            #transactionRecipesLabel, .transactionRecipes, #transactionDetails .lineBorder{
                display: flex;
                flex-direction: column;
            }

            /* TRANSACTION FILTER */
            #transFilterRecipeList{
                max-height: 70%;
            }
        }
    }
}